ChromeGaming · Durgesh4993 · Jul 20, 2024 · Jul 9, 2024 · Jul 9, 2024 · Jul 12, 2024
diff --git a/README.md b/README.md
@@ -256,6 +256,9 @@ ________________________________________________________________________________
 |  199   | [Ball_Fall_Game](.SinglePlayer%20-%20Games/Ball_Fall_Game) |  
 |  200   | [City_Builder_Game](.SinglePlayer%20-%20Games/City_Builder_Game) |
 |  201   | [Cooking_Challenge Game](.SinglePlayer%20-%20Games/Cooking_Challenge Game) |
+|  202   | [Doodling_Game](.SinglePlayer%20-%20Games/Doodling_Game) |
+|  203   | [Duck_Hunt_Game](.SinglePlayer%20-%20Games/Duck_Hunt_Game) |
+
 
 
 

diff --git a/SinglePlayer - Games/Banner - image/Doodling_Game.png b/SinglePlayer - Games/Banner - image/Doodling_Game.png
diff --git a/SinglePlayer - Games/Banner - image/Duck_Hunt_Game.png b/SinglePlayer - Games/Banner - image/Duck_Hunt_Game.png
diff --git a/SinglePlayer - Games/Doodling_Game/READme.md 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
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Doodling Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="toolbar">
+        <button id="clear">Clear</button>
+        <input type="color" id="colorPicker">
+        <input type="range" id="sizePicker" min="1" max="10" value="5">
+    </div>
+    <canvas id="drawingCanvas"></canvas>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Doodling_Game/script.js 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
@@ -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/SinglePlayer - Games/Duck_Hunt_Game/README.md b/SinglePlayer - Games/Duck_Hunt_Game/README.md
@@ -0,0 +1,41 @@
+# **Duck_Hunting_Game** 
+
+---
+
+<br>
+
+## **Description 📃**
+
+It is a game where various flying ducks will come on screen at the interval of a few seconds. We have to shoot them by a gun pointer which is cursor here by single a click on the duck. On every shoot, our score will be increased by one .If we have hunted a minimum of 10 ducks with total score of 10 then we will win the game.
+- 
+
+## **Functionalities 🎮**
+
+->A button named "Click here to start" on the home screen will start the game.
+-> Flying ducks will come on the screen at the time interval of few seconds.
+-> Cursor will act as gun pointer at ducks.
+-> On single click over the duck will increase your score as the duck is killed.
+-> As soon as your score will be 10, you will win the game and a "Congrats" will appear along with a button named "Restart". 
+-> On clicking on "Restart" button will redirect to home page where you can again play the game by clicking on butoon "Click here to start".
+
+- 
+<br>
+
+## **How to play? 🕹️**
+
+-> After clicking on "Click here to start" button on home page, it will start the game.
+-> Where flying birds will move on screen.
+-> You cusor will act as gun pointer.
+-> You have to aim each duck by the cursor and single click to kill them.
+-> To play the game again-
+    Restart -> Click here to play
+
+<br>
+
+## **Screenshots 📸**
+
+<br>
+
+[image](../../assets/images/Duck_Hunting_Game.png)
+
+<br>
diff --git a/SinglePlayer - Games/Duck_Hunt_Game/design.css b/SinglePlayer - Games/Duck_Hunt_Game/design.css
@@ -0,0 +1,199 @@
+body{
+    margin: 0;
+    padding:0;
+    cursor: crosshair;
+    background-image: url('other_files/bg.jpg');
+    overflow: hidden;
+    content:'';
+    display: block;
+    position:100%;
+    width:100%;
+    height:40000px;
+    z-index: index 0;
+
+
+
+
+}
+
+
+
+
+@keyframes duckfly{
+    0%{
+        left:150%;
+        top:10%;
+    }
+    25%{
+        left:80%;
+        top:50%;
+    }
+
+    50%{
+        left:50%;
+        top:30%;
+    }
+
+
+    75%{
+        left:40%;
+        top:30%;
+    }
+    80%{
+        left:20%;
+        top:50%;
+    }
+
+    100%{
+        left:-50%;
+        top:10%;
+    }
+
+
+
+
+
+
+}
+
+
+input+label{
+    position:absolute;
+    left:-10px;
+    z-index: 2;
+    width: 25px;
+    height: 25px;
+    display:block;
+    z-index:5;
+    transform: translate(-50%,-50%);
+    background-image: url('other_files/duck.jpeg') ;
+    background-repeat: no-repeat;
+    border-radius: 50%;
+
+
+}
+
+input:checked+label{
+    opacity: 0;
+    transition: 0.5s;
+    transform: rotate(120deg);
+    transform-origin: 60%;
+    z-index: 5;
+}
+
+.duck:nth-last-of-type(1)
+{
+    animation:duckfly 10s linear 1s infinite;
+    cursor: crosshair;
+
+}
+.duck:nth-last-of-type(2)
+{
+    animation:duckfly 10s linear 2s infinite;
+    cursor: crosshair;
+}
+.duck:nth-last-of-type(3)
+{
+    animation:duckfly 10s linear 3s infinite;
+    cursor: crosshair;
+}
+.duck:nth-last-of-type(4)
+{
+    animation:duckfly 10s linear 4s infinite;
+    cursor: crosshair;
+}
+.duck:nth-last-of-type(5)
+{
+    animation:duckfly 10s linear 5s infinite;
+    cursor: crosshair;
+}
+.duck:nth-last-of-type(6)
+{
+    animation:duckfly 10s linear 6s infinite;
+    cursor: crosshair;
+
+}
+.duck:nth-last-of-type(7)
+{
+    animation:duckfly 10s linear 7s infinite;
+    cursor: crosshair;
+}
+.duck:nth-last-of-type(8)
+{
+    animation:duckfly 10s linear 8s infinite;
+    cursor: crosshair;
+}
+.duck:nth-last-of-type(9)
+{
+    animation:duckfly 10s linear 9s infinite;
+    cursor: crosshair;
+}
+.duck:nth-last-of-type(10)
+{
+    animation:duckfly 10s linear 10s infinite;
+    cursor: crosshair;
+}
+.score
+{
+    position: absolute;
+    bottom: 5px;
+    height: 50px;
+    line-height: 50px;
+
+    width: 30%;
+    z-index: 2;
+    text-align: center;
+    font-size: 30px;
+    font-weight: bold;
+}
+.score:after{
+    content: counter(score);
+    display: inline-block;
+
+}
+.score:before{
+    content:'Score';
+    display: inline-block;
+    margin-right: 10px;
+}
+
+input:checked{
+    counter-increment: score;
+}
+
+.win{
+    font-family:fantasy;
+
+    text-align: center;
+    color: yellow;
+    padding-top: 10px;
+    font-size:50px;
+    text-shadow: 0 0 5px rgb(121, 59, 101),
+                 0 0 10px rgb(139, 198, 232), 
+                 0 0 20px rgb(139, 198, 232), 
+                 0 0 30px rgb(139, 198, 232), 
+                 0 0 40px rgb(143, 223, 107), 
+                 0 0 55px rgb(143, 223, 107), 
+                 0 0 70px rgb(223, 215, 107)
+}
+
+.start{
+    font-family:serif;
+
+    text-align: center;
+    color: #65d5dd;
+    padding-top: 10px;
+    font-size:60px;
+    text-shadow: 0 0 5px rgb(121, 59, 101),
+                 0 0 10px rgb(139, 198, 232), 
+                 0 0 20px rgb(139, 198, 232), 
+                 0 0 30px rgb(139, 198, 232), 
+                 0 0 40px rgb(143, 223, 107), 
+                 0 0 55px rgb(143, 223, 107), 
+                 0 0 70px rgb(223, 215, 107)
+
+}
+input.boxsize{
+    height: 0px;
+    width: 0px;
+}
diff --git a/SinglePlayer - Games/Duck_Hunt_Game/other_files/bg.jpg b/SinglePlayer - Games/Duck_Hunt_Game/other_files/bg.jpg
diff --git a/SinglePlayer - Games/Duck_Hunt_Game/other_files/duck.jpeg b/SinglePlayer - Games/Duck_Hunt_Game/other_files/duck.jpeg