AI game creator

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

No:14385

←

Prev Next

→

Snake Game
Developer User6095｜Date and time 23/9/1 15:03:26
Build time 37.593 sec｜Game capacity 5.042KB｜

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

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

.food {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: red;
}

</style>
</head>
<body>
  <div id="game-board"></div>

// Create the initial snake
      function createSnake() {
        for (var i = 0; i < 4; i++) {
          var dot = document.createElement("div");
          dot.classList.add("snake-dot");
          dot.style.left = (40 - i * 20) + "px";
          dot.style.top = "0px";
          gameBoard.appendChild(dot);
          snakeDots.push(dot);
        }
      }

// Generate random position for food
      function generateFood() {
        var maxX = Math.floor(gameBoard.clientWidth / 20);
        var maxY = Math.floor(gameBoard.clientHeight / 20);
        var x = Math.floor(Math.random() * maxX) * 20;
        var y = Math.floor(Math.random() * maxY) * 20;
        var existingFood = document.querySelector(".food");
        
        if (existingFood) {
          existingFood.style.left = x + "px";
          existingFood.style.top = y + "px";
        } else {
          var newFood = document.createElement("div");
          newFood.classList.add("food");
          newFood.style.left = x + "px";
          newFood.style.top = y + "px";
          gameBoard.appendChild(newFood);
          food = newFood;
        }
      }

// Move the snake
      function moveSnake() {
        var head = snakeDots[0];
        var newX, newY;

switch (direction) {
          case "right":
            newX = parseInt(head.style.left) + 20;
            newY = parseInt(head.style.top);
            break;
          case "left":
            newX = parseInt(head.style.left) - 20;
            newY = parseInt(head.style.top);
            break;
          case "up":
            newX = parseInt(head.style.left);
            newY = parseInt(head.style.top) - 20;
            break;
          case "down":
            newX = parseInt(head.style.left);
            newY = parseInt(head.style.top) + 20;
            break;
        }

// Check for collision with walls
        if (newX < 0 || newX >= gameBoard.clientWidth || newY < 0 || newY >= gameBoard.clientHeight) {
          endGame();
          return;
        }

// Check for collision with food
        if (newX === parseInt(food.style.left) && newY === parseInt(food.style.top)) {
          var tail = document.createElement("div");
          tail.classList.add("snake-dot");
          tail.style.left = newX + "px";
          tail.style.top = newY + "px";
          gameBoard.appendChild(tail);
          snakeDots.unshift(tail);
          generateFood();
        } else {
          var tail = snakeDots.pop();
          tail.style.left = newX + "px";
          tail.style.top = newY + "px";
          snakeDots.unshift(tail);
        }

// Check for collision with self
        for (var i = 1; i < snakeDots.length; i++) {
          if (newX === parseInt(snakeDots[i].style.left) && newY === parseInt(snakeDots[i].style.top)) {
            endGame();
            return;
          }
        }
      }

// Update direction based on key press
      function handleKeyPress(event) {
        switch (event.keyCode) {
          case 37: // Left arrow key
            if (direction !== "right") {
              direction = "left";
            }
            break;
          case 38: // Up arrow key
            if (direction !== "down") {
              direction = "up";
            }
            break;
          case 39: // Right arrow key
            if (direction !== "left") {
              direction = "right";
            }
            break;
          case 40: // Down arrow key
            if (direction !== "up") {
              direction = "down";
            }
            break;
        }
      }

// End the game
      function endGame() {
        clearInterval(intervalId);
        alert("Game Over! Your score is: " + (snakeDots.length - 4));
        resetGame();
      }

// Reset the game
      function resetGame() {
        gameBoard.innerHTML = "";
        snakeDots = [];
        direction = "right";
        createSnake();
        generateFood();
        startGame();
      }

// Start the game
      function startGame() {
        intervalId = setInterval(moveSnake, 200);
      }

// Run the game
      function runGame() {
        createSnake();
        generateFood();
        startGame();

window.addEventListener("keydown", handleKeyPress);
      }

return {
        run: runGame
      };
    })();

snakeGame.run();
  </script>
</body>
</html>