AI game creator

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

No:35162

131

←

Prev Next

→

Snake game
Developer User16442｜Date and time 24/1/13 13:08:30
Build time 13.711 sec｜Game capacity 4.184KB｜

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>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
      // Snake Game
      // Written in JavaScript
      
      // Game settings
      const canvasWidth = 400;  // Width of the game canvas
      const canvasHeight = 400; // Height of the game canvas
      const blockSize = 20;     // Size of each block in the game grid

// Snake object
      const snake = {
        body: [
          { x: 10, y: 10 }, // Starting position
          { x: 9, y: 10 },
          { x: 8, y: 10 }
        ],
        direction: 'right' // Initial direction
      };

// Food object
      const food = {
        x: Math.floor(Math.random() * (canvasWidth / blockSize)),
        y: Math.floor(Math.random() * (canvasHeight / blockSize))
      };

// Game canvas
      const canvas = document.getElementById('gameCanvas');
      const ctx = canvas.getContext('2d');

// Keyboard event listener to control the snake
      document.addEventListener('keydown', changeDirection);

// Draw the Snake
      function drawSnake() {
        ctx.fillStyle = 'green';
        for (let i = 0; i < snake.body.length; i++) {
          ctx.fillRect(
            snake.body[i].x * blockSize,
            snake.body[i].y * blockSize,
            blockSize,
            blockSize
          );
        }
      }

// Draw the Food
      function drawFood() {
        ctx.fillStyle = 'red';
        ctx.fillRect(food.x * blockSize, food.y * blockSize, blockSize, blockSize);
      }

// Update game state and move the snake
      function update() {
        const head = { x: snake.body[0].x, y: snake.body[0].y };

// Update Snake direction based on keyboard input
        if (snake.direction === 'right') head.x++;
        if (snake.direction === 'left') head.x--;
        if (snake.direction === 'up') head.y--;
        if (snake.direction === 'down') head.y++;

// Move Snake
        snake.body.unshift(head);

// Check if Snake has eaten the food
        if (head.x === food.x && head.y === food.y) {
          // Generate new food location
          food.x = Math.floor(Math.random() * (canvasWidth / blockSize));
          food.y = Math.floor(Math.random() * (canvasHeight / blockSize));
        } else {
          // Remove the tail block
          snake.body.pop();
        }
      }

// Check for game over conditions
      function checkGameOver() {
        const head = snake.body[0];

// Check if Snake has hit the walls
        if (
          head.x < 0 ||
          head.x >= canvasWidth / blockSize ||
          head.y < 0 ||
          head.y >= canvasHeight / blockSize
        ) {
          return true;
        }

// Check if Snake has hit itself
        for (let i = 1; i < snake.body.length; i++) {
          if (head.x === snake.body[i].x && head.y === snake.body[i].y) {
            return true;
          }
        }

return false;
      }

// Clear game canvas
      function clearCanvas() {
        ctx.clearRect(0, 0, canvasWidth, canvasHeight);
      }

// Game loop
      function gameLoop() {
        if (checkGameOver()) {
          alert('Game Over');
          return;
        }

clearCanvas();
        drawSnake();
        drawFood();
        update();

setTimeout(gameLoop, 200); // Game speed (200 milliseconds)
      }

// Function to change the Snake direction
      function changeDirection(event) {
        const keyPressed = event.keyCode;

// Arrow up
        if (keyPressed === 38 && snake.direction !== 'down') {
          snake.direction = 'up';
        }

// Arrow down
        if (keyPressed === 40 && snake.direction !== 'up') {
          snake.direction = 'down';
        }

// Arrow left
        if (keyPressed === 37 && snake.direction !== 'right') {
          snake.direction = 'left';
        }

// Arrow right
        if (keyPressed === 39 && snake.direction !== 'left') {
          snake.direction = 'right';
        }
      }

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