AI game creator

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

No:38100

←

Prev Next

→

Snake Game
Developer User17215｜Date and time 24/1/22 12:52:38
Build time 10.845 sec｜Game capacity 3.012KB｜

Script

Sure! Here's a simple implementation of the classic Snake Game using JavaScript in a single HTML file:

To play the game: - Open a web browser on your smartphone. - Copy and paste the above code into a new HTML file. - Save the file with a .html extension (e.g., snake_game.html). - Open the HTML file in the web browser. - You can control the snake's movement using the arrow keys. The game will display a canvas where you control a snake using the arrow keys. The goal is to eat the randomly placed food, which will increase the length of the snake. The game ends if the snake touches the boundaries of the canvas or collides with its own body. You can modify the code to add pictograms or improve the visual design.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of the classic Snake Game using JavaScript in a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
<title>Snake Game</title>
<style>
    canvas {
      border: 1px solid #000;
      display: block;
      margin: 0 auto;
    }
</style>
</head>
<body>
  <canvas id="game" width="400" height="400"></canvas>
  <script>
    // Snake Game logic
    const canvas = document.getElementById("game");
    const context = canvas.getContext("2d");

const cellSize = 20;
    const columns = canvas.width / cellSize;
    const rows = canvas.height / cellSize;

let snake = [{ x: 10, y: 10 }];
    let xSpeed = 0;
    let ySpeed = 0;
    let food = getRandomFood();

function getRandomFood() {
      return {
        x: Math.floor(Math.random() * columns),
        y: Math.floor(Math.random() * rows)
      };
    }

function update() {
      const head = { x: snake[0].x + xSpeed, y: snake[0].y + ySpeed };
      snake.unshift(head);

if (head.x === food.x && head.y === food.y) {
        food = getRandomFood();
      } else {
        snake.pop();
      }
    }

function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);

context.fillStyle = "#FF0000"; // Snake color
      snake.forEach(function(segment) {
        context.fillRect(
          segment.x * cellSize,
          segment.y * cellSize,
          cellSize,
          cellSize
        );
      });

context.fillStyle = "#00FF00"; // Food color
      context.fillRect(
        food.x * cellSize,
        food.y * cellSize,
        cellSize,
        cellSize
      );
    }

function loop() {
      update();
      draw();
    }

// Attach key press event listener
    document.addEventListener("keydown", handleKeyPress);

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

The game will display a canvas where you control a snake using the arrow keys. The goal is to eat the randomly placed food, which will increase the length of the snake. The game ends if the snake touches the boundaries of the canvas or collides with its own body.

You can modify the code to add pictograms or improve the visual design.