AI game creator

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

No:42177

←

Prev Next

→

Snake Game
Developer User18824｜Date and time 24/2/10 23:34:07
Build time 15.92 sec｜Game capacity 4.725KB｜

Script

Sure, here's an implementation of the classic Snake game using JavaScript, HTML, and pictograms. The game is designed to be played on smartphones.

Once you save this code in a file with the `.html` extension and open it in a web browser, you'll be able to play the Snake game on your smartphone. Use the Arrow keys to control the snake and try to eat as many apples as possible without crashing into the walls or yourself. Good luck, and enjoy the game!

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an implementation of the classic Snake game using JavaScript, HTML, and pictograms. The game is designed to be played on smartphones.

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Snake Game</title>
    <style>
      html, body {
        margin: 0;
        padding: 0;
        height: 100%;
      }
      
      #gameCanvas {
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game variables
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");
      const gridSize = 20;
      const canvasSize = canvas.width / gridSize;
      let snake = [];
      let snakeDirection;
      let appleX;
      let appleY;
      let score = 0;
      let gameInterval;

// Initialize game state
      function initializeGame() {
        snake = [
          { x: 4, y: 4 }, // Snake head
          { x: 3, y: 4 }, // Snake body
          { x: 2, y: 4 }, // Snake body
        ];
        snakeDirection = "right";
        generateApple();
        score = 0;
        gameInterval = setInterval(moveSnake, 200);
      }

// Draw a pictogram at given coordinates
      function drawPictogram(x, y, pictogram) {
        ctx.font = `${gridSize}px Arial`;
        ctx.fillText(pictogram, x * gridSize, y * gridSize);
      }

// Generate a new apple at random coordinates
      function generateApple() {
        appleX = Math.floor(Math.random() * canvasSize);
        appleY = Math.floor(Math.random() * canvasSize);
      }

// Update game canvas
      function drawGame() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw Snake
        snake.forEach((part, index) => {
          if (index === 0) {
            drawPictogram(part.x, part.y, snakeHead);
          } else {
            drawPictogram(part.x, part.y, snakeBody);
          }
        });

// Draw Apple
        drawPictogram(appleX, appleY, apple);

// Draw Score
        ctx.font = "20px Arial";
        ctx.fillText(`Score: ${score}`, gridSize, gridSize);
      }

// Update snake position
      function moveSnake() {
        const head = { x: snake[0].x, y: snake[0].y };

// Update direction based on user input or default direction
        if (snakeDirection === "up") head.y--;
        if (snakeDirection === "down") head.y++;
        if (snakeDirection === "left") head.x--;
        if (snakeDirection === "right") head.x++;

// Check collision with walls or snake body
        if (
          head.x < 0 ||
          head.x >= canvasSize ||
          head.y < 0 ||
          head.y >= canvasSize ||
          checkCollision(head)
        ) {
          // Game over
          clearInterval(gameInterval);
          alert("Game Over! Your Score: " + score);
          initializeGame();
          return;
        }

// Check collision with apple
        if (head.x === appleX && head.y === appleY) {
          // Increase score and generate new apple
          score++;
          generateApple();
        } else {
          // Remove snake tail if no apple collision
          snake.pop();
        }

// Move the snake head to the new position
        snake.unshift(head);

drawGame();
      }

// Check collision with snake body
      function checkCollision(head) {
        return snake.some((part) => part.x === head.x && part.y === head.y);
      }

// Handle user input
      function handleKeyDown(e) {
        if (e.key === "ArrowUp" && snakeDirection !== "down") {
          snakeDirection = "up";
        } else if (e.key === "ArrowDown" && snakeDirection !== "up") {
          snakeDirection = "down";
        } else if (e.key === "ArrowLeft" && snakeDirection !== "right") {
          snakeDirection = "left";
        } else if (e.key === "ArrowRight" && snakeDirection !== "left") {
          snakeDirection = "right";
        }
      }

// Start game and handle user inputs
      function startGame() {
        initializeGame();
        drawGame();
        window.addEventListener("keydown", handleKeyDown);
      }

// Start the game
      startGame();
    </script>
  </body>
</html>
```