diff --git a/Games/String_game/index.html b/Games/String_game/index.html new file mode 100644 index 0000000000..055548d93b --- /dev/null +++ b/Games/String_game/index.html @@ -0,0 +1,22 @@ + + + + + + + String Game + + +
+ +

Increase the String Length

+

+ NOTE: Use 'up' key , 'down' key , 'left' key , 'right' key +

+ +

+ +
+ + + diff --git a/Games/String_game/script.js b/Games/String_game/script.js new file mode 100644 index 0000000000..945b9e35ea --- /dev/null +++ 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 new file mode 100644 index 0000000000..407b2245a2 --- /dev/null +++ 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; +}