diff --git a/README.md b/README.md index 830af386..d3346c6a 100644 --- a/README.md +++ b/README.md @@ -245,6 +245,7 @@ ________________________________________________________________________________ | 198 | [Ball_Fall_Game](.SinglePlayer%20-%20Games/Ball_Fall_Game) | | 199 | [City_Builder_Game](.SinglePlayer%20-%20Games/City_Builder_Game) | | 202 | [Cooking_Challenge Game](.SinglePlayer%20-%20Games/Cooking_Challenge Game) | +| 203 | [Doodling_Game](.SinglePlayer%20-%20Games/Doodling_Game) | diff --git a/SinglePlayer - Games/Banner - image/Doodling_Game.png b/SinglePlayer - Games/Banner - image/Doodling_Game.png new file mode 100644 index 00000000..1acaa8c7 Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Doodling_Game.png differ diff --git a/SinglePlayer - Games/Doodling_Game/READme.md b/SinglePlayer - Games/Doodling_Game/READme.md new file mode 100644 index 00000000..d673fc02 --- /dev/null +++ b/SinglePlayer - Games/Doodling_Game/READme.md @@ -0,0 +1,26 @@ +# Doodling Game + +A simple doodling game where users can draw on a canvas, change colors, and adjust the brush size. This game supports both mouse and touch inputs, making it suitable for both desktop and mobile devices. + +## Features + +- Draw on the canvas using mouse or touch inputs. +- Change the color of the brush using a color picker. +- Adjust the brush size using a range slider. +- Clear the canvas with a single click. + +## Demo + +![Doodling Game Demo](demo.gif) + +## How to Run + +1. Clone the repository or download the files. +2. Open the `index.html` file in your preferred web browser. + +## Files + +- `index.html`: The main HTML file containing the structure of the doodling game. +- `styles.css`: The CSS file for styling the doodling game. +- `script.js`: The JavaScript file containing the logic for the doodling game. + diff --git a/SinglePlayer - Games/Doodling_Game/index.html b/SinglePlayer - Games/Doodling_Game/index.html new file mode 100644 index 00000000..3bfadb3f --- /dev/null +++ b/SinglePlayer - Games/Doodling_Game/index.html @@ -0,0 +1,18 @@ + + + + + + Doodling Game + + + +
+ + + +
+ + + + diff --git a/SinglePlayer - Games/Doodling_Game/script.js b/SinglePlayer - Games/Doodling_Game/script.js new file mode 100644 index 00000000..5a422679 --- /dev/null +++ b/SinglePlayer - Games/Doodling_Game/script.js @@ -0,0 +1,72 @@ +const canvas = document.getElementById('drawingCanvas'); +const ctx = canvas.getContext('2d'); + +canvas.width = window.innerWidth * 0.8; +canvas.height = window.innerHeight * 0.8; + +let painting = false; +let color = '#000'; +let lineWidth = 5; + +function startPosition(e) { + painting = true; + draw(e); +} + +function endPosition() { + painting = false; + ctx.beginPath(); +} + +function draw(e) { + if (!painting) return; + + ctx.lineWidth = lineWidth; + ctx.lineCap = 'round'; + ctx.strokeStyle = color; + + ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); + ctx.stroke(); + ctx.beginPath(); + ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); +} + +canvas.addEventListener('mousedown', startPosition); +canvas.addEventListener('mouseup', endPosition); +canvas.addEventListener('mousemove', draw); + +// Touch support for mobile devices +canvas.addEventListener('touchstart', (e) => { + const touch = e.touches[0]; + const mouseEvent = new MouseEvent('mousedown', { + clientX: touch.clientX, + clientY: touch.clientY + }); + canvas.dispatchEvent(mouseEvent); +}); + +canvas.addEventListener('touchend', () => { + const mouseEvent = new MouseEvent('mouseup', {}); + canvas.dispatchEvent(mouseEvent); +}); + +canvas.addEventListener('touchmove', (e) => { + const touch = e.touches[0]; + const mouseEvent = new MouseEvent('mousemove', { + clientX: touch.clientX, + clientY: touch.clientY + }); + canvas.dispatchEvent(mouseEvent); +}); + +document.getElementById('clear').addEventListener('click', () => { + ctx.clearRect(0, 0, canvas.width, canvas.height); +}); + +document.getElementById('colorPicker').addEventListener('change', (e) => { + color = e.target.value; +}); + +document.getElementById('sizePicker').addEventListener('change', (e) => { + lineWidth = e.target.value; +}); diff --git a/SinglePlayer - Games/Doodling_Game/styles.css b/SinglePlayer - Games/Doodling_Game/styles.css new file mode 100644 index 00000000..4fc5a638 --- /dev/null +++ b/SinglePlayer - Games/Doodling_Game/styles.css @@ -0,0 +1,16 @@ +body { + margin: 0; + display: flex; + flex-direction: column; + align-items: center; + background-color: #f0f0f0; +} + +.toolbar { + margin: 20px; +} + +#drawingCanvas { + border: 1px solid #000; + background-color: #fff; +} diff --git a/additionalpage/game.html b/additionalpage/game.html index 9fe70306..75709773 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -7344,6 +7344,59 @@

Cooking_Challenge Game

+ +
+
+ + +
+ 45 + +
+
+
+ + +
+
+

Doodling_Game

+

Doodling_Game

+
+
+ + + + + +
+
+
+
+
+

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

+
+
+
+ Play Now +
+
+
+
+ +