AI game creator

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

No:24673

149

←

Prev Next

→

Snake Game
Developer User11772｜Date and time 23/11/11 4:36:12
Build time 149.556 sec｜Game capacity 5.155KB｜

Script

Sure! Here's a simple implementation of the classic Snake game using JavaScript and HTML. The game can be played on a smartphone and uses pictograms for visuals. Just copy the code below into a single HTML file and run it in a browser:

To make the game work, you will also need to include the pictogram images for the snake head, snake body, and apple in the same directory as the HTML file and update the image URLs in the code accordingly. Please note that this is a basic implementation of the Snake game and can be further enhanced with additional features and improvements.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Snake Game</title>
  <style>
    #gameCanvas {
      border: 1px solid black;
    }
  </style>
</head>

// Pictogram Images
    var snakeHeadImg, snakeBodyImg, appleImg;

// Initialize the game
    function init() {
      canvas = document.getElementById("gameCanvas");
      ctx = canvas.getContext("2d");
      tileSize = 20;
      snake = [{
        x: 8 * tileSize,
        y: 8 * tileSize
      }];
      apple = {
        x: Math.floor(Math.random() * (canvas.width / tileSize)) * tileSize,
        y: Math.floor(Math.random() * (canvas.height / tileSize)) * tileSize
      };
      direction = "right";
      score = 0;

// Load pictogram images
      snakeHeadImg = new Image();
      snakeBodyImg = new Image();
      appleImg = new Image();
      snakeHeadImg.src = "snake_head.png";
      snakeBodyImg.src = "snake_body.png";
      appleImg.src = "apple.png";

document.addEventListener("keydown", changeDirection);
      setInterval(gameLoop, 100);
    }

// Main game loop
    function gameLoop() {
      clearCanvas();
      moveSnake();
      drawSnake();
      drawApple();
      checkCollision();
      drawScore();
    }

// Clear the canvas
    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    }

// Move the snake
    function moveSnake() {
      var head = {
        x: snake[0].x,
        y: snake[0].y
      };

// Update head position based on direction
      if (direction === "up") {
        head.y -= tileSize;
      } else if (direction === "down") {
        head.y += tileSize;
      } else if (direction === "left") {
        head.x -= tileSize;
      } else if (direction === "right") {
        head.x += tileSize;
      }

snake.unshift(head); // Add new head to snake
      if (!isAppleEaten()) { // Remove tail if apple not eaten
        snake.pop();
      }
    }

// Draw the snake
    function drawSnake() {
      snake.forEach(function(segment, index) {
        if (index === 0) {
          ctx.drawImage(snakeHeadImg, segment.x, segment.y, tileSize, tileSize);
        } else {
          ctx.drawImage(snakeBodyImg, segment.x, segment.y, tileSize, tileSize);
        }
      });
    }

// Draw the apple
    function drawApple() {
      ctx.drawImage(appleImg, apple.x, apple.y, tileSize, tileSize);
    }

// Check if apple is eaten
    function isAppleEaten() {
      return snake[0].x === apple.x && snake[0].y === apple.y;
    }

// Check for collision with walls or self
    function checkCollision() {
      if (
        snake[0].x < 0 ||
        snake[0].y < 0 ||
        snake[0].x >= canvas.width ||
        snake[0].y >= canvas.height ||
        snake.some(function(segment, index) {
          return index !== 0 && segment.x === snake[0].x && segment.y === snake[0].y;
        })
      ) {
        gameOver();
      } else if (isAppleEaten()) {
        score++;
        generateNewApple();
      }
    }

// Generate a new apple at random position
    function generateNewApple() {
      apple = {
        x: Math.floor(Math.random() * (canvas.width / tileSize)) * tileSize,
        y: Math.floor(Math.random() * (canvas.height / tileSize)) * tileSize
      };
    }

// Display the score
    function drawScore() {
      ctx.fillStyle = "black";
      ctx.font = "20px Arial";
      ctx.fillText("Score: " + score, tileSize, 1.5 * tileSize);
    }

// Change snake direction based on keyboard input
    function changeDirection(event) {
      var key = event.keyCode;
      var validDirections = {
        37: "left",
        38: "up",
        39: "right",
        40: "down"
      };

if (validDirections.hasOwnProperty(key)) {
        var newDirection = validDirections[key];

// Prevent opposite direction changes
        if (
          (newDirection === "up" && direction !== "down") ||
          (newDirection === "down" && direction !== "up") ||
          (newDirection === "left" && direction !== "right") ||
          (newDirection === "right" && direction !== "left")
        ) {
          direction = newDirection;
        }
      }
    }

// Game over
    function gameOver() {
      clearInterval(gameLoop);
      alert("Game Over! Your score: " + score);
      init();
    }

// Start the game
    init();
  </script>
</body>

</html>
```

Please note that this is a basic implementation of the Snake game and can be further enhanced with additional features and improvements.