AI game creator

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

No:15719

←

Prev Next

→

Snake
Developer User6840｜Date and time 23/9/10 23:22:55
Build time 32.347 sec｜Game capacity 4.428KB｜

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: 300px;
        height: 300px;
        border: 1px solid #000;
        position: relative;
        margin: 0 auto;
      }

.snake-block {
        width: 20px;
        height: 20px;
        background-color: #000;
        position: absolute;
      }

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

let score = 0;

// Function to draw the game board
        function drawGameBoard() {
          gameBoard.innerHTML = "";
          snake.forEach((block) => {
            const snakeBlock = document.createElement("div");
            snakeBlock.style.left = `${block.x * gridSize}px`;
            snakeBlock.style.top = `${block.y * gridSize}px`;
            snakeBlock.classList.add("snake-block");
            gameBoard.appendChild(snakeBlock);
          });

const foodBlock = document.createElement("div");
          foodBlock.style.left = `${food.x * gridSize}px`;
          foodBlock.style.top = `${food.y * gridSize}px`;
          foodBlock.setAttribute("id", "food");
          gameBoard.appendChild(foodBlock);
        }

// Function to move the snake
        function moveSnake() {
          const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };
          snake.unshift(head);

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

// Function to change snake's direction
        function changeDirection(event) {
          const keyPressed = event.keyCode;

// Arrow Up
          if (keyPressed === 38 && direction.y !== 1) {
            direction.x = 0;
            direction.y = -1;
          }
          // Arrow Down
          else if (keyPressed === 40 && direction.y !== -1) {
            direction.x = 0;
            direction.y = 1;
          }
          // Arrow Left
          else if (keyPressed === 37 && direction.x !== 1) {
            direction.x = -1;
            direction.y = 0;
          }
          // Arrow Right
          else if (keyPressed === 39 && direction.x !== -1) {
            direction.x = 1;
            direction.y = 0;
          }
        }

// Function to generate food
        function generateFood() {
          food = {
            x: Math.floor(Math.random() * (boardSize / gridSize)),
            y: Math.floor(Math.random() * (boardSize / gridSize)),
          };

for (let block of snake) {
            if (food.x === block.x && food.y === block.y) {
              generateFood();
              break;
            }
          }
        }

// Function to check collision
        function checkCollision() {
          const head = snake[0];

// Check collision with walls
          if (head.x * gridSize >= boardSize || head.x < 0 || head.y * gridSize >= boardSize || head.y < 0) {
            clearInterval(gameInterval);
            alert("Game Over! Final Score: " + score);
            location.reload();
          }

// Check collision with itself
          for (let i = 1; i < snake.length; i++) {
            if (snake[i].x === head.x && snake[i].y === head.y) {
              clearInterval(gameInterval);
              alert("Game Over! Final Score: " + score);
              location.reload();
            }
          }
        }

// Function to start the game
        function startGame() {
          generateFood();
          gameInterval = setInterval(() => {
            drawGameBoard();
            moveSnake();
            checkCollision();
          }, 100);
        }

// Event listener for keyboard input
        document.addEventListener("keydown", changeDirection);
        
        // Start the game
        startGame();
      });
    </script>
  </body>
</html>