A protoyype of snake's game

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

No:15600

109

←

Prev Next

→

A protoyype of snake
Developer User5586｜Date and time 23/9/10 3:26:18
Build time 31.087 sec｜Game capacity 3.554KB｜

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>
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
      position: relative;
    }

.snake-body {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: green;
    }

#fruit {
      width: 20px;
      height: 20px;
      position: absolute;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

var gameBoard = document.getElementById('game-board');
    var context = gameBoard.getContext('2d');
    var snake = [];
    var direction = 'right';
    var fruit = { x: 0, y: 0 };
    var score = 0;

function createSnake() {
      for (var i = INITIAL_SNAKE_LENGTH - 1; i >= 0; i--) {
        snake.push({ x: i, y: 0 });
      }
    }

function drawSnake() {
      for (var i = 0; i < snake.length; i++) {
        var snakeBody = document.createElement('div');
        snakeBody.className = 'snake-body';
        snakeBody.style.left = snake[i].x * SIZE + 'px';
        snakeBody.style.top = snake[i].y * SIZE + 'px';
        gameBoard.appendChild(snakeBody);
      }
    }

function createFruit() {
      fruit.x = Math.floor(Math.random() * (WIDTH / SIZE));
      fruit.y = Math.floor(Math.random() * (HEIGHT / SIZE));
    }

function drawFruit() {
      var fruitElement = document.createElement('div');
      fruitElement.id = 'fruit';
      fruitElement.style.left = fruit.x * SIZE + 'px';
      fruitElement.style.top = fruit.y * SIZE + 'px';
      gameBoard.appendChild(fruitElement);
    }

function clearBoard() {
      while (gameBoard.firstChild) {
        gameBoard.firstChild.remove();
      }
    }

function update() {
      var head = { x: snake[0].x, y: snake[0].y };

if (direction === 'right') head.x++;
      else if (direction === 'left') head.x--;
      else if (direction === 'up') head.y--;
      else if (direction === 'down') head.y++;

snake.unshift(head);

if (head.x === fruit.x && head.y === fruit.y) {
        score++;
        createFruit();
      } else {
        snake.pop();
      }

if (
        head.x < 0 ||
        head.x === WIDTH / SIZE ||
        head.y < 0 ||
        head.y === HEIGHT / SIZE ||
        checkCollision(head)
      ) {
        clearInterval(interval);
        alert('Game Over! Your score: ' + score);
        startGame();
        return;
      }

clearBoard();
      drawFruit();
      drawSnake();
    }

function handleKeydown(event) {
      if (event.key === 'ArrowUp' && direction !== 'down') direction = 'up';
      else if (event.key === 'ArrowDown' && direction !== 'up') direction = 'down';
      else if (event.key === 'ArrowLeft' && direction !== 'right') direction = 'left';
      else if (event.key === 'ArrowRight' && direction !== 'left') direction = 'right';
    }

function startGame() {
      snake = [];
      direction = 'right';
      score = 0;
      createSnake();
      createFruit();
      drawFruit();

document.addEventListener('keydown', handleKeydown);
      interval = setInterval(update, UPDATE_INTERVAL);
    }

startGame();
  </script>
</body>
</html>