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

No:10681

121

←

Prev Next

→

Snake Game
Developer User4597｜Date and time 23/8/1 19:11:05
Build time 40.168 sec｜Game capacity 4.305KB｜

Script

Sure! Here's an implementation of the Snake Game using JavaScript inside a single HTML file:

Snake Game

This code provides a basic implementation of the Snake Game using JavaScript inside a single HTML file. The game can be played on a smartphone by using the arrow keys to control the snake. The game canvas is represented by a green square for the snake, a red square for the food, and a black text to display the score. The game ends if the snake collides with the wall or itself, and the player's score is shown in an alert.

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

Sure! Here's an implementation of the Snake Game using JavaScript inside a single HTML file:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS styles for the game canvas */
    #gameCanvas {
      border: 1px solid black;
      background-color: #EEE;
      position: relative;
      width: 400px;
      height: 400px;
    }
  </style>
</head>
<body>
  <h1>Snake Game</h1>
  <div id="gameCanvas"></div>

let snake = [{x: 10, y: 10}]; // Snake's initial position
    let food = {x: 15, y: 10}; // Food's initial position
    let direction = 'right'; // Snake's initial direction
    let score = 0; // Player's score

// Function to draw the game canvas
    function drawCanvas() {
      const canvas = document.getElementById('gameCanvas');
      const context = canvas.getContext('2d');
      context.clearRect(0, 0, canvas.width, canvas.height); // Clear canvas

// Draw snake
      snake.forEach(element => {
        context.fillStyle = 'green';
        context.fillRect(element.x * canvasSize, element.y * canvasSize, canvasSize, canvasSize);
      });

// Draw food
      context.fillStyle = 'red';
      context.fillRect(food.x * canvasSize, food.y * canvasSize, canvasSize, canvasSize);

// Draw score
      context.fillStyle = 'black';
      context.font = '20px Arial';
      context.fillText('Score: ' + score, 10, 30);
    }

// Function to update the game state
    function updateGame() {
      const head = Object.assign({}, snake[0]); // Create a copy of the snake's head

// Update snake position based on current direction
      if (direction === 'right') head.x++;
      else if (direction === 'left') head.x--;
      else if (direction === 'up') head.y--;
      else if (direction === 'down') head.y++;

// Check if snake collides with the wall or itself
      if (
        head.x < 0 || head.x >= canvasWidth ||
        head.y < 0 || head.y >= canvasHeight ||
        snake.some(element => element.x === head.x && element.y === head.y)
      ) {
        // Game over condition
        alert('Game Over! Your score is: ' + score);
        snake = [{x: 10, y: 10}];
        score = 0;
      } else {
        snake.unshift(head); // Add the new head to the snake

// Check if snake collides with the food
        if (head.x === food.x && head.y === food.y) {
          score++; // Increase score
          generateFood(); // Generate new food position
        } else {
          snake.pop(); // Remove the tail segment
        }
      }

drawCanvas(); // Refresh the canvas
    }

// Function to handle keyboard input for controlling the snake
    function handleKeyPress(event) {
      if (event.keyCode === 37 && direction !== 'right') direction = 'left'; // Left arrow key
      else if (event.keyCode === 38 && direction !== 'down') direction = 'up'; // Up arrow key
      else if (event.keyCode === 39 && direction !== 'left') direction = 'right'; // Right arrow key
      else if (event.keyCode === 40 && direction !== 'up') direction = 'down'; // Down arrow key
    }

// Function to generate new food position
    function generateFood() {
      food.x = Math.floor(Math.random() * canvasWidth);
      food.y = Math.floor(Math.random() * canvasHeight);
    }

// Set up the game
    function initializeGame() {
      document.addEventListener('keydown', handleKeyPress);
      setInterval(updateGame, 150); // Game update interval (controls snake's speed)
      generateFood(); // Generate initial food position
      drawCanvas(); // Draw the initial canvas
    }

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