AI game creator

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

No:41113

←

Prev Next

→

Snake Game
Developer User17254｜Date and time 24/2/6 4:41:07
Build time 15.634 sec｜Game capacity 3.885KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using JavaScript, enclosed in script tags within a single HTML file. The game is playable on a smartphone and uses pictograms to represent the snake and food.

To play the game, simply copy the above code and save it as an HTML file. Open the file in a web browser on your smartphone or desktop. Use the arrow keys to control the snake and try to eat as much food as possible without colliding with the walls or yourself. Enjoy!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      overflow: hidden;
    }
    
    canvas {
      border: 1px solid white;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  
  <script>
    // Getting the canvas element
    const canvas = document.getElementById("gameCanvas");
    const context = canvas.getContext("2d");

// Size of each grid cell
    const gridSize = 20;
    
    // Initial snake position and direction
    let snake = [{ x: 6, y: 6 }];
    let direction = { x: 1, y: 0 };

// Initial food position
    let food = { x: 10, y: 10 };

// Score
    let score = 0;

// Game loop
    function gameLoop() {
      update();
      draw();
    }

// Update game state
    function update() {
      const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y };

// Check collision with walls
      if (head.x < 0 || head.x >= canvas.width / gridSize || head.y < 0 || head.y >= canvas.height / gridSize) {
        gameOver();
        return;
      }

// Check collision with self
      if (snake.find(segment => segment.x === head.x && segment.y === head.y)) {
        gameOver();
        return;
      }

// Check collision with food
      if (head.x === food.x && head.y === food.y) {
        score++;
        snake.unshift(head);
        generateFood();
      } else {
        snake.pop();
        snake.unshift(head);
      }
    }

// Draw game state
    function draw() {
      // Clear canvas
      context.clearRect(0, 0, canvas.width, canvas.height);

// Draw snake
      snake.forEach(segment => {
        drawSegment(segment.x, segment.y, '🐍');
      });

// Draw food
      drawSegment(food.x, food.y, '🍎');

// Draw score
      context.fillStyle = 'white';
      context.font = '20px Arial';
      context.fillText(`Score: ${score}`, 10, 30);
    }

// Draw a single segment of the snake or food
    function drawSegment(x, y, symbol) {
      context.fillStyle = 'white';
      context.font = '20px Arial';
      context.fillText(symbol, x * gridSize, y * gridSize);
    }

// Generate new food at a random position
    function generateFood() {
      food.x = Math.floor(Math.random() * (canvas.width / gridSize));
      food.y = Math.floor(Math.random() * (canvas.height / gridSize));
    }

// Handle game over
    function gameOver() {
      clearInterval(gameInterval);
      alert(`Game Over! Your Score: ${score}`);
      location.reload();
    }

// Handle user input
    document.addEventListener("keydown", function(event) {
      switch(event.keyCode) {
        case 37: // Left
          if (direction.x !== 1)
            direction = { x: -1, y: 0 };
          break;
        case 38: // Up
          if (direction.y !== 1)
            direction = { x: 0, y: -1 };
          break;
        case 39: // Right
          if (direction.x !== -1)
            direction = { x: 1, y: 0 };
          break;
        case 40: // Down
          if (direction.y !== -1)
            direction = { x: 0, y: 1 };
          break;
      }
    });

// Start the game loop
    const gameInterval = setInterval(gameLoop, 100);
  </script>
</body>
</html>
```