I want to make snake game's game

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

No:22103

←

Prev Next

→

I want to make snake game
Developer User10228｜Date and time 23/10/20 22:53:47
Build time 116.566 sec｜Game capacity 4.631KB｜

Script

Sure! Here's an example of a single HTML file containing JavaScript code for a simple Snake game:

This HTML file contains a simple implementation of the Snake game. The gameplay is controlled by arrow keys on a smartphone. The game canvas is enclosed by `<canvas>` tags, and the JavaScript code is enclosed by `
` tags. The game initializes with a canvas element, sets up the necessary variables, and starts the main game loop. The player controls the snake with arrow key presses. The goal is to eat the food (red square) while avoiding colliding with the snake's own body or the canvas boundaries. Please note that this is a basic implementation and can be further enhanced or modified to suit your specific requirements.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

Sure! Here's an example of a single HTML file containing JavaScript code for a simple Snake game:

```html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Snake Game</title>
  <style>
    canvas {
      border: 1px solid #000;
      display: block;
    }
  </style>
</head>

// Initialize the game canvas and context
    const canvas = document.getElementById('gameCanvas');
    const context = canvas.getContext('2d');

// Set initial game values
    const boxSize = 20;
    let snake = [{ x: 10, y: 10 }];
    let direction = '';
    let food = getRandomFoodPosition();

// Start the game
    main();

// Listen for arrow key presses
    document.addEventListener('keydown', changeDirection);

// Main game loop
    function main() {
      if (isGameOver()) {
        return;
      }

setTimeout(function () {
        clearCanvas();
        drawFood();
        moveSnake();
        drawSnake();
        main();
      }, 100);
    }

// Clear the game canvas
    function clearCanvas() {
      context.fillStyle = '#fff';
      context.fillRect(0, 0, canvas.width, canvas.height);
    }

// Draw the snake on the canvas
    function drawSnake() {
      snake.forEach(function (segment) {
        context.fillStyle = '#00f';
        context.fillRect(segment.x * boxSize, segment.y * boxSize, boxSize, boxSize);
      });
    }

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

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

snake.unshift(head);

if (hasEatenFood()) {
        createNewFood();
      } else {
        snake.pop();
      }
    }

// Check if the game is over
    function isGameOver() {
      const head = snake[0];

if (head.x < 0 || head.x === canvas.width / boxSize ||
        head.y < 0 || head.y === canvas.height / boxSize ||
        hasCollidedWithSelf()) {
        return true;
      }

return false;
    }

// Check if the snake has collided with itself
    function hasCollidedWithSelf() {
      const head = snake[0];

for (let i = 1; i < snake.length; i++) {
        if (head.x === snake[i].x && head.y === snake[i].y) {
          return true;
        }
      }

return false;
    }

// Draw the food on the canvas
    function drawFood() {
      context.fillStyle = '#f00';
      context.fillRect(food.x * boxSize, food.y * boxSize, boxSize, boxSize);
    }

// Check if the snake has eaten the food
    function hasEatenFood() {
      const head = snake[0];

if (head.x === food.x && head.y === food.y) {
        return true;
      }

return false;
    }

// Create new food in a random position
    function createNewFood() {
      food = getRandomFoodPosition();

for (let i = 0; i < snake.length; i++) {
        if (food.x === snake[i].x && food.y === snake[i].y) {
          createNewFood();
          break;
        }
      }
    }

// Get random food position
    function getRandomFoodPosition() {
      return {
        x: Math.floor(Math.random() * (canvas.width / boxSize)),
        y: Math.floor(Math.random() * (canvas.height / boxSize))
      };
    }

// Change the snake's direction
    function changeDirection(event) {
      const key = event.keyCode;

if (key === 37 && direction !== 'right') direction = 'left';
      if (key === 38 && direction !== 'down') direction = 'up';
      if (key === 39 && direction !== 'left') direction = 'right';
      if (key === 40 && direction !== 'up') direction = 'down';
    }
  </script>
</body>

</html>
```

The game initializes with a canvas element, sets up the necessary variables, and starts the main game loop. The player controls the snake with arrow key presses. The goal is to eat the food (red square) while avoiding colliding with the snake's own body or the canvas boundaries.

Please note that this is a basic implementation and can be further enhanced or modified to suit your specific requirements.