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

No:35553

←

Prev Next

→

Snake Game
Developer User16580｜Date and time 24/1/14 20:00:17
Build time 17.594 sec｜Game capacity 4.548KB｜

Script

Snake Game

←

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-area {
        width: 400px;
        height: 400px;
        border: 1px solid black;
        position: relative;
      }
    </style>
  </head>
  <body>
    <h1>Snake Game</h1>
    <div id="game-area"></div>
  
    <script>
      // Snake Game
      
      // Game Variables
      const gridSize = 20;
      const gameArea = document.getElementById('game-area');
      const gameWidth = gameArea.offsetWidth;
      const gameHeight = gameArea.offsetHeight;
      const columns = Math.floor(gameWidth / gridSize);
      const rows = Math.floor(gameHeight / gridSize);
      let snake = [];
      let food = null;
      let direction = 'right';
      let gameOver = false;
      let score = 0;
      
      // Start Game
      function init() {
        createSnake();
        createFood();
        addEventListener('keydown', changeDirection);
        setInterval(gameLoop, 100);
      }
      
      // Create Snake
      function createSnake() {
        const startX = Math.floor(columns / 2);
        const startY = Math.floor(rows / 2);
      
        for (let i = 0; i < 3; i++) {
          snake.push({ x: startX - i, y: startY });
        }
      }
      
      // Create Food
      function createFood() {
        const foodX = Math.floor(Math.random() * columns);
        const foodY = Math.floor(Math.random() * rows);
        food = { x: foodX, y: foodY };
      }
      
      // Game Loop
      function gameLoop() {
        if (!gameOver) {
          update();
          render();
        }
      }
      
      // Update game logic
      function update() {
        const head = getNewHead();
      
        // Check collision with wall
        if (head.x < 0 || head.x >= columns || head.y < 0 || head.y >= rows) {
          gameOver = true;
          return;
        }
      
        // Check collision with self
        if (snake.some(segment => segment.x === head.x && segment.y === head.y)) {
          gameOver = true;
          return;
        }
      
        snake.unshift(head);
      
        // Check collision with food
        if (head.x === food.x && head.y === food.y) {
          score++;
          createFood();
        } else {
          snake.pop();
        }
      }
      
      // Render game
      function render() {
        gameArea.innerHTML = '';
    
        // Render snake
        snake.forEach(segment => {
          const snakeElement = document.createElement('div');
          snakeElement.style.width = gridSize + 'px';
          snakeElement.style.height = gridSize + 'px';
          snakeElement.style.backgroundColor = 'black';
          snakeElement.style.position = 'absolute';
          snakeElement.style.left = segment.x * gridSize + 'px';
          snakeElement.style.top = segment.y * gridSize + 'px';
          gameArea.appendChild(snakeElement);
        });
      
        // Render food
        const foodElement = document.createElement('div');
        foodElement.style.width = gridSize + 'px';
        foodElement.style.height = gridSize + 'px';
        foodElement.style.backgroundColor = 'red';
        foodElement.style.position = 'absolute';
        foodElement.style.left = food.x * gridSize + 'px';
        foodElement.style.top = food.y * gridSize + 'px';
        gameArea.appendChild(foodElement);
      
        // Render score
        const scoreElement = document.createElement('div');
        scoreElement.textContent = 'Score: ' + score;
        gameArea.appendChild(scoreElement);
      }
      
      // Get new head position based on direction
      function getNewHead() {
        const head = { ...snake[0] };
      
        if (direction === 'up') {
          head.y--;
        } else if (direction === 'down') {
          head.y++;
        } else if (direction === 'left') {
          head.x--;
        } else if (direction === 'right') {
          head.x++;
        }
      
        return head;
      }
      
      // Change snake direction based on key press
      function changeDirection(event) {
        const key = event.keyCode;
      
        if (key === 37 && direction !== 'right') {
          direction = 'left';
        } else if (key === 38 && direction !== 'down') {
          direction = 'up';
        } else if (key === 39 && direction !== 'left') {
          direction = 'right';
        } else if (key === 40 && direction !== 'up') {
          direction = 'down';
        }
      }
      
      // Start the game
      init();
    </script>
  </body>
</html>