Merge pull request #4658 from aditya-bhaumik/color

[New game]: Color swap
kunjgit · Jun 25, 2024 · a6c9b47 · a6c9b47
2 parents 1681ce3 + 9dd1509
commit a6c9b47
Show file tree

Hide file tree

Showing 6 changed files with 287 additions and 0 deletions.
diff --git a/Games/Color_Swap/README.md b/Games/Color_Swap/README.md
@@ -0,0 +1,48 @@
+# **Game_Name** 
+Color Swap
+
+---
+
+<br>
+
+## **Description 📃**
+"Color Swap" is a simple yet addictive browser-based game developed using HTML, CSS, and JavaScript. The game revolves around the player controlling a character or object that must pass through obstacles matching its color. The color of the character changes randomly, requiring quick reflexes and strategic thinking.
+
+## **Functionalities 🎮**
+
+Simple Controls:
+
+- The player controls the character using the arrow keys or touch gestures on mobile devices.
+0 The character moves left, right, up, or down to navigate through a series of color-coded obstacles.
+
+Color Matching:
+
+- The character changes color periodically or when passing through special zones.
+- Players must guide the character through obstacles that match its current color to score points.
+
+Increasing Difficulty:
+
+- As the game progresses, the speed and frequency of color changes increase.
+- More complex patterns and additional obstacles are introduced to challenge the player.
+
+<br>
+
+## **How to play? 🕹️**
+
+- Start the Game: Click the "Start" button to begin the game.
+
+- Control the Character: Use the arrow keys on your keyboard to move the character around the screen.
+
+- Match Colors: Guide the character to collide with obstacles of the same color to score points.
+
+- Avoid Mismatches: Avoid obstacles of different colors, as colliding with them will end the game.
+
+- Score Points: Each successful color match earns you points. Your score is displayed on the screen.
+
+- Game Over: The game ends if you hit an obstacle of a different color. A popup will display your final score, and the game will restart automatically after a few seconds.
+
+## **Screenshots 📸**
+
+![image](https://github.com/aditya-bhaumik/GameZone/assets/92214013/f4ed96f6-57e9-4d02-86dd-e086c32b6838)
+
+
diff --git a/Games/Color_Swap/index.html b/Games/Color_Swap/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>Color Swap</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div id="gameContainer">
+        <canvas id="gameCanvas" width="400" height="600"></canvas>
+        <div id="score">Score: 0</div>
+        <div id="gameOverMessage">Game Over! You scored <span id="finalScore"></span> points!</div>
+    </div>
+    <button id="startButton" onclick="startGame()">Start</button>
+    <script src="script.js"></script>
+</body>
+</html>
+
+
+
+
diff --git a/Games/Color_Swap/script.js b/Games/Color_Swap/script.js
@@ -0,0 +1,140 @@
+const canvas = document.getElementById('gameCanvas');
+const ctx = canvas.getContext('2d');
+const scoreDisplay = document.getElementById('score');
+const gameOverMessage = document.getElementById('gameOverMessage');
+const finalScore = document.getElementById('finalScore');
+const startButton = document.getElementById('startButton');
+
+const canvasWidth = canvas.width;
+const canvasHeight = canvas.height;
+const characterSize = 20;
+const obstacleWidth = 60;
+const obstacleHeight = 20;
+const colors = ['red', 'blue', 'green', 'yellow'];
+
+let characterX = canvasWidth / 2 - characterSize / 2;
+let characterY = canvasHeight - characterSize - 10;
+let characterColor = colors[Math.floor(Math.random() * colors.length)];
+let obstacles = [];
+let score = 0;
+let gameInterval, obstacleInterval;
+let gameActive = false;
+
+document.addEventListener('keydown', moveCharacter);
+
+function moveCharacter(event) {
+    if (!gameActive) return;
+
+    switch (event.key) {
+        case 'ArrowLeft':
+            characterX -= 20;
+            if (characterX < 0) characterX = 0;
+            break;
+        case 'ArrowRight':
+            characterX += 20;
+            if (characterX > canvasWidth - characterSize) characterX = canvasWidth - characterSize;
+            break;
+        case 'ArrowUp':
+            characterY -= 20;
+            if (characterY < 0) characterY = 0;
+            break;
+        case 'ArrowDown':
+            characterY += 20;
+            if (characterY > canvasHeight - characterSize) characterY = canvasHeight - characterSize;
+            break;
+    }
+}
+
+function createObstacle() {
+    const x = Math.random() * (canvasWidth - obstacleWidth);
+    const y = -obstacleHeight;
+    const color = colors[Math.floor(Math.random() * colors.length)];
+    obstacles.push({ x, y, color });
+}
+
+function updateGame() {
+    if (!gameActive) return;
+
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
+
+    // Draw character
+    ctx.fillStyle = characterColor;
+    ctx.fillRect(characterX, characterY, characterSize, characterSize);
+
+    // Draw and move obstacles
+    for (let i = 0; i < obstacles.length; i++) {
+        const obstacle = obstacles[i];
+        obstacle.y += 2;
+
+        if (obstacle.y > canvasHeight) {
+            obstacles.splice(i, 1);
+            i--;
+            continue;
+        }
+
+        ctx.fillStyle = obstacle.color;
+        ctx.fillRect(obstacle.x, obstacle.y, obstacleWidth, obstacleHeight);
+
+        // Check collision
+        if (
+            characterX < obstacle.x + obstacleWidth &&
+            characterX + characterSize > obstacle.x &&
+            characterY < obstacle.y + obstacleHeight &&
+            characterY + characterSize > obstacle.y
+        ) {
+            if (characterColor === obstacle.color) {
+                score++;
+                scoreDisplay.innerText = `Score: ${score}`;
+                obstacles.splice(i, 1);
+                i--;
+            } else {
+                gameOver();
+                return;
+            }
+        }
+    }
+
+    // Change character color randomly
+    if (Math.random() < 0.01) {
+        characterColor = colors[Math.floor(Math.random() * colors.length)];
+    }
+}
+
+function startGame() {
+    score = 0;
+    characterX = canvasWidth / 2 - characterSize / 2;
+    characterY = canvasHeight - characterSize - 10;
+    characterColor = colors[Math.floor(Math.random() * colors.length)];
+    obstacles = [];
+    scoreDisplay.innerText = `Score: ${score}`;
+    gameActive = true;
+    gameOverMessage.style.display = 'none';
+
+    clearInterval(gameInterval);
+    clearInterval(obstacleInterval);
+
+    gameInterval = setInterval(updateGame, 20);
+    obstacleInterval = setInterval(createObstacle, 1000);
+}
+
+function gameOver() {
+    gameActive = false;
+    clearInterval(gameInterval);
+    clearInterval(obstacleInterval);
+
+    finalScore.innerText = score;
+    gameOverMessage.style.display = 'block';
+
+    setTimeout(() => {
+        gameOverMessage.style.display = 'none';
+        startGame();
+    }, 3000);
+}
+
+startButton.addEventListener('click', () => {
+    startButton.style.display = 'none';
+    startGame();
+});
+
+
+
diff --git a/Games/Color_Swap/styles.css b/Games/Color_Swap/styles.css
@@ -0,0 +1,76 @@
+body {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #000;
+    font-family: 'Arial', sans-serif;
+    color: #0f0;
+}
+
+#gameContainer {
+    position: relative;
+    width: 400px;
+    height: 600px;
+    border: 2px solid #0f0;
+    border-radius: 15px;
+    background-color: #111;
+    box-shadow: 0px 0px 20px #0f0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+#gameCanvas {
+    display: block;
+    border-radius: 15px 15px 0 0;
+    background-color: #222;
+    box-shadow: inset 0px 0px 10px #0f0;
+}
+
+#score {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    font-size: 20px;
+    color: #0f0;
+    text-shadow: 0px 0px 5px #0f0;
+}
+
+#startButton {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: #111;
+    color: #0f0;
+    border: 2px solid #0f0;
+    border-radius: 5px;
+    cursor: pointer;
+    font-size: 16px;
+    box-shadow: 0px 0px 10px #0f0;
+}
+
+#startButton:hover {
+    background-color: #0f0;
+    color: #111;
+    box-shadow: 0px 0px 20px #0f0;
+}
+
+#gameOverMessage {
+    display: none;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    padding: 20px;
+    background-color: #111;
+    color: #0f0;
+    border: 2px solid #0f0;
+    border-radius: 10px;
+    font-size: 20px;
+    text-align: center;
+    box-shadow: 0px 0px 20px #0f0;
+    z-index: 10;
+}
+
diff --git a/README.md b/README.md
@@ -357,6 +357,7 @@ This repository also provides one such platforms where contributers come over an
 | [Drawing_App](https://github.com/kunjgit/GameZone/tree/main/Games/Drawing_app) |
 |[Town-Rise](https://github.com/kunjgit/GameZone/tree/main/Games/Town_Rise_Game)|
 | [IKnowYou-Mind-Reading-Game](https://github.com/kunjgit/GameZone/tree/main/Games/IKnowYou-Mind-Reading-Game) |
+|[Color Swap](https://github.com/kunjgit/GameZone/tree/main/Games/Color_Swap)|
 
   </center>
 

diff --git a/assets/images/Color_Swap.png b/assets/images/Color_Swap.png