Snake game .snake finds the apple gets score and growes's game

Click here for free DL of the app version that can save data.

No:46217

108

←

Prev Next

→

Snake game .snake finds the apple gets score and g..ALL
Developer User18896｜Date and time 24/2/24 1:29:46
Build time 13.36 sec｜Game capacity 3.299KB｜

Script

This is a simple implementation of the classic snake game using HTML canvas and JavaScript. The player controls the movement of the snake using arrow keys on a smartphone. The goal is to eat the apple to score points and grow longer. If the snake hits the wall or itself, the game is over. Enjoy playing!

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

Click here for free DL of the app version that can save data.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    canvas {
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    const blockSize = 20;
    let snake = [
      { x: 10, y: 10 },
    ];
    let apple = { x: 15, y: 15 };
    let score = 0;
    
    let direction = 'right';
    
    function drawSnake() {
      ctx.fillStyle = 'green';
      snake.forEach(segment => {
        ctx.fillRect(segment.x * blockSize, segment.y * blockSize, blockSize, blockSize);
      });
    }
    
    function drawApple() {
      ctx.fillStyle = 'red';
      ctx.fillRect(apple.x * blockSize, apple.y * blockSize, blockSize, blockSize);
    }
    
    function drawScore() {
      ctx.font = "20px Arial";
      ctx.fillStyle = 'black';
      ctx.fillText(`Score: ${score}`, 10, 30);
    }
    
    function moveSnake() {
      const head = { x: snake[0].x, y: snake[0].y };
    
      if (direction === 'up') head.y--;
      if (direction === 'down') head.y++;
      if (direction === 'left') head.x--;
      if (direction === 'right') head.x++;
    
      snake.unshift(head); // add new head
    
      if (head.x === apple.x && head.y === apple.y) {
        score++;
        generateApple();
      } else {
        snake.pop(); // remove tail
      }
    }
    
    function checkCollision() {
      const head = snake[0];
      // check wall collision
      if (head.x < 0 || head.x >= canvas.width / blockSize || head.y < 0 || head.y >= canvas.height / blockSize) {
        gameOver();
      }
    
      // check self collision
      for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
          gameOver();
        }
      }
    }
    
    function generateApple() {
      apple = {
        x: Math.floor(Math.random() * (canvas.width / blockSize)),
        y: Math.floor(Math.random() * (canvas.height / blockSize))
      }
    }
    
    function gameOver() {
      alert(`Game Over! Your score is ${score}`);
      snake = [
        { x: 10, y: 10 },
      ];
      direction = 'right';
      score = 0;
      generateApple();
    }
    
    function updateGame() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    
      drawSnake();
      drawApple();
      drawScore();
    
      moveSnake();
      checkCollision();
    }
    
    document.addEventListener('keydown', function(event) {
      const key = event.key;
    
      if (key === 'ArrowUp' && direction !== 'down') direction = 'up';
      if (key === 'ArrowDown' && direction !== 'up') direction = 'down';
      if (key === 'ArrowLeft' && direction !== 'right') direction = 'left';
      if (key === 'ArrowRight' && direction !== 'left') direction = 'right';
    });
    
    generateApple();
    setInterval(updateGame, 150);
  </script>
</body>
</html>
```
This is a simple implementation of the classic snake game using HTML canvas and JavaScript. The player controls the movement of the snake using arrow keys on a smartphone. The goal is to eat the apple to score points and grow longer. If the snake hits the wall or itself, the game is over. Enjoy playing!