From 5ec189c1f8cd8a742e110d474f16914f5b526862 Mon Sep 17 00:00:00 2001 From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com> Date: Mon, 24 Jun 2024 19:22:13 +0530 Subject: [PATCH 1/4] Added Pattern Creation Game --- Games/Pattern_Creation_Game/Readme.md | 25 ++++++ Games/Pattern_Creation_Game/index.html | 35 ++++++++ Games/Pattern_Creation_Game/script.js | 110 +++++++++++++++++++++++++ Games/Pattern_Creation_Game/styles.css | 78 ++++++++++++++++++ 4 files changed, 248 insertions(+) create mode 100644 Games/Pattern_Creation_Game/Readme.md create mode 100644 Games/Pattern_Creation_Game/index.html create mode 100644 Games/Pattern_Creation_Game/script.js create mode 100644 Games/Pattern_Creation_Game/styles.css diff --git a/Games/Pattern_Creation_Game/Readme.md b/Games/Pattern_Creation_Game/Readme.md new file mode 100644 index 0000000000..ebddeccbc4 --- /dev/null +++ b/Games/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/Games/Pattern_Creation_Game/index.html b/Games/Pattern_Creation_Game/index.html new file mode 100644 index 0000000000..394fec1a90 --- /dev/null +++ b/Games/Pattern_Creation_Game/index.html @@ -0,0 +1,35 @@ + + + + + + Pattern Creation Game + + + +
+
+ +
Eraser
+
+
+ + + + + + + + +
+
+ +
+ + + + diff --git a/Games/Pattern_Creation_Game/script.js b/Games/Pattern_Creation_Game/script.js new file mode 100644 index 0000000000..ec585da0e0 --- /dev/null +++ b/Games/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/Games/Pattern_Creation_Game/styles.css b/Games/Pattern_Creation_Game/styles.css new file mode 100644 index 0000000000..262ffb9e4a --- /dev/null +++ b/Games/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; +} From 52d41c2f4181dd5c9a85eb93d5c8273e9f56c007 Mon Sep 17 00:00:00 2001 From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com> Date: Mon, 24 Jun 2024 19:23:52 +0530 Subject: [PATCH 2/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0e652d5c3d..f89322067e 100644 --- a/README.md +++ b/README.md @@ -825,7 +825,7 @@ This repository also provides one such platforms where contributers come over an |[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)| |[Tic-tac-toe](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Tic-tac-toe)| |[Quest_For_Riches](https://github.com/kunjgit/GameZone/tree/main/Games/Quest_For_Riches)| - +|[Pattern Creation Game](https://github.com/ananyag309/GameZone_ggsoc/tree/main/Games/Pattern_Creation_Game)| | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) | From 7026ee19becb0164a35ba5abea3cf8ece26d0fa1 Mon Sep 17 00:00:00 2001 From: Ananya Gupta <145869907+ananyag309@users.noreply.github.com> Date: Mon, 24 Jun 2024 22:40:16 +0530 Subject: [PATCH 3/4] Add files via upload --- assets/images/Pattern_Creation_Game.PNG | Bin 0 -> 14464 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 assets/images/Pattern_Creation_Game.PNG diff --git a/assets/images/Pattern_Creation_Game.PNG b/assets/images/Pattern_Creation_Game.PNG new file mode 100644 index 0000000000000000000000000000000000000000..64faeeb96311752ab10d7ef771e445f3970a9741 GIT binary patch literal 14464 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

t02_%$C==iJL56OSH`c2L2RIhIX4wtZYO zm&!Pn*0pqdw72i27V5C`>CAl6H|Jjdm>OpX9qvS zKbqpde3klS?1J6n+PNUMr_`&+YcAJ5y7kqO!LbY9`_GOsq}%7q@i~y@n-+g;?J!n2 zTnU&9V&|NKKtbQkH;m?cSpScmzWIjHd`t5mH=5r!jQ(?Xa2JKZOv#-(XydyQ>w*P^2@fGWC*S-+HMYwYo zC0kXheNy-N&$=?vfMv`0*hG-Qoh%H8`Rrp8nJcF{x0XZ1aYudm+hP3RvO(R+rp%L? zp0L1bF>c-aO$J8<4aPr~7_(-*aDaT~*!Z0X<&U1;yc;LYQ`A+ZJaBjA{Os0BFTAf{ zCt5d|XbyZS`DAk-ChT;I{(`A!FjNUY9ldm;*SaDYo}L%w zRN7zj-OXA92hP(kByHNlYWCn%p7pNK8|xX_MC7v$a$n zDsF;$yEtGV!w@lZH)E7s@tIkhL;kMp>bi0w{Z4lIjN!|(TVc6hmak$TjjZ_EmHbdr z?xj&-Xy$1~)};i#!oSY>PGVIn{TBu0JEA)gkDxlS4f`8ViQEC$oH24;ph>WM169#U z4Uo6=zbHbvyTY>+B=6?TD5dJOVQL^$47_a$-{%<|yJaqrz zATtl$KL>Qrk8E9TGZpb;v&~ffKiLy%?*l Date: Sun, 7 Jul 2024 20:42:51 +0530 Subject: [PATCH 4/4] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f89322067e..6af86e89aa 100644 --- a/README.md +++ b/README.md @@ -825,7 +825,7 @@ This repository also provides one such platforms where contributers come over an |[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)| |[Tic-tac-toe](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Tic-tac-toe)| |[Quest_For_Riches](https://github.com/kunjgit/GameZone/tree/main/Games/Quest_For_Riches)| -|[Pattern Creation Game](https://github.com/ananyag309/GameZone_ggsoc/tree/main/Games/Pattern_Creation_Game)| +|[Pattern Creation Game](https://github.com/kunjgit/GameZone/tree/main/Games/Pattern_Creation_Game)| | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) |