AI game creator

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

No:36096

←

Prev Next

→

Snake Game
Developer User16745｜Date and time 24/1/16 20:53:20
Build time 15.203 sec｜Game capacity 3.771KB｜

Script

Sure! Here's a simple implementation of the classic Snake Game using HTML, CSS, and JavaScript. The game can be played on a smartphone and uses pictograms to represent the snake and food.

To play the game, you can copy the above code into a single HTML file and open it in any browser that supports JavaScript. The game can be operated on a smartphone, and pictograms are not used due to the limitation of the ASCII character set in JavaScript's canvas rendering.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

Sure! Here's a simple implementation of the classic Snake Game using HTML, CSS, and JavaScript. The game can be played on a smartphone and uses pictograms to represent the snake and food.

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="400"></canvas>

// Initialize the game
    function init() {
      canvas = document.getElementById('gameCanvas');
      ctx = canvas.getContext('2d');
      direction = 'right';
      snake = [{ x: 0, y: 0 }];
      food = { x: 0, y: 0 };

generateFood();

// Set event listener for arrow key presses
      document.addEventListener('keydown', changeDirection);

// Start the game loop
      setInterval(gameLoop, 100);
    }

// Generate new food position
    function generateFood() {
      food.x = Math.floor(Math.random() * (canvas.width / scale));
      food.y = Math.floor(Math.random() * (canvas.height / scale));
    }

// Change snake direction based on arrow key pressed
    function changeDirection(e) {
      if (e.keyCode === 37 && direction !== 'right') {
        direction = 'left';
      } else if (e.keyCode === 38 && direction !== 'down') {
        direction = 'up';
      } else if (e.keyCode === 39 && direction !== 'left') {
        direction = 'right';
      } else if (e.keyCode === 40 && direction !== 'up') {
        direction = 'down';
      }
    }

// Game loop
    function gameLoop() {
      // Clear the canvas
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Update snake position
      var head = { x: snake[0].x, y: snake[0].y };

if (direction === 'right') {
        head.x++;
      } else if (direction === 'left') {
        head.x--;
      } else if (direction === 'up') {
        head.y--;
      } else if (direction === 'down') {
        head.y++;
      }

// Check for game over
      if (
        head.x < 0 ||
        head.x >= canvas.width / scale ||
        head.y < 0 ||
        head.y >= canvas.height / scale ||
        collisionCheck(head, snake)
      ) {
        alert('Game Over');
        snake = [{ x: 0, y: 0 }];
        direction = 'right';
        generateFood();
      }

// Check if food is eaten
      if (head.x === food.x && head.y === food.y) {
        // Increase snake length and generate new food position
        snake.unshift(head);
        generateFood();
      } else {
        // Move the snake by removing the tail and adding new head
        snake.pop();
        snake.unshift(head);
      }

// Draw the snake
      for (var i = 0; i < snake.length; i++) {
        ctx.fillStyle = '#000000';
        ctx.fillRect(
          snake[i].x * scale,
          snake[i].y * scale,
          scale,
          scale
        );
      }

// Draw the food
      ctx.fillStyle = '#FF0000';
      ctx.fillRect(food.x * scale, food.y * scale, scale, scale);
    }

// Check for collision between snake segments
    function collisionCheck(head, array) {
      for (var i = 0; i < array.length; i++) {
        if (head.x === array[i].x && head.y === array[i].y) {
          return true;
        }
      }
      return false;
    }

// Initialize the game
    window.onload = init;
  </script>
</body>
</html>
```