diff --git a/README.md b/README.md index 74fcdda2..a1d3352b 100644 --- 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) | diff --git a/SinglePlayer - Games/Banner - image/Shape_Clicker_Game.png b/SinglePlayer - Games/Banner - image/Shape_Clicker_Game.png new file mode 100644 index 00000000..283bda6d Binary files /dev/null and b/SinglePlayer - Games/Banner - image/Shape_Clicker_Game.png differ diff --git a/SinglePlayer - Games/Elemental switch/index.html b/SinglePlayer - Games/Elemental switch/index.html new file mode 100644 index 00000000..65b8f394 --- /dev/null +++ b/SinglePlayer - Games/Elemental switch/index.html @@ -0,0 +1,22 @@ + + + + + + Elemental Switch + + + +
+

Elemental Switch

+ +
+ + + +
+

Use arrow keys to move. Switch between elements to overcome obstacles!

+
+ + + diff --git a/SinglePlayer - Games/Elemental switch/script.js b/SinglePlayer - Games/Elemental switch/script.js new file mode 100644 index 00000000..9a994806 --- /dev/null +++ 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 new file mode 100644 index 00000000..d0dffd77 --- /dev/null +++ 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 new file mode 100644 index 00000000..696bfc56 --- /dev/null +++ b/SinglePlayer - Games/Light-Weaver/index.html @@ -0,0 +1,17 @@ + + + + + + Light Weaver + + + +
+

Light Weaver

+ +

Use arrow keys to move the light beam. Reflect off mirrors to navigate through the maze!

+
+ + + diff --git a/SinglePlayer - Games/Light-Weaver/script.js b/SinglePlayer - Games/Light-Weaver/script.js new file mode 100644 index 00000000..8f2343c8 --- /dev/null +++ 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 new file mode 100644 index 00000000..6c383c04 --- /dev/null +++ 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 new file mode 100644 index 00000000..0ae3531d --- /dev/null +++ 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! \ No newline at end of file diff --git a/SinglePlayer - Games/Shape_Clicker_Game/index.html b/SinglePlayer - Games/Shape_Clicker_Game/index.html new file mode 100644 index 00000000..50e1ac09 --- /dev/null +++ b/SinglePlayer - Games/Shape_Clicker_Game/index.html @@ -0,0 +1,17 @@ + + + + + + Shape Clicker Game + + + +

Shape Clicker Game

+
+ +
+

Score: 0

+ + + diff --git a/SinglePlayer - Games/Shape_Clicker_Game/script.js b/SinglePlayer - Games/Shape_Clicker_Game/script.js new file mode 100644 index 00000000..1a86f959 --- /dev/null +++ b/SinglePlayer - Games/Shape_Clicker_Game/script.js @@ -0,0 +1,59 @@ +let score = 0; +let gameInterval; + +document.getElementById('start-button').addEventListener('click', startGame); + +function startGame() { + score = 0; + document.getElementById('score').textContent = 'Score: ' + score; + document.getElementById('start-button').disabled = true; + + gameInterval = setInterval(createShape, 1000); + + setTimeout(endGame, 30000); +} + +function createShape() { + const gameContainer = document.getElementById('game-container'); + const shape = document.createElement('div'); + const size = Math.random() * 50 + 20; + const x = Math.random() * (gameContainer.offsetWidth - size); + const y = Math.random() * (gameContainer.offsetHeight - size); + const shapeType = Math.random() > 0.5 ? 'circle' : 'square'; + + shape.classList.add('shape', shapeType); + shape.style.width = `${size}px`; + shape.style.height = `${size}px`; + shape.style.left = `${x}px`; + shape.style.top = `${y}px`; + shape.style.backgroundColor = getRandomColor(); + + shape.addEventListener('click', () => { + score++; + document.getElementById('score').textContent = 'Score: ' + score; + shape.remove(); + }); + + gameContainer.appendChild(shape); + + setTimeout(() => { + if (shape.parentElement) { + shape.remove(); + } + }, 2000); +} + +function endGame() { + clearInterval(gameInterval); + document.getElementById('start-button').disabled = false; + alert('Game over! Your score is ' + score); +} + +function getRandomColor() { + const letters = '0123456789ABCDEF'; + let color = '#'; + for (let i = 0; i < 6; i++) { + color += letters[Math.floor(Math.random() * 16)]; + } + return color; +} diff --git a/SinglePlayer - Games/Shape_Clicker_Game/styles.css b/SinglePlayer - Games/Shape_Clicker_Game/styles.css new file mode 100644 index 00000000..5195a252 --- /dev/null +++ b/SinglePlayer - Games/Shape_Clicker_Game/styles.css @@ -0,0 +1,38 @@ +body { + font-family: Arial, sans-serif; + text-align: center; + background-color: #f0f0f0; + margin: 0; + padding: 20px; +} + +h1 { + font-size: 2em; + margin-bottom: 20px; +} + +#game-container { + position: relative; + width: 80vw; + height: 60vh; + margin: 0 auto; + border: 2px solid #333; + background-color: #fff; + overflow: hidden; +} + +.shape { + position: absolute; + cursor: pointer; +} + +#score { + font-size: 1.5em; + margin-top: 20px; +} + +#start-button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; +} diff --git a/additionalpage/game.html b/additionalpage/game.html index 2f018deb..cced7366 100644 --- a/additionalpage/game.html +++ b/additionalpage/game.html @@ -7721,6 +7721,60 @@

Duck_Hunt_Game

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

Shape_Clicker_Game

+

Shape_Clicker_Game

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

Release Date:  

+

20.06.2023

+
+
+

Updated:  

+

Action | Desktop

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