AI game creator

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

No:45619

←

Prev Next

→

Snake Game
Developer User19635｜Date and time 24/2/20 22:54:18
Build time 9.646 sec｜Game capacity 1.883KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

<!DOCTYPE html>
<html>
<head>
<title>Snake Game</title>
<style>
  canvas {
    background-color: black;
    display: block;
    margin: 0 auto;
  }
</style>
</head>
<body>
  <canvas id="gameCanvas"></canvas>
  <script>
    // Variables
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const unit = 20;
    const snake = [{x: 10, y: 10}];
    let dx = 0;
    let dy = 0;
    let apple = {x: 8, y: 8};

// Functions
    function drawSnake() {
      ctx.fillStyle = 'green';
      snake.forEach(segment => {
        ctx.fillRect(segment.x * unit, segment.y * unit, unit, unit);
      });
    }

function drawApple() {
      ctx.fillStyle = 'red';
      ctx.fillRect(apple.x * unit, apple.y * unit, unit, unit);
    }

function update() {
      const head = {x: snake[0].x + dx, y: snake[0].y + dy};
      snake.unshift(head);

if (head.x === apple.x && head.y === apple.y) {
        apple.x = Math.floor(Math.random() * canvas.width / unit);
        apple.y = Math.floor(Math.random() * canvas.height / unit);
      } else {
        snake.pop();
      }
    }

function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawSnake();
      drawApple();
    }

function loop() {
      update();
      draw();
      setTimeout(() => {
        requestAnimationFrame(loop);
      }, 1000 / 5);
    }

// Event listeners
    document.addEventListener('keydown', e => {
      switch(e.key) {
        case 'ArrowUp':
          dx = 0;
          dy = -1;
          break;
        case 'ArrowDown':
          dx = 0;
          dy = 1;
          break;
        case 'ArrowLeft':
          dx = -1;
          dy = 0;
          break;
        case 'ArrowRight':
          dx = 1;
          dy = 0;
          break;
      }
    });

// Start game loop
    loop();
  </script>
</body>
</html>