AI game creator

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

No:27660

←

Prev Next

→

Snake game
Developer User13727｜Date and time 23/12/8 2:12:49
Build time 42.72 sec｜Game capacity 3.791KB｜

Script

Sure! Here's an example of a simple Snake game implemented as a single HTML file using JavaScript:

To play the game, save the code above in a file with `.html` extension (e.g., `snake.html`) and open it in a web browser. The game canvas will appear, and you can control the snake's movement using the arrow keys on your smartphone. The objective of the game is to eat the red food (represented by a red square) to grow the snake's length. If the snake hits the wall or collides with itself, the game ends and a Game Over message with the score is displayed. Note: This implementation doesn't contain any pictograms, but you can add suitable images or icons to represent the snake and food if desired.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an example of a simple Snake game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    canvas {
      border: 1px solid black;
      background-color: lightgrey;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initial execution
    window.onload = function() {
      canvas = document.getElementById("gameCanvas");
      context = canvas.getContext("2d");

document.addEventListener("keydown", handleKeyPress);

snake = {
        x: 10,
        y: 10,
        dx: 0,
        dy: 0,
        cells: [],
        maxCells: 4
      };

food = {
        x: Math.floor(Math.random() * tileCount),
        y: Math.floor(Math.random() * tileCount)
      };

setInterval(gameLoop, 1000 / 10); // 10 frames per second
    };

function gameLoop() {
      moveSnake();
      drawGame();
    }

function moveSnake() {
      snake.x += snake.dx;
      snake.y += snake.dy;

if (snake.x < 0 || snake.x >= tileCount || snake.y < 0 || snake.y >= tileCount) {
        gameOver(); // out of bounds
      }

snake.cells.unshift({ x: snake.x, y: snake.y });

if (snake.cells.length > snake.maxCells) {
        snake.cells.pop();
      }

for (var i = 1; i < snake.cells.length; i++) {
        if (snake.cells[i].x === snake.x && snake.cells[i].y === snake.y) {
          gameOver(); // self-collision
        }
      }

if (snake.x === food.x && snake.y === food.y) {
        snake.maxCells++;
        score++;
        food.x = Math.floor(Math.random() * tileCount);
        food.y = Math.floor(Math.random() * tileCount);
      }
    }

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

context.fillStyle = "green";
      snake.cells.forEach(function(cell) {
        drawCell(cell.x, cell.y);
      });

context.fillStyle = "red";
      drawCell(food.x, food.y);

context.fillStyle = "black";
      context.font = "20px Arial";
      context.fillText("Score: " + score, 10, 30);
    }

function drawCell(x, y) {
      context.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
    }

function gameOver() {
      alert("Game Over! Your score was: " + score);
      snake = {
        x: 10,
        y: 10,
        dx: 0,
        dy: 0,
        cells: [],
        maxCells: 4
      };
      score = 0;
    }
  </script>
</body>
</html>
```

Note: This implementation doesn't contain any pictograms, but you can add suitable images or icons to represent the snake and food if desired.