AI game creator

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

No:36835

←

Prev Next

→

Snake
Developer User16879｜Date and time 24/1/18 17:55:39
Build time 20.757 sec｜Game capacity 4.555KB｜

Script

Sure! Here's an example implementation of the classic Snake game using JavaScript, HTML, and pictograms:

To play the game, you can place this code in a single HTML file, save it with a `.html` extension, and open it in a web browser (preferably on a smartphone for better user experience). You will see a game board with a snake represented by a snake emoji (🐍) and food represented by an apple emoji (🍎). Use the arrow keys on your smartphone's keyboard to control the snake's direction and try to eat the food while avoiding collisions with the walls and your own body. The game will end if you collide with any of these obstacles, and a game over message will be displayed showing your final score.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's an example implementation of the classic Snake game using JavaScript, HTML, and pictograms:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    #game-board {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

function startGame() {
      // Create game board
      var gameBoard = document.getElementById("game-board");
      gameBoard.style.width = canvasSize + "px";
      gameBoard.style.height = canvasSize + "px";

// Generate food
      generateFood();

// Start game loop
      setInterval(moveSnake, 200);
    }

function generateFood() {
      var maxX = canvasSize / blockSize;
      var maxY = canvasSize / blockSize;

food.x = Math.floor(Math.random() * maxX) * blockSize;
      food.y = Math.floor(Math.random() * maxY) * blockSize;

// Generate food emoji
      var foodEmoji = document.createElement("span");
      foodEmoji.textContent = "🍎";
      foodEmoji.style.position = "absolute";
      foodEmoji.style.left = food.x + "px";
      foodEmoji.style.top = food.y + "px";
      document.getElementById("game-board").appendChild(foodEmoji);
    }

function moveSnake() {
      // Remove tail
      var tail = snake.pop();
      document.getElementById("game-board").removeChild(tail.element);

// Calculate new head position
      var head = Object.assign({}, snake[0]);
      switch (direction) {
        case "up":
          head.y -= blockSize;
          break;
        case "down":
          head.y += blockSize;
          break;
        case "left":
          head.x -= blockSize;
          break;
        case "right":
          head.x += blockSize;
          break;
      }

// Check collision with walls or snake body
      if (
        head.x < 0 || head.x >= canvasSize ||
        head.y < 0 || head.y >= canvasSize ||
        checkSnakeCollision(head)
      ) {
        // Game over condition
        alert("Game Over. Your score: " + score);
        location.reload(); // Reload the page to start a new game
        return;
      }

// Create new head block and add it to the snake
      var newHead = document.createElement("span");
      newHead.style.position = "absolute";
      newHead.style.left = head.x + "px";
      newHead.style.top = head.y + "px";
      newHead.textContent = "🐍";
      snake.unshift({x: head.x, y: head.y, element: newHead});
      document.getElementById("game-board").appendChild(newHead);

// Check collision with food
      if (head.x === food.x && head.y === food.y) {
        // Increase score
        score++;
        // Generate new food
        generateFood();
      }
    }

function checkSnakeCollision(position) {
      return snake.some(segment => segment.x === position.x && segment.y === position.y);
    }

function handleKeyDown(event) {
      // Update direction based on key press
      switch (event.key) {
        case "ArrowUp":
          direction = "up";
          break;
        case "ArrowDown":
          direction = "down";
          break;
        case "ArrowLeft":
          direction = "left";
          break;
        case "ArrowRight":
          direction = "right";
          break;
      }
    }

// Start game when the page is loaded
    document.addEventListener("DOMContentLoaded", startGame);
    // Handle arrow key presses
    document.addEventListener("keydown", handleKeyDown);
  </script>
</body>
</html>
```