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

No:6979

←

Prev Next

→

Snake Game
Developer User3952｜Date and time 23/7/4 19:35:17
Build time 19.051 sec｜Game capacity 2.798KB｜

Script

Sure! Here's a sample of a Snake Game implemented as a single HTML file using JavaScript:

Snake Game

This example creates a simple Snake Game where the player controls the snake using the arrow keys on their smartphone's keyboard. The snake moves continuously, and the player's goal is to avoid hitting the game board's boundaries or its own body. The game board is represented as a `<div>` element and the snake is drawn as black square elements using JavaScript. The snake's movement is handled by updating the snake's position and redrawing it on the game board. The player can change the snake's direction by pressing the arrow keys.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a sample of a Snake Game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
  <style>
    /* CSS styling for the game area */
    #game-board {
      width: 400px;
      height: 400px;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <h1>Snake Game</h1>
  <div id="game-board"></div>

function drawSnake() {
      gameBoard.innerHTML = ''; // Clear previous frame

snake.forEach(function(segment) {
        var snakeElement = document.createElement('div');
        snakeElement.style.width = size + 'px';
        snakeElement.style.height = size + 'px';
        snakeElement.style.background = 'black';
        snakeElement.style.position = 'absolute';
        snakeElement.style.top = segment.y * size + 'px';
        snakeElement.style.left = segment.x * size + 'px';

gameBoard.appendChild(snakeElement);
      });
    }

function moveSnake() {
      var head = Object.assign({}, snake[0]); // Clone the head segment

switch (direction) {
        case 'up':
          head.y--;
          break;
        case 'down':
          head.y++;
          break;
        case 'left':
          head.x--;
          break;
        case 'right':
          head.x++;
          break;
      }

snake.unshift(head); // Add the new head segment
      snake.pop(); // Remove the tail segment

drawSnake(); // Redraw the snake
    }

function changeDirection(event) {
      // Adjust the direction based on arrow key inputs
      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;
      }
    }

// Start the game
    drawSnake();
    setInterval(moveSnake, 200);
    document.addEventListener('keydown', changeDirection);
  </script>
</body>
</html>
```

The game board is represented as a `<div>` element and the snake is drawn as black square elements using JavaScript. The snake's movement is handled by updating the snake's position and redrawing it on the game board. The player can change the snake's direction by pressing the arrow keys.