AI game creator

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

No:41096

113

←

Prev Next

→

Snake Game
Developer User18250｜Date and time 24/2/6 1:49:40
Build time 15.278 sec｜Game capacity 3.495KB｜

Script

Sure! Here's an implementation of the classic Snake game using JavaScript and enclosed in script tags within a single HTML file. You can play the game on a smartphone and it includes pictograms.

To play the game, open the HTML file on a smartphone and use the arrow keys (up, down, left, right) to control the snake. The objective is to eat the red food and avoid hitting the walls or yourself. The game will end and display the score when the snake collides with a wall or itself. Enjoy!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an implementation of the classic Snake game using JavaScript and enclosed in script tags within a single HTML file. You can play the game on a smartphone and it includes pictograms.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    canvas {
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>
  <script>
    // Game variables
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");
    var size = 20;
    var direction;
    var snake = [
      { x: 10, y: 10 },
      { x: 10, y: 11 },
      { x: 10, y: 12 }
    ];
    var food = {
      x: Math.floor(Math.random() * 20),
      y: Math.floor(Math.random() * 20)
    };

// Game controls
    document.addEventListener("keydown", function(event) {
      if (event.keyCode === 37 && direction !== "RIGHT") {
        direction = "LEFT";
      } else if (event.keyCode === 38 && direction !== "DOWN") {
        direction = "UP";
      } else if (event.keyCode === 39 && direction !== "LEFT") {
        direction = "RIGHT";
      } else if (event.keyCode === 40 && direction !== "UP") {
        direction = "DOWN";
      }
    });

// Game loop
    function gameLoop() {
      draw();
      update();
      if (!isGameOver()) {
        setTimeout(gameLoop, 100);
      } else {
        alert("Game Over! Score: " + (snake.length - 3));
        resetGame();
      }
    }

// Draw game elements
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      
      ctx.fillStyle = "#000";
      snake.forEach(function(segment) {
        ctx.fillRect(segment.x * size, segment.y * size, size, size);
      });

ctx.fillStyle = "#f00";
      ctx.fillRect(food.x * size, food.y * size, size, size);
    }

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

if (direction === "LEFT") {
        head.x -= 1;
      } else if (direction === "UP") {
        head.y -= 1;
      } else if (direction === "RIGHT") {
        head.x += 1;
      } else if (direction === "DOWN") {
        head.y += 1;
      }

snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
        food = {
          x: Math.floor(Math.random() * 20),
          y: Math.floor(Math.random() * 20)
        };
      } else {
        snake.pop();
      }
    }

// Check game over condition
    function isGameOver() {
      var head = snake[0];

return (
        head.x < 0 || 
        head.y < 0 || 
        head.x >= canvas.width / size || 
        head.y >= canvas.height / size ||
        snake.slice(1).some(function(segment) {
          return segment.x === head.x && segment.y === head.y;
        })
      );
    }

// Reset game state
    function resetGame() {
      snake = [
        { x: 10, y: 10 },
        { x: 10, y: 11 },
        { x: 10, y: 12 }
      ];
      direction = undefined;
      food = {
        x: Math.floor(Math.random() * 20),
        y: Math.floor(Math.random() * 20)
      };
    }

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