AI game creator

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

No:10010

←

Prev Next

→

Snake Game
Developer User4463｜Date and time 23/7/28 20:18:41
Build time 35.991 sec｜Game capacity 4.799KB｜

Script

Sure, here's an implementation of a simple Snake Game in a single HTML file using JavaScript and pictograms. It is designed for smartphone operation.

Note: Please make sure to replace the "emozi_all/pictogram.png" URL with a valid URL to the pictogram you would like to use. The game grid is represented by a 15x15 grid, and the snake is represented by the "S" pictogram while the food is represented by the "F" pictogram. The player can control the snake's direction by swiping on the game area. The game ends when the snake collides with walls or itself. Feel free to modify the code as per your needs and add more features to enhance the game.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an implementation of a simple Snake Game in a single HTML file using JavaScript and pictograms. It is designed for smartphone operation.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #272727;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
    }

#game {
      width: 300px;
      height: 300px;
      border: 1px solid #fff;
      display: flex;
      flex-wrap: wrap;
      background-color: #393939;
    }

.cell {
      width: 20px;
      height: 20px;
      background-color: #fff;
    }

.snake, .food {
      background-image: url('https://example.com/pictogram.png');
      background-size: cover;
    }
  </style>
</head>
<body>
  <div id="game"></div>

// Initialize game variables
    let snake = [{ x: 7, y: 7 }]; // Initial snake position
    let food = { x: 3, y: 3 }; // Initial food position
    let direction = "right"; // Initial direction

// Check if snake has collided with walls or itself
    function checkCollision() {
      const head = snake[0];
      if (head.x < 0 || head.x >= gameSize || head.y < 0 || head.y >= gameSize) {
        return true; // Collided with walls
      }
      for (let i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
          return true; // Collided with itself
        }
      }
      return false;
    }

function updateGame() {
      // Clear previous frame
      const game = document.getElementById("game");
      game.innerHTML = "";

// Move snake in current direction
      const head = { ...snake[0] };
      switch (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;
      }

// Check if snake has collided, end the game
      if (checkCollision()) {
        clearInterval(gameInterval);
        alert("Game Over!");
        return;
      }

// Add new head to snake
      snake.unshift(head);

// Check if snake has eaten the food
      if (head.x === food.x && head.y === food.y) {
        // Generate new food position
        food.x = Math.floor(Math.random() * gameSize);
        food.y = Math.floor(Math.random() * gameSize);
      } else {
        // Remove tail if food not eaten
        snake.pop();
      }

// Render the game
      for (let i = 0; i < gameSize; i++) {
        for (let j = 0; j < gameSize; j++) {
          const cell = document.createElement("div");
          cell.classList.add("cell");

// Check if cell is part of snake body
          const isSnakeBody = snake.some(s => s.x === j && s.y === i);
          if (isSnakeBody) {
            cell.classList.add("snake");
          }

// Check if cell is food
          if (food.x === j && food.y === i) {
            cell.classList.add("food");
          }

game.appendChild(cell);
        }
      }
    }

// Handle touch events to change snake direction
    function handleTouch(event) {
      const { clientX, clientY } = event.touches[0];
      const { top, left, height, width } = document.getElementById("game").getBoundingClientRect();

const xRatio = (clientX - left) / width;
      const yRatio = (clientY - top) / height;

if (xRatio > yRatio) {
        if (clientX > left + width / 2) {
          direction = "right";
        } else {
          direction = "left";
        }
      } else {
        if (clientY > top + height / 2) {
          direction = "down";
        } else {
          direction = "up";
        }
      }
    }

// Start the game
    const gameInterval = setInterval(updateGame, frameRate);

// Attach touch event listener to game area
    const gameArea = document.getElementById("game");
    gameArea.addEventListener("touchstart", handleTouch);

</script>
</body>
</html>
```

Note: Please make sure to replace the "https://example.com/pictogram.png" URL with a valid URL to the pictogram you would like to use.

The game grid is represented by a 15x15 grid, and the snake is represented by the "S" pictogram while the food is represented by the "F" pictogram. The player can control the snake's direction by swiping on the game area. The game ends when the snake collides with walls or itself.

Feel free to modify the code as per your needs and add more features to enhance the game.