AI game creator

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

No:37160

←

Prev Next

→

snake game
Developer User17003｜Date and time 24/1/20 14:02:11
Build time 15.962 sec｜Game capacity 4.847KB｜

Script

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

To play the game, you can copy and paste the above code into a new HTML file, save it with a `.html` extension, and open it in a web browser. The game will start automatically, and you can control the snake's direction using the arrow keys on your smartphone's virtual keyboard. The objective is to eat the food and avoid hitting the walls or the snake's own body. If the snake collides, the game will reset. 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 Snake game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Snake Game</title>
    <style>
      #game-board {
        width: 400px;
        height: 400px;
        border: 1px solid #000;
        background-color: #f0f0f0;
      }
      .snake-body {
        width: 16px;
        height: 16px;
        background-color: #000;
        position: absolute;
      }
      #food {
        width: 16px;
        height: 16px;
        background-color: #f00;
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div id="game-board"></div>

// Snake and food variables
        let snake = [{ x: 200, y: 200 }];
        let food = { x: 0, y: 0 };

// Direction variables
        let dx = 0;
        let dy = 0;

// Game speed
        const speed = 100;

// Game canvas
        const canvas = document.getElementById("game-board");
        const context = canvas.getContext("2d");

// Function to handle keyboard events
        document.addEventListener("keydown", changeDirection);

function changeDirection(event) {
          const key = event.keyCode;
          // Arrow keys
          const arrowLeft = 37;
          const arrowUp = 38;
          const arrowRight = 39;
          const arrowDown = 40;

if (key === arrowLeft && dx !== 16) {
            dx = -16;
            dy = 0;
          } else if (key === arrowUp && dy !== 16) {
            dx = 0;
            dy = -16;
          } else if (key === arrowRight && dx !== -16) {
            dx = 16;
            dy = 0;
          } else if (key === arrowDown && dy !== -16) {
            dx = 0;
            dy = 16;
          }
        }

// Function to generate random coordinates for food
        function generateFood() {
          food.x = Math.floor(Math.random() * (gameWidth / 16)) * 16;
          food.y = Math.floor(Math.random() * (gameHeight / 16)) * 16;

// Ensure the food doesn't overlap with the snake
          for (let i = 0; i < snake.length; i++) {
            if (snake[i].x === food.x && snake[i].y === food.y) {
              generateFood();
              break;
            }
          }
        }

// Function to update and draw the game state
        function drawGame() {
          // Clear the canvas
          context.clearRect(0, 0, gameWidth, gameHeight);

// Move the snake
          const head = { x: snake[0].x + dx, y: snake[0].y + dy };
          snake.unshift(head);
          snake.pop();

// Check if the snake eats the food
          if (snake[0].x === food.x && snake[0].y === food.y) {
            // Increase snake length
            snake.push({ x: food.x, y: food.y });
            // Generate new food
            generateFood();
          }

// Check if the snake hits the walls or itself
          if (
            snake[0].x < 0 ||
            snake[0].y < 0 ||
            snake[0].x >= gameWidth ||
            snake[0].y >= gameHeight ||
            checkCollision()
          ) {
            // Game over condition
            alert("Game Over!");
            // Reset snake position and direction
            snake = [{ x: 200, y: 200 }];
            dx = 0;
            dy = 0;
          }

// Draw the snake
          for (let i = 0; i < snake.length; i++) {
            context.fillStyle = "#000";
            context.fillRect(snake[i].x, snake[i].y, 16, 16);
          }

// Draw the food
          context.fillStyle = "#f00";
          context.fillRect(food.x, food.y, 16, 16);
        }

// Function to check if the snake hits itself
        function checkCollision() {
          const head = snake[0];

for (let i = 1; i < snake.length; i++) {
            if (snake[i].x === head.x && snake[i].y === head.y) {
              return true;
            }
          }

return false;
        }

// Start the game loop
        function gameLoop() {
          drawGame();
          setTimeout(gameLoop, speed);
        }

// Generate initial food
        generateFood();

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