AI game creator

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

No:37777

←

Prev Next

→

Snake Game
Developer User17133｜Date and time 24/1/21 16:11:19
Build time 16.662 sec｜Game capacity 5.003KB｜

Script

Sure! Here's a basic implementation of the Snake Game in a single HTML file using JavaScript and pictograms:

To play the game, open the HTML file in a web browser, and you can control the snake using the arrow keys on your smartphone. The goal is to eat the red apples (food) while avoiding collision with the walls or the snake's own body. If you collide with any obstacles, the game will restart.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

Sure! Here's a basic implementation of the Snake Game in a single HTML file using JavaScript and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-container {
      position: relative;
      width: 300px;
      height: 300px;
      border: 1px solid black;
      margin: 0 auto;
    }
    .snake, .food {
      position: absolute;
      width: 20px;
      height: 20px;
      background: #000;
      border-radius: 50%;
    }
    .food {
      background: red;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>
  
  <script>
    // Game variables
    var canvasSize = 300;
    var tileSize = 20;
    
    // Pictogram characters
    var snakeIcon = "🐍";
    var foodIcon = "🍎";
    
    // Game elements
    var gameContainer = document.getElementById("game-container");
    
    // Snake object
    var snake = {
      position: [{x: 0, y: 0}],
      direction: "right"
    };
    
    // Food object
    var food = {
      position: {x: 0, y: 0}
    };
    
    // Game initialization
    function init() {
      gameContainer.innerHTML = "";
      
      // Set up snake
      snake.position.forEach(function(segment) {
        var snakeSegment = createSegment(segment, snakeIcon);
        gameContainer.appendChild(snakeSegment);
      });
      
      // Set up food
      var foodSegment = createSegment(food.position, foodIcon);
      gameContainer.appendChild(foodSegment);
      
      // Start game loop
      setInterval(gameLoop, 200);
      
      // Bind keyboard events
      document.addEventListener("keydown", handleKeyPress);
    }
    
    // Create a segment on the game board
    function createSegment(position, icon) {
      var segment = document.createElement("div");
      segment.style.left = position.x * tileSize + "px";
      segment.style.top = position.y * tileSize + "px";
      segment.innerHTML = icon;
      segment.classList.add("snake");
      return segment;
    }
    
    // Game loop
    function gameLoop() {
      moveSnake();
      checkCollision();
    }
    
    // Move the snake
    function moveSnake() {
      var head = Object.assign({}, snake.position[0]);
      
      switch (snake.direction) {
        case "up":
          head.y -= 1;
          break;
        case "down":
          head.y += 1;
          break;
        case "left":
          head.x -= 1;
          break;
        case "right":
          head.x += 1;
          break;
      }
      
      // Move the snake
      snake.position.unshift(head);
      snake.position.pop();
      
      // Update snake segments on the game board
      var segments = document.getElementsByClassName("snake");
      for (var i = 0; i < segments.length; i++) {
        segments[i].style.left = snake.position[i].x * tileSize + "px";
        segments[i].style.top = snake.position[i].y * tileSize + "px";
      }
    }
    
    // Check for collision with walls or food
    function checkCollision() {
      var head = snake.position[0];
      
      if (head.x < 0 || head.x >= canvasSize / tileSize || head.y < 0 || head.y >= canvasSize / tileSize) {
        // Snake hit a wall, game over
        gameOver();
      }
      
      if (head.x === food.position.x && head.y === food.position.y) {
        // Snake ate the food, generate new food
        snake.position.push({});
        moveFood();
      }
      
      for (var i = 1; i < snake.position.length; i++) {
        if (head.x === snake.position[i].x && head.y === snake.position[i].y) {
          // Snake collided with its body, game over
          gameOver();
        }
      }
    }
    
    // Move the food to a new random position
    function moveFood() {
      food.position.x = Math.floor(Math.random() * (canvasSize / tileSize));
      food.position.y = Math.floor(Math.random() * (canvasSize / tileSize));
      
      var foodSegment = createSegment(food.position, foodIcon);
      gameContainer.appendChild(foodSegment);
    }
    
    // Handle keyboard events
    function handleKeyPress(event) {
      switch (event.keyCode) {
        case 37:
          // Left arrow key
          snake.direction = "left";
          break;
        case 38:
          // Up arrow key
          snake.direction = "up";
          break;
        case 39:
          // Right arrow key
          snake.direction = "right";
          break;
        case 40:
          // Down arrow key
          snake.direction = "down";
          break;
      }
    }
    
    // Game over
    function gameOver() {
      // Custom game over logic goes here
      alert("Game Over!");
      init(); // Restart the game
    }
    
    // Start the game
    init();
  </script>
</body>
</html>
```