diff --git a/Pattern Creation Game/Readme.md b/Pattern Creation Game/Readme.md new file mode 100644 index 00000000..ebddeccb --- /dev/null +++ b/Pattern Creation Game/Readme.md @@ -0,0 +1,25 @@ +

Pattern Creation Game

+ +A web-based game that allows users to create, save, load, and share patterns using a customizable grid. Users can select colors, change brush sizes, use an eraser, and apply a fill tool to create intricate designs. +
+

Features

+ +1- Color Picker: Select any color using an HTML color input.
+2- Brush Size Tool: Change the size of the brush to color multiple cells at once.
+3- Eraser Tool: Erase colors from the grid cells.
+4- Fill Tool: Fill the entire grid with the selected color.
+5- Undo/Redo: Revert or reapply the last few actions.
+6- Save Pattern: Save the current pattern as a JSON string.
+7- Load Pattern: Load a pattern from a JSON string.
+8- Clear Grid: Reset the entire grid to white. +
+

How to Play

+ +1- Select a Color: Use the color picker to choose a color, or click the "Eraser" to select the eraser tool.
+2- Change Brush Size: Select the desired brush size from the dropdown menu.
+3- Color the Grid: Click on grid cells to color them with the selected brush size and color.
+4- Fill Grid: Click the "Fill Grid" button to fill the entire grid with the selected color.
+5- Clear Grid: Click the "Clear Grid" button to reset the grid to white.
+6- Undo/Redo: Use the "Undo" and "Redo" buttons to revert or reapply the last few actions.
+7- Save Pattern: Click the "Save Pattern" button to save the current pattern as a JSON string in the textarea.
+8- Load Pattern: Enter a JSON string in the textarea and click the "Load Pattern" button to load the pattern. diff --git a/Pattern Creation Game/index.html b/Pattern Creation Game/index.html new file mode 100644 index 00000000..fb124b41 --- /dev/null +++ b/Pattern Creation Game/index.html @@ -0,0 +1,36 @@ + + + + + + Pattern Creation Game + + + + +
+
+ +
Eraser
+
+
+ + + + + + + + +
+
+ +
+ + + + diff --git a/Pattern Creation Game/manifest.json b/Pattern Creation Game/manifest.json new file mode 100644 index 00000000..3b6a2119 --- /dev/null +++ b/Pattern Creation Game/manifest.json @@ -0,0 +1,22 @@ +{ + "name": "Pattern Creation Game", + "short_name": "PatternGame", + "description": "A game to create and save patterns.", + "start_url": "/", + "display": "standalone", + "background_color": "#ffffff", + "theme_color": "#000000", + "icons": [ + { + "src": "icon-192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "icon-512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ] + } + \ No newline at end of file diff --git a/Pattern Creation Game/script.js b/Pattern Creation Game/script.js new file mode 100644 index 00000000..ec585da0 --- /dev/null +++ b/Pattern Creation Game/script.js @@ -0,0 +1,110 @@ +const gridContainer = document.getElementById('grid-container'); +const patternCode = document.getElementById('pattern-code'); +let selectedColor = 'black'; +let brushSize = 1; +let grid = []; +let history = []; +let redoStack = []; + +function createGrid() { + gridContainer.innerHTML = ''; + for (let i = 0; i < 10; i++) { + grid[i] = []; + for (let j = 0; j < 10; j++) { + const cell = document.createElement('div'); + cell.classList.add('grid-cell'); + cell.addEventListener('click', () => colorCell(i, j)); + grid[i][j] = { element: cell, color: 'white' }; + gridContainer.appendChild(cell); + } + } +} + +function colorCell(row, col) { + for (let i = 0; i < brushSize; i++) { + for (let j = 0; j < brushSize; j++) { + if (grid[row + i] && grid[row + i][col + j]) { + const cell = grid[row + i][col + j]; + if (cell.color !== selectedColor) { + history.push({ row: row + i, col: col + j, color: cell.color }); + redoStack = []; + cell.color = selectedColor; + cell.element.style.backgroundColor = selectedColor; + } + } + } + } +} + +function selectColor(color) { + selectedColor = color; +} + +function savePattern() { + const pattern = grid.map(row => row.map(cell => cell.color)); + patternCode.value = JSON.stringify(pattern); +} + +function loadPattern() { + try { + const pattern = JSON.parse(patternCode.value); + pattern.forEach((row, i) => { + row.forEach((color, j) => { + grid[i][j].color = color; + grid[i][j].element.style.backgroundColor = color; + }); + }); + history = []; + redoStack = []; + } catch (error) { + alert('Invalid pattern code'); + } +} + +function undo() { + const lastAction = history.pop(); + if (lastAction) { + redoStack.push({ ...lastAction, color: grid[lastAction.row][lastAction.col].color }); + grid[lastAction.row][lastAction.col].color = lastAction.color; + grid[lastAction.row][lastAction.col].element.style.backgroundColor = lastAction.color; + } +} + +function redo() { + const lastUndo = redoStack.pop(); + if (lastUndo) { + history.push({ ...lastUndo, color: grid[lastUndo.row][lastUndo.col].color }); + grid[lastUndo.row][lastUndo.col].color = lastUndo.color; + grid[lastUndo.row][lastUndo.col].element.style.backgroundColor = lastUndo.color; + } +} + +function clearGrid() { + for (let row of grid) { + for (let cell of row) { + cell.color = 'white'; + cell.element.style.backgroundColor = 'white'; + } + } + history = []; + redoStack = []; +} + +function fillGrid() { + for (let row of grid) { + for (let cell of row) { + if (cell.color !== selectedColor) { + history.push({ row: grid.indexOf(row), col: row.indexOf(cell), color: cell.color }); + cell.color = selectedColor; + cell.element.style.backgroundColor = selectedColor; + } + } + } + redoStack = []; +} + +function changeBrushSize(size) { + brushSize = parseInt(size); +} + +createGrid(); diff --git a/Pattern Creation Game/styles.css b/Pattern Creation Game/styles.css new file mode 100644 index 00000000..262ffb9e --- /dev/null +++ b/Pattern Creation Game/styles.css @@ -0,0 +1,78 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + font-family: Arial, sans-serif; + background-color: #f0f0f0; +} + +#game-container { + display: flex; + flex-direction: column; + align-items: center; +} + +#color-palette { + display: flex; + margin-bottom: 20px; +} + +#color-picker { + width: 40px; + height: 40px; + margin-right: 10px; +} + +.color { + width: 30px; + height: 30px; + margin: 0 5px; + border: 1px solid #000; + cursor: pointer; +} + +.eraser { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0 10px; + background-color: white; + border: 1px solid #000; + font-size: 14px; +} + +#controls { + margin-bottom: 20px; +} + +button { + margin: 0 5px; + padding: 10px; + font-size: 14px; + cursor: pointer; +} + +#grid-container { + display: grid; + grid-template-columns: repeat(10, 30px); + grid-template-rows: repeat(10, 30px); + gap: 2px; +} + +.grid-cell { + width: 30px; + height: 30px; + background-color: white; + border: 1px solid #ddd; + cursor: pointer; +} + +#pattern-code { + margin-top: 20px; + width: 300px; + height: 100px; + resize: none; +}