AI game creator

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

No:16678

←

Prev Next

→

Snake Game
Developer User7424｜Date and time 23/9/20 3:14:28
Build time 40.589 sec｜Game capacity 3.775KB｜

Script

ElevenPlay

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

ElevenPlay

<!DOCTYPE html>
<html>
<head>
   <title>ElevenPlay - Snake Game</title>
   <style>
      canvas {
         border: 2px solid black;
         display: block;
         margin: 20px auto;
      }
   </style>
</head>
<body>
   <canvas id="gameCanvas" width="400" height="400"></canvas>
   <script>
      // Pictograms for snake and apple
      const snake = '🐍';
      const apple = '🍎';

// Game configuration
      const canvas = document.getElementById("gameCanvas");
      const context = canvas.getContext("2d");
      const box = 20;
      const canvasSize = Math.floor(canvas.width / box);
      const snakeColor = "blue";
      const appleColor = "red";
      const snakeSpeed = 150; // milliseconds

// Snake initial position and movement direction
      let snakeX = Math.floor(canvasSize / 2) * box;
      let snakeY = Math.floor(canvasSize / 2) * box;
      let snakeDX = 0;
      let snakeDY = 0;

// Apple initial position
      let appleX = Math.floor(Math.random() * canvasSize) * box;
      let appleY = Math.floor(Math.random() * canvasSize) * box;

// Tail length and segments
      let tailLength = 0;
      const tail = [];

// Handle arrow key presses
      document.addEventListener("keydown", direction);

function drawGame() {
         // Move the snake
         snakeX += snakeDX;
         snakeY += snakeDY;

// Check for collision with walls or tail
         if (snakeX < 0 || snakeY < 0 || snakeX >= canvas.width || snakeY >= canvas.height || checkCollision()) {
            clearInterval(game);
            alert("Game Over! Press OK to restart.");
            location.reload(); // Reload the page to start a new game
         }

// Clear the canvas
         context.clearRect(0, 0, canvas.width, canvas.height);

// Draw the snake
         context.fillStyle = snakeColor;
         context.font = "32px Arial";
         context.fillText(snake, snakeX, snakeY);

// Draw the apple
         context.fillStyle = appleColor;
         context.font = "32px Arial";
         context.fillText(apple, appleX, appleY);

// Add the current position to the tail array
         tail.unshift({ x: snakeX, y: snakeY });

// Remove the last segment of the tail if it exceeds the tail length
         if (tail.length > tailLength) {
            tail.pop();
         }

// Check for collision with the apple
         if (snakeX === appleX && snakeY === appleY) {
            // Increase the tail length
            tailLength++;

// Generate a new random position for the apple
            appleX = Math.floor(Math.random() * canvasSize) * box;
            appleY = Math.floor(Math.random() * canvasSize) * box;
         }

// Draw the tail segments
         for (let i = 0; i < tail.length; i++) {
            context.fillText(snake, tail[i].x, tail[i].y);
         }
      }

// Start the game loop
      const game = setInterval(drawGame, snakeSpeed);
   </script>
</body>
</html>