Add files via upload

aditya-bhaumik · Jun 21, 2024 · b1cbc19 · b1cbc19
1 parent db52b7b
commit b1cbc19
Show file tree

Hide file tree

Showing 3 changed files with 238 additions and 0 deletions.
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;
+}
+