AI game creator

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

No:27101

115

←

Prev Next

→

Snake
Developer User13389｜Date and time 23/12/4 7:45:26
Build time 44.838 sec｜Game capacity 4.648KB｜

Script

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

To play the game, simply open the HTML file in a web browser (preferably on a smartphone for optimal touch-based operation). The game will start automatically, and you can control the snake's direction using the arrow keys on your keyboard (or by swiping gestures on a smartphone). The objective is to eat as much food as possible without colliding with the walls or the snake's own body. The game uses the HTML canvas element to render the game environment and the snake's movements. It also keeps track of the score and displays it on the screen. The snake's length increases by one segment each time it eats food, and the game ends if the snake collides with the walls or itself. Feel free to modify the code to add additional features or customize the game further. Enjoy playing!

←

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>
    body {
      margin: 0;
      overflow: hidden;
    }
    #gameCanvas {
      background-color: #f0f0f0;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize the snake
      snake.push({ x: width / 2, y: height / 2 });

// Game loop
      setInterval(function() {
        update();
        draw();
      }, 100);

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

// Update snake direction based on key events
        document.addEventListener("keydown", function(event) {
          switch (event.keyCode) {
            case 37:
              if (direction !== "right") direction = "left";
              break;
            case 38:
              if (direction !== "down") direction = "up";
              break;
            case 39:
              if (direction !== "left") direction = "right";
              break;
            case 40:
              if (direction !== "up") direction = "down";
              break;
          }
        });

// Update snake position based on direction
        if (direction === "left") head.x -= 1;
        if (direction === "up") head.y -= 1;
        if (direction === "right") head.x += 1;
        if (direction === "down") head.y += 1;

// Check collision with walls or self
        if (head.x === -1 || head.x === width || head.y === -1 || head.y === height || checkCollision(head, snake)) {
          // Game over
          alert("Game Over! Your score: " + score);
          snake = [];
          direction = "right";
          score = 0;
          snake.push({ x: width / 2, y: height / 2 });
        } else {
          // Move snake forward
          snake.unshift(head);

// Check collision with food
          if (head.x === food.x && head.y === food.y) {
            // Increase score and generate new food
            score += 10;
            food = {
              x: Math.floor(Math.random() * (width - 1)),
              y: Math.floor(Math.random() * (height - 1))
            };
          } else {
            // Remove tail segment
            snake.pop();
          }
        }
      }

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

// Draw snake
        snake.forEach(function(segment) {
          context.fillStyle = "#000";
          context.fillRect(segment.x * blockSize, segment.y * blockSize, blockSize, blockSize);
        });

// Draw food
        context.fillStyle = "#f00";
        context.fillRect(food.x * blockSize, food.y * blockSize, blockSize, blockSize);

// Draw score
        context.fillStyle = "#000";
        context.font = "20px Arial";
        context.fillText("Score: " + score, 10, 20);
      }

// Check collision with snake segments
      function checkCollision(head, array) {
        for (var i = 0; i < array.length; i++) {
          if (head.x === array[i].x && head.y === array[i].y) {
            return true;
          }
        }
        return false;
      }
    })();
  </script>
</body>
</html>
```

The game uses the HTML canvas element to render the game environment and the snake's movements. It also keeps track of the score and displays it on the screen. The snake's length increases by one segment each time it eats food, and the game ends if the snake collides with the walls or itself.

Feel free to modify the code to add additional features or customize the game further. Enjoy playing!