Merge branch 'main' into main

ChromeGaming · Aug 2, 2024 · 6ae1fa6 · 6ae1fa6
2 parents 8fc5ae7 + 203cfc8
commit 6ae1fa6
Show file tree

Hide file tree

Showing 13 changed files with 503 additions and 2 deletions.
diff --git a/README.md b/README.md
@@ -261,8 +261,9 @@ ________________________________________________________________________________
 |  203   | [Duck_Hunt_Game](.SinglePlayer%20-%20Games/Duck_Hunt_Game) |
 |  204   | [Breakout_Game](.SinglePlayer%20-%20Games/BreakOut_Game) |
 |  205  | [Breakout_Game](.SinglePlayer%20-%20Games/Maze_Game) |
-|  206  | [Breakout_Game](.SinglePlayer%20-%20Games/Bomber_Game) |
-|  207  | [Arkanoid_Game](.SinglePlayer%20-%20Games/Arkanoid_Game) |
+|  206  | [Bomber_Game](.SinglePlayer%20-%20Games/Bomber_Game) |
+|  207  | [Shape_Clicker_Game](.SinglePlayer%20-%20Games/Shape_Clicker_Game) |
+|  208  | [Arkanoid_Game](.SinglePlayer%20-%20Games/Arkanoid_Game) |
 
 </div>
 

diff --git a/SinglePlayer - Games/Banner - image/Shape_Clicker_Game.png b/SinglePlayer - Games/Banner - image/Shape_Clicker_Game.png
diff --git a/SinglePlayer - Games/Elemental switch/index.html b/SinglePlayer - Games/Elemental switch/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Elemental Switch</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="game">
+        <h1>Elemental Switch</h1>
+        <canvas id="gameCanvas" width="600" height="400"></canvas>
+        <div>
+            <button onclick="switchElement('fire')">Fire</button>
+            <button onclick="switchElement('water')">Water</button>
+            <button onclick="switchElement('earth')">Earth</button>
+        </div>
+        <p>Use arrow keys to move. Switch between elements to overcome obstacles!</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Elemental switch/script.js b/SinglePlayer - Games/Elemental switch/script.js
@@ -0,0 +1,88 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+let character = {
+    x: 50,
+    y: 350,
+    width: 30,
+    height: 30,
+    element: 'fire'
+};
+
+let obstacles = [
+    { x: 200, y: 300, width: 50, height: 50, type: 'fire' },
+    { x: 300, y: 200, width: 50, height: 50, type: 'water' },
+    { x: 400, y: 100, width: 50, height: 50, type: 'earth' }
+];
+
+let goal = { x: 550, y: 350, width: 30, height: 30 };
+
+function switchElement(element) {
+    character.element = element;
+}
+
+document.addEventListener('keydown', (e) => {
+    switch (e.key) {
+        case 'ArrowUp': character.y -= 10; break;
+        case 'ArrowDown': character.y += 10; break;
+        case 'ArrowLeft': character.x -= 10; break;
+        case 'ArrowRight': character.x += 10; break;
+    }
+    checkCollisions();
+    drawGame();
+});
+
+function checkCollisions() {
+    obstacles.forEach(obstacle => {
+        if (character.x < obstacle.x + obstacle.width &&
+            character.x + character.width > obstacle.x &&
+            character.y < obstacle.y + obstacle.height &&
+            character.y + character.height > obstacle.y) {
+            if (character.element !== obstacle.type) {
+                alert('Game Over! You hit an obstacle.');
+                resetGame();
+            }
+        }
+    });
+
+    if (character.x < goal.x + goal.width &&
+        character.x + character.width > goal.x &&
+        character.y < goal.y + goal.height &&
+        character.y + character.height > goal.y) {
+        alert('You Win! You reached the goal.');
+        resetGame();
+    }
+}
+
+function resetGame() {
+    character.x = 50;
+    character.y = 350;
+    character.element = 'fire';
+    drawGame();
+}
+
+function drawGame() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    ctx.fillStyle = getColor(character.element);
+    ctx.fillRect(character.x, character.y, character.width, character.height);
+
+    obstacles.forEach(obstacle => {
+        ctx.fillStyle = getColor(obstacle.type);
+        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
+    });
+
+    ctx.fillStyle = 'gold';
+    ctx.fillRect(goal.x, goal.y, goal.width, goal.height);
+}
+
+function getColor(element) {
+    switch (element) {
+        case 'fire': return 'red';
+        case 'water': return 'blue';
+        case 'earth': return 'green';
+        default: return 'black';
+    }
+}
+
+drawGame();
diff --git a/SinglePlayer - Games/Elemental switch/styles.css b/SinglePlayer - Games/Elemental switch/styles.css
@@ -0,0 +1,32 @@
+body {
+    text-align: center;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+}
+
+#game {
+    margin: 20px auto;
+    width: 600px;
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+canvas {
+    border: 1px solid #000;
+    margin-top: 10px;
+}
+
+button {
+    margin: 10px;
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+button:active {
+    transform: scale(0.95);
+}
diff --git a/SinglePlayer - Games/Light-Weaver/index.html b/SinglePlayer - Games/Light-Weaver/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Light Weaver</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="game">
+        <h1>Light Weaver</h1>
+        <canvas id="gameCanvas" width="600" height="400"></canvas>
+        <p>Use arrow keys to move the light beam. Reflect off mirrors to navigate through the maze!</p>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/SinglePlayer - Games/Light-Weaver/script.js b/SinglePlayer - Games/Light-Weaver/script.js
@@ -0,0 +1,102 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+
+let lightBeam = {
+    x: 50,
+    y: 200,
+    dx: 2,
+    dy: 0,
+    width: 10,
+    height: 10
+};
+
+let mirrors = [
+    { x: 200, y: 150, width: 10, height: 100, angle: 45 },
+    { x: 400, y: 100, width: 10, height: 100, angle: -45 }
+];
+
+let goal = { x: 550, y: 200, width: 30, height: 30 };
+
+function drawGame() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw light beam
+    ctx.fillStyle = 'yellow';
+    ctx.fillRect(lightBeam.x, lightBeam.y, lightBeam.width, lightBeam.height);
+
+    // Draw mirrors
+    mirrors.forEach(mirror => {
+        ctx.save();
+        ctx.translate(mirror.x + mirror.width / 2, mirror.y + mirror.height / 2);
+        ctx.rotate((mirror.angle * Math.PI) / 180);
+        ctx.fillStyle = 'silver';
+        ctx.fillRect(-mirror.width / 2, -mirror.height / 2, mirror.width, mirror.height);
+        ctx.restore();
+    });
+
+    // Draw goal
+    ctx.fillStyle = 'gold';
+    ctx.fillRect(goal.x, goal.y, goal.width, goal.height);
+}
+
+function updateGame() {
+    lightBeam.x += lightBeam.dx;
+    lightBeam.y += lightBeam.dy;
+
+    checkCollisions();
+    drawGame();
+
+    requestAnimationFrame(updateGame);
+}
+
+function checkCollisions() {
+    mirrors.forEach(mirror => {
+        if (lightBeam.x < mirror.x + mirror.width &&
+            lightBeam.x + lightBeam.width > mirror.x &&
+            lightBeam.y < mirror.y + mirror.height &&
+            lightBeam.y + lightBeam.height > mirror.y) {
+            // Reflect the light beam
+            if (mirror.angle === 45) {
+                lightBeam.dx = -lightBeam.dy;
+                lightBeam.dy = -lightBeam.dx;
+            } else if (mirror.angle === -45) {
+                lightBeam.dx = lightBeam.dy;
+                lightBeam.dy = lightBeam.dx;
+            }
+        }
+    });
+
+    if (lightBeam.x < goal.x + goal.width &&
+        lightBeam.x + lightBeam.width > goal.x &&
+        lightBeam.y < goal.y + goal.height &&
+        lightBeam.y + lightBeam.height > goal.y) {
+        alert('You Win! You reached the goal.');
+        resetGame();
+    }
+
+    if (lightBeam.x < 0 || lightBeam.x > canvas.width ||
+        lightBeam.y < 0 || lightBeam.y > canvas.height) {
+        alert('Game Over! You went out of bounds.');
+        resetGame();
+    }
+}
+
+function resetGame() {
+    lightBeam.x = 50;
+    lightBeam.y = 200;
+    lightBeam.dx = 2;
+    lightBeam.dy = 0;
+    drawGame();
+}
+
+document.addEventListener('keydown', (e) => {
+    switch (e.key) {
+        case 'ArrowUp': lightBeam.dy = -2; lightBeam.dx = 0; break;
+        case 'ArrowDown': lightBeam.dy = 2; lightBeam.dx = 0; break;
+        case 'ArrowLeft': lightBeam.dx = -2; lightBeam.dy = 0; break;
+        case 'ArrowRight': lightBeam.dx = 2; lightBeam.dy = 0; break;
+    }
+});
+
+drawGame();
+updateGame();
diff --git a/SinglePlayer - Games/Light-Weaver/styles.css b/SinglePlayer - Games/Light-Weaver/styles.css
@@ -0,0 +1,19 @@
+body {
+    text-align: center;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+}
+
+#game {
+    margin: 20px auto;
+    width: 600px;
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0,0,0,0.1);
+}
+
+canvas {
+    border: 1px solid #000;
+    margin-top: 10px;
+}
diff --git a/SinglePlayer - Games/Shape_Clicker_Game/README.md b/SinglePlayer - Games/Shape_Clicker_Game/README.md
@@ -0,0 +1,52 @@
+# Shape Clicker Game
+
+## Overview
+
+The Shape Clicker Game is a simple and fun web-based game where players click on randomly appearing shapes to score points. The game runs for a fixed duration, and the player's objective is to click on as many shapes as possible within the time limit.
+
+## Features
+
+- Start the game by clicking the "Start Game" button.
+- Randomly appearing shapes (circles or squares) within the game container.
+- Each click on a shape increases the player's score.
+- The game lasts for 30 seconds.
+- The player's score is displayed and updated in real-time.
+- At the end of the game, an alert displays the player's final score.
+
+## Technologies Used
+
+- HTML for structuring the webpage.
+- CSS for styling the game elements.
+- JavaScript for game logic and interactivity.
+
+## How to Play
+
+1. Open the game in a web browser.
+2. Click the "Start Game" button to begin.
+3. Click on the shapes that appear in the game container as quickly as possible to increase your score.
+4. The game will automatically end after 30 seconds, and your final score will be displayed.
+
+## Setup Instructions
+
+1. Clone the repository to your local machine.
+2. Open the `index.html` file in a web browser to start the game.
+
+## File Structure
+
+- `index.html`: The main HTML file that contains the structure of the game.
+- `styles.css`: The CSS file for styling the game elements.
+- `script.js`: The JavaScript file containing the game logic.
+
+## Customization
+
+You can customize the game by modifying the following:
+
+- The duration of the game by changing the `setTimeout` value in the `endGame` function.
+- The interval at which shapes appear by adjusting the `setInterval` value in the `startGame` function.
+- The size, color, and types of shapes by modifying the `createShape` and `getRandomColor` functions.
+
+## License
+
+This project is open-source and available under the MIT License. Feel free to fork, modify, and use it in your own projects.
+
+Enjoy playing the Shape Clicker Game!
diff --git a/SinglePlayer - Games/Shape_Clicker_Game/index.html b/SinglePlayer - Games/Shape_Clicker_Game/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shape Clicker Game</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <h1>Shape Clicker Game</h1>
+    <div id="game-container">
+        <button id="start-button">Start Game</button>
+    </div>
+    <p id="score">Score: 0</p>
+    <script src="script.js"></script>
+</body>
+</html>