Snake game basic jumping avoiding death's game

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

No:23713

←

Prev Next

→

Snake game basic jumping avoiding death
Developer User11121｜Date and time 23/11/3 6:28:03
Build time 84.299 sec｜Game capacity 4.411KB｜

Script

Sure, here's a basic implementation of the snake game using JavaScript and enclosed in script tags in a single HTML file. The game will be playable as a finished game on a smartphone, using pictograms to represent the snake and obstacles.

In this implementation, the snake starts at the top-left corner and the player can control its movement using the arrow keys on their smartphone. The goal is to eat the red obstacle represented by a red square, which will increase the snake's size. The game ends if the snake collides with itself or the walls. When the game ends, an alert is displayed, and the game can be reset by calling the `resetGame()` function.

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
  <title>Snake Game</title>
</head>
<body>
  <canvas id="snakeCanvas" width="400" height="400"></canvas>

// Set up initial variables
    var gridSize = 20;
    var snakeSize = 1;
    var snake = [{x: 0, y: 0}]; // Starting position of the snake
    var direction = "right";

// Generate a random position for the obstacle
    var obstacle = {
      x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize,
      y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize
    };

// Function to draw the snake and obstacle on the canvas
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the snake
      for (var i = 0; i < snake.length; i++) {
        ctx.fillStyle = "black";
        ctx.fillRect(snake[i].x, snake[i].y, gridSize, gridSize);
      }

// Draw the obstacle
      ctx.fillStyle = "red";
      ctx.fillRect(obstacle.x, obstacle.y, gridSize, gridSize);
    }

// Function to update game state
    function update() {
      // Get the coordinates of the head of the snake
      var headX = snake[0].x;
      var headY = snake[0].y;

// Update snake direction based on user input
      document.addEventListener("keydown", function(event) {
        if (event.keyCode === 37 && direction !== "right") { // Left arrow key
          direction = "left";
        } else if (event.keyCode === 38 && direction !== "down") { // Up arrow key
          direction = "up";
        } else if (event.keyCode === 39 && direction !== "left") { // Right arrow key
          direction = "right";
        } else if (event.keyCode === 40 && direction !== "up") { // Down arrow key
          direction = "down";
        }
      });

// Move the snake
      if (direction === "right") {
        headX += gridSize;
      } else if (direction === "left") {
        headX -= gridSize;
      } else if (direction === "up") {
        headY -= gridSize;
      } else if (direction === "down") {
        headY += gridSize;
      }

// Check for collision with the obstacle
      if (headX === obstacle.x && headY === obstacle.y) {
        // Snake ate the obstacle, increase its size and generate a new obstacle
        snakeSize++;
        obstacle = {
          x: Math.floor(Math.random() * (canvas.width / gridSize)) * gridSize,
          y: Math.floor(Math.random() * (canvas.height / gridSize)) * gridSize
        };
      } else {
        // Remove the tail of the snake
        snake.pop();
      }

// Update the snake with the new head position
      var newHead = {x: headX, y: headY};
      snake.unshift(newHead);

// Check for collision with the walls or itself
      if (
        headX < 0 ||
        headY < 0 ||
        headX >= canvas.width ||
        headY >= canvas.height ||
        checkCollision()
      ) {
        // Game over condition
        alert("Game Over!");
        resetGame();
      }

// Redraw the canvas
      draw();

// Call update function again
      setTimeout(update, 100);
    }

// Function to check if the snake collided with itself
    function checkCollision() {
      var head = snake[0];
      for (var i = 1; i < snake.length; i++) {
        if (snake[i].x === head.x && snake[i].y === head.y) {
          return true;
        }
      }
      return false;
    }

// Function to reset the game
    function resetGame() {
      snakeSize = 1;
      snake = [{x: 0, y: 0}];
      direction = "right";
    }

// Start the game by calling the update function
    update();
  </script>
</body>
</html>
```