AI game creator

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

No:37686

←

Prev Next

→

snKe you go slow
Developer User17003｜Date and time 24/1/21 9:11:40
Build time 13.744 sec｜Game capacity 3.777KB｜

Script

Sure! Here's a simple version of the Snake game implemented as a single HTML file using JavaScript and enclosed within script tags. The game can be played on a smartphone and uses pictograms for the snake and food elements.

You can replace 'emozi_all/snake.png' and 'emozi_chicken.png' with the actual URLs of the pictograms you want to use for the snake and food elements. To play the game, simply open the HTML file on a smartphone or any web browser that supports JavaScript and interact with the game using the arrow keys. Have fun!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #game-board {
      width: 300px;
      height: 300px;
      position: relative;
      border: 1px solid black;
    }
    .snake, .food {
      width: 20px;
      height: 20px;
      position: absolute;
    }
    .snake {
      background-image: url('https://example.com/snake.png');
    }
    .food {
      background-image: url('https://example.com/food.png');
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Function to draw the snake and food on the canvas
    function draw() {
      context.clearRect(0, 0, canvas.width, canvas.height);
      snake.forEach(function (segment) {
        context.fillStyle = "green";
        context.fillRect(segment.x, segment.y, 20, 20);
      });

context.fillStyle = "red";
      context.fillRect(food.x, food.y, 20, 20);
    }

// Function to update the snake's position and check for collisions
    function update() {
      var head = { x: snake[0].x + dx, y: snake[0].y + dy };
      snake.unshift(head);
      
      var hasEatenFood = snake[0].x === food.x && snake[0].y === food.y;
      
      if (!hasEatenFood) {
        snake.pop();
      } else {
        // Generate new random position for food
        food.x = Math.floor(Math.random() * (canvas.width / 20)) * 20;
        food.y = Math.floor(Math.random() * (canvas.height / 20)) * 20;
      }
      
      // Check for collision with the walls or the snake's body
      if (
        snake[0].x < 0 ||
        snake[0].y < 0 ||
        snake[0].x >= canvas.width ||
        snake[0].y >= canvas.height ||
        hasCollidedWithBody()
      ) {
        alert("Game over!");
        reset();
        return;
      }
      
      draw();
    }

// Function to check if the snake has collided with its own body
    function hasCollidedWithBody() {
      for (var i = 1; i < snake.length; i++) {
        if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
          return true;
        }
      }
      return false;
    }
    
    // Function to reset the game
    function reset() {
      snake = [{ x: 100, y: 100 }];
      dx = 0;
      dy = 0;
    }

// Function to handle keyboard input
    function handleKeydown(event) {
      if (event.key === "ArrowUp" && dy !== 20) {
        dx = 0;
        dy = -20;
      } else if (event.key === "ArrowDown" && dy !== -20) {
        dx = 0;
        dy = 20;
      } else if (event.key === "ArrowLeft" && dx !== 20) {
        dx = -20;
        dy = 0;
      } else if (event.key === "ArrowRight" && dx !== -20) {
        dx = 20;
        dy = 0;
      }
    }

// Add event listener for keyboard input
    document.addEventListener("keydown", handleKeydown);

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

You can replace 'https://example.com/snake.png' and 'https://example.com/food.png' with the actual URLs of the pictograms you want to use for the snake and food elements.

To play the game, simply open the HTML file on a smartphone or any web browser that supports JavaScript and interact with the game using the arrow keys. Have fun!