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

No:40858

←

Prev Next

→

Snake snacks
Developer User18190｜Date and time 24/2/4 10:42:11
Build time 13.579 sec｜Game capacity 4.297KB｜

Script

Sure, here's an example of a simple Snake game implemented as a single HTML file using JavaScript:

Snake Snacks

In this game, you control a snake using the arrow keys on your smartphone. The goal is to eat the red food items scattered on the game board. As you eat the food, the snake grows longer. If the snake collides with itself or the game board boundary, the game will end and display a "Game Over" message. Please note that due to the limitations of this text-based environment, you won't be able to experience the actual gameplay or see the pictograms. To play the game, you need to copy the provided code into a new HTML file and open it in a web browser or an HTML editor.

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure, here's an example of a simple Snake game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Snacks</title>
  <style>
    #game-board {
      position: relative;
      width: 300px;
      height: 300px;
      margin: 0 auto;
      border: 1px solid #000;
    }
    .snake {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #000;
    }
    .food {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: #f00;
    }
  </style>
</head>
<body>
  <h1>Snake Snacks</h1>
  <div id="game-board"></div>

// Render the snake and food on the game board
    function render() {
      gameBoard.innerHTML = '';

for (var i = 0; i < snake.length; i++) {
        var snakePart = document.createElement('div');
        snakePart.className = 'snake';
        snakePart.style.left = snake[i].left + 'px';
        snakePart.style.top = snake[i].top + 'px';
        gameBoard.appendChild(snakePart);
      }

var foodElement = document.createElement('div');
      foodElement.className = 'food';
      foodElement.style.left = food.left + 'px';
      foodElement.style.top = food.top + 'px';
      gameBoard.appendChild(foodElement);
    }

// Move the snake based on the current direction
    function moveSnake() {
      var head = {left: snake[0].left, top: snake[0].top};

switch (direction) {
        case 'right':
          head.left += 20;
          break;
        case 'left':
          head.left -= 20;
          break;
        case 'up':
          head.top -= 20;
          break;
        case 'down':
          head.top += 20;
          break;
      }

snake.unshift(head);

// Check if snake has collided with the food
      if (head.left === food.left && head.top === food.top) {
        // Generate new food at a random position
        food = {left: getRandomPosition(), top: getRandomPosition()};
      } else {
        // Remove the tail of the snake if it hasn't eaten food
        snake.pop();
      }
    }

// Check if the game is over (if the snake has collided with itself or the game board boundary)
    function checkGameOver() {
      var head = snake[0];
      var hasCollided = snake.slice(1).some(function(part) {
        return part.left === head.left && part.top === head.top;
      });

if (hasCollided || head.left < 0 || head.left >= gameBoard.offsetWidth ||
          head.top < 0 || head.top >= gameBoard.offsetHeight) {
        clearInterval(gameInterval);
        alert('Game Over');
      }
    }

// Handle keyboard arrow keys to change the snake's direction
    document.addEventListener('keydown', function(event) {
      event.preventDefault();

switch (event.keyCode) {
        case 37: // left arrow key
          direction = 'left';
          break;
        case 38: // up arrow key
          direction = 'up';
          break;
        case 39: // right arrow key
          direction = 'right';
          break;
        case 40: // down arrow key
          direction = 'down';
          break;
      }
    });

// Helper function to generate random positions for the food
    function getRandomPosition() {
      return Math.floor(Math.random() * (gameBoard.offsetWidth / 20)) * 20;
    }

// Start the game loop
    var gameInterval = setInterval(function() {
      moveSnake();
      checkGameOver();
      render();
    }, 200);
  </script>
</body>
</html>
```

Please note that due to the limitations of this text-based environment, you won't be able to experience the actual gameplay or see the pictograms. To play the game, you need to copy the provided code into a new HTML file and open it in a web browser or an HTML editor.