An infinite game about a block snake that moves and collects other blocks to make it s snake body longer the game continues for 5 years if you get eaten by other snakes that are bigger than you you lose's game

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

No:49481

←

Prev Next

→

An infinite game about a block snake that moves an..ALL
Developer User20860｜Date and time 24/3/5 6:46:44
Build time 11.939 sec｜Game capacity 2.869KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Block Snake Game</title>
<style>
  #gameCanvas {
    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');
  
  let snake = [{x: 10, y: 10}];
  let blockSize = 20;
  let snakeLength = 1;
  let food = {x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize, y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize};
  
  function drawSnake() {
    ctx.fillStyle = 'green';
    snake.forEach(segment => {
      ctx.fillRect(segment.x, segment.y, blockSize, blockSize);
    });
  }
  
  function drawFood() {
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, blockSize, blockSize);
  }
  
  function updateSnake() {
    const head = {x: snake[0].x, y: snake[0].y};
    switch (direction) {
      case 'Up':
        head.y -= blockSize;
        break;
      case 'Down':
        head.y += blockSize;
        break;
      case 'Left':
        head.x -= blockSize;
        break;
      case 'Right':
        head.x += blockSize;
        break;
    }
    
    if (isSnakeCollided(head) || isWallCollided(head)) {
      alert('Game Over! Your final snake length was: ' + snakeLength);
      // Reload the game
      location.reload();
    }
    
    snake.unshift(head);
    
    if (head.x === food.x && head.y === food.y) {
      snakeLength++;
      generateFood();
    } else {
      snake.pop();
    }
  }
  
  function generateFood() {
    food = {x: Math.floor(Math.random() * (canvas.width / blockSize)) * blockSize, y: Math.floor(Math.random() * (canvas.height / blockSize)) * blockSize};
  }
  
  function isSnakeCollided(position) {
    return snake.some(segment => segment.x === position.x && segment.y === position.y);
  }
  
  function isWallCollided(position) {
    return position.x < 0 || position.x >= canvas.width || position.y < 0 || position.y >= canvas.height;
  }
  
  let direction = 'Right';
  document.addEventListener('keydown', function(event) {
    const key = event.key;
    if ((key === 'ArrowUp' || key === 'w') && direction !== 'Down') {
      direction = 'Up';
    } else if ((key === 'ArrowDown' || key === 's') && direction !== 'Up') {
      direction = 'Down';
    } else if ((key === 'ArrowLeft' || key === 'a') && direction !== 'Right') {
      direction = 'Left';
    } else if ((key === 'ArrowRight' || key === 'd') && direction !== 'Left') {
      direction = 'Right';
    }
  });
  
  function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawSnake();
    drawFood();
    updateSnake();
    setTimeout(gameLoop, 100);
  }
  
  gameLoop();
</script>
</body>
</html>