Snake game with Tyson fury's game

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

No:46823

←

Prev Next

→

Snake game with Tyson fury
Developer User20255｜Date and time 24/2/26 6:02:20
Build time 9.854 sec｜Game capacity 2.302KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
  <title>Tyson Fury Snake Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    
    let snake = [{x: 10, y: 10}];
    let direction = 'right';
    let food = {x: 15, y: 15};
    
    function drawSnake() {
      ctx.fillStyle = 'green';
      snake.forEach(segment => ctx.fillRect(segment.x * 20, segment.y * 20, 20, 20));
    }
    
    function drawFood() {
      ctx.fillStyle = 'red';
      ctx.fillRect(food.x * 20, food.y * 20, 20, 20);
    }
    
    function update() {
      const head = {x: snake[0].x, y: snake[0].y};
      
      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);
      
      if (head.x === food.x && head.y === food.y) {
        food.x = Math.floor(Math.random() * 20);
        food.y = Math.floor(Math.random() * 20);
      } else {
        snake.pop();
      }
    }
    
    function checkCollision() {
      const head = snake[0];
      
      if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20 || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) {
        alert('Game Over!');
        clearInterval(gameLoop);
      }
    }
    
    function render() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawSnake();
      drawFood();
    }
    
    function loop() {
      update();
      checkCollision();
      render();
    }
    
    document.addEventListener('keydown', e => {
      switch (e.key) {
        case 'ArrowUp':
          direction = 'up';
          break;
        case 'ArrowDown':
          direction = 'down';
          break;
        case 'ArrowLeft':
          direction = 'left';
          break;
        case 'ArrowRight':
          direction = 'right';
          break;
      }
    });
    
    let gameLoop = setInterval(loop, 100);
  </script>
</body>
</html>