Add files via upload

kunjgit · Sep 30, 2023 · fee9a02 · fee9a02
1 parent 64466c2
commit fee9a02
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 0 deletions.
diff --git a/Games/String_game/index.html b/Games/String_game/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" />
+    <link rel="stylesheet" href="style.css" />
+    <title>String Game</title>
+  </head>
+  <body>
+    <div id="game-container">
+      <canvas id="game-canvas" width="400" height="400"></canvas>
+      <h1>Increase the String Length</h1>
+      <h1>
+        <span>NOTE:</span> Use 'up' key , 'down' key , 'left' key , 'right' key
+      </h1>
+
+      <h1 class="size"></h1>
+      <button id="start-button">Start Game</button>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Games/String_game/script.js b/Games/String_game/script.js
@@ -0,0 +1,122 @@
+const canvas = document.getElementById('game-canvas');
+const ctx = canvas.getContext('2d');
+const startButton = document.getElementById('start-button');
+
+const gridSize = 20;
+const gridSizeX = canvas.width / gridSize;
+const gridSizeY = canvas.height / gridSize;
+
+let snake = [{ x: 5, y: 5 }];
+let food = { x: 10, y: 10 };
+let direction = 'right';
+let gameInterval;
+let score = 0;
+
+function draw() {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    // Draw food
+    ctx.fillStyle = 'red';
+    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
+
+    // Draw snake
+    ctx.fillStyle = 'green';
+    for (let i = 0; i < snake.length; i++) {
+        ctx.fillRect(snake[i].x * gridSize, snake[i].y * gridSize, gridSize, gridSize);
+    }
+}
+
+function update() {
+    const head = { ...snake[0] };
+
+    // Update snake position based on direction
+    switch (direction) {
+        case 'up':
+            head.y--;
+            break;
+        case 'down':
+            head.y++;
+            break;
+        case 'left':
+            head.x--;
+            break;
+        case 'right':
+            head.x++;
+            break;
+    }
+
+    snake.unshift(head);
+
+    // Check for collision with food
+    if (head.x === food.x && head.y === food.y) {
+        score++;
+        generateFood();
+    } else {
+        snake.pop();
+    }
+
+    // Check for game over conditions
+    if (head.x < 0 || head.x >= gridSizeX || head.y < 0 || head.y >= gridSizeY || checkCollision(head)) {
+
+        gameOver();
+        return;
+    }
+
+    draw();
+}
+
+function generateFood() {
+    food = {
+        x: Math.floor(Math.random() * gridSizeX),
+        y: Math.floor(Math.random() * gridSizeY)
+    };
+}
+
+function checkCollision(head) {
+    for (let i = 1; i < snake.length; i++) {
+        if (head.x === snake[i].x && head.y === snake[i].y) {
+            return true;
+        }
+    }
+    return false;
+}
+
+function startGame() {
+
+    snake = [{ x: 5, y: 5 }];
+    direction = 'right';
+    score = 0;
+    generateFood();
+
+    if (gameInterval) {
+        clearInterval(gameInterval);
+    }
+
+    gameInterval = setInterval(update, 100);
+}
+
+function gameOver() {
+
+    clearInterval(gameInterval);
+    alert('Game over! Your score: ' + score);
+
+}
+
+document.addEventListener('keydown', (event) => {
+    switch (event.key) {
+        case 'ArrowUp':
+            if (direction !== 'down') direction = 'up';
+            break;
+        case 'ArrowDown':
+            if (direction !== 'up') direction = 'down';
+            break;
+        case 'ArrowLeft':
+            if (direction !== 'right') direction = 'left';
+            break;
+        case 'ArrowRight':
+            if (direction !== 'left') direction = 'right';
+            break;
+    }
+});
+
+startButton.addEventListener('click', startGame);
diff --git a/Games/String_game/style.css b/Games/String_game/style.css
@@ -0,0 +1,36 @@
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #f0f0f0;
+}
+
+#game-container {
+  text-align: center;
+}
+
+#game-canvas {
+  border: 4px solid #76fc78;
+  border-radius: 4px;
+}
+
+#start-button {
+  padding: 10px 20px;
+  font-size: 18px;
+  background-color: #3498db;
+  color: white;
+  border: none;
+  cursor: pointer;
+}
+h1 {
+  background-color: #3498db;
+  padding: 10px 20px;
+  border-radius: 4px;
+  color: white;
+  font-size: 1em;
+  font-family: Georgia;
+}