AI game creator

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

No:32048

131

←

Prev Next

→

Snake Game
Developer User15316｜Date and time 23/12/29 12:42:45
Build time 39.527 sec｜Game capacity 4.646KB｜

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 #000;
      position: relative;
      overflow: hidden;
    }
    .snake-dot {
      width: 20px;
      height: 20px;
      background-color: #000;
      position: absolute;
    }
    .food {
      width: 20px;
      height: 20px;
      background-color: #f00;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

let snake = [{ x: 10, y: 10 }]; // initial position of the snake
      let food = { x: 0, y: 0 }; // initial position of the food
      let xDirection = 1; // snake's movement direction (1: right, -1: left, 0: no movement)
      let yDirection = 0; // snake's movement direction (1: down, -1: up, 0: no movement)
      let score = 0; // player's score
      let gameInterval; // interval ID for the game loop

const gameBoard = document.getElementById('game-board');
      
      function startGame() {
        // Create initial snake
        for (let i = 1; i < initialSnakeLength; i++) {
          snake.push({ x: snake[0].x - i, y: snake[0].y });
        }

// Generate food at random position
        generateFood();

// Start the game loop
        gameInterval = setInterval(moveSnake, gameSpeed);
      }

function moveSnake() {
        // Remove tail of the snake
        const tail = snake.pop();

// Calculate new head position based on direction
        const newHead = {
          x: snake[0].x + xDirection,
          y: snake[0].y + yDirection
        };

// Check if the snake has collided with the game boundaries or itself
        if (
          newHead.x < 0 ||
          newHead.x >= boardSize ||
          newHead.y < 0 ||
          newHead.y >= boardSize ||
          isSnakeCollision(newHead)
        ) {
          // Stop the game loop
          clearInterval(gameInterval);
          alert('Game Over! Your Score: ' + score);
          return;
        }

// Add new head to the snake
        snake.unshift(newHead);

// Check if snake has eaten the food
        if (newHead.x === food.x && newHead.y === food.y) {
          // Increase score
          score++;
          // Generate new food
          generateFood();
        } else {
          // Place the tail back
          snake.push(tail);
        }

// Update the game board
        renderGame();
      }

function isSnakeCollision(position) {
        return snake.some(dot => dot.x === position.x && dot.y === position.y);
      }

function generateFood() {
        // Generate random position for the food
        food.x = Math.floor(Math.random() * boardSize);
        food.y = Math.floor(Math.random() * boardSize);

// Check if the food is generated on the snake, if so, regenerate
        if (isSnakeCollision(food)) {
          generateFood();
        }
      }

function renderGame() {
        // Clear the game board
        gameBoard.innerHTML = '';

// Render the snake
        snake.forEach(dot => {
          const snakeDot = document.createElement('div');
          snakeDot.classList.add('snake-dot');
          snakeDot.style.top = dot.y * boardSize + 'px';
          snakeDot.style.left = dot.x * boardSize + 'px';
          gameBoard.appendChild(snakeDot);
        });

// Render the food
        const foodElement = document.createElement('div');
        foodElement.classList.add('food');
        foodElement.style.top = food.y * boardSize + 'px';
        foodElement.style.left = food.x * boardSize + 'px';
        gameBoard.appendChild(foodElement);
      }

document.addEventListener('keydown', function(event) {
        // Update the snake's movement direction based on key presses (arrow keys)
        switch (event.key) {
          case 'ArrowUp':
            xDirection = 0;
            yDirection = -1;
            break;
          case 'ArrowDown':
            xDirection = 0;
            yDirection = 1;
            break;
          case 'ArrowLeft':
            xDirection = -1;
            yDirection = 0;
            break;
          case 'ArrowRight':
            xDirection = 1;
            yDirection = 0;
            break;
        }
      });

startGame(); // Start the game
    });
  </script>
</body>
</html>