snake But it goes to the food itself.'s game

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

No:37488

←

Prev Next

→

snake But it goes to the food itself.
Developer User17003｜Date and time 24/1/21 4:25:28
Build time 15.804 sec｜Game capacity 4.775KB｜

Script

Sure, I can help you create a simple Snake game using JavaScript in a single HTML file. Here's an example implementation:

You can save the above code in a new HTML file and open it in a web browser on your smartphone to play the Snake game. The game board is represented by a 400x400 pixel div, and the snake and food elements are represented by 20x20 pixel divs. To control the snake, you can use the arrow keys on your smartphone's keyboard. The game will run at a speed of 200 milliseconds per frame. When the game is over, an alert will show your final score.

←

Prev　Next

→ 　

Back　

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

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

Sure, I can help you create a simple Snake game using JavaScript in a single HTML file. Here's an example implementation:

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* CSS styles for the game board */
    #game-board {
      width: 400px;
      height: 400px;
      background-color: #f0f0f0;
      position: relative;
    }
    .snake {
      width: 20px;
      height: 20px;
      background-color: green;
      position: absolute;
    }
    .food {
      width: 20px;
      height: 20px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>
  <div id="game-board"></div>

// Generate random food position
      function generateFood() {
        food.x = Math.floor(Math.random() * 20) * 20;
        food.y = Math.floor(Math.random() * 20) * 20;

// Check if food overlaps with the snake, regenerate if true
        for (var i = 0; i < snake.length; i++) {
          if (snake[i].x === food.x && snake[i].y === food.y) {
            generateFood();
            break;
          }
        }
      }

// Update game board
      function updateGameBoard() {
        // Clear existing elements
        while (gameBoard.firstChild) {
          gameBoard.firstChild.remove();
        }

// Draw snake
        for (var i = 0; i < snake.length; i++) {
          var snakeElement = document.createElement("div");
          snakeElement.className = "snake";
          snakeElement.style.left = snake[i].x + "px";
          snakeElement.style.top = snake[i].y + "px";
          gameBoard.appendChild(snakeElement);
        }

// Draw food
        var foodElement = document.createElement("div");
        foodElement.className = "food";
        foodElement.style.left = food.x + "px";
        foodElement.style.top = food.y + "px";
        gameBoard.appendChild(foodElement);
      }

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

// Update head position based on the current direction
        if (direction === "right") {
          head.x += 20;
        } else if (direction === "down") {
          head.y += 20;
        } else if (direction === "left") {
          head.x -= 20;
        } else if (direction === "up") {
          head.y -= 20;
        }

// Check if the snake hits the food
        if (head.x === food.x && head.y === food.y) {
          // Increase score and generate new food
          score++;
          generateFood();
        } else {
          // Remove tail if no food is eaten
          snake.pop();
        }

// Check if the snake hits itself or the boundary
        if (head.x < 0 || head.y < 0 || head.x >= 400 || head.y >= 400 || checkCollision(head)) {
          // Game over
          alert("Game over! Your score is " + score);
          clearInterval(gameInterval);
          return;
        }

// Add the new head to the snake
        snake.unshift(head);

// Update game board
        updateGameBoard();
      }

// Check if the snake hits itself
      function checkCollision(head) {
        for (var i = 1; i < snake.length; i++) {
          if (snake[i].x === head.x && snake[i].y === head.y) {
            return true;
          }
        }
        return false;
      }

// Handle keyboard events for changing direction
      document.addEventListener("keydown", function(event) {
        if (event.key === "ArrowRight" && direction !== "left") {
          direction = "right";
        } else if (event.key === "ArrowDown" && direction !== "up") {
          direction = "down";
        } else if (event.key === "ArrowLeft" && direction !== "right") {
          direction = "left";
        } else if (event.key === "ArrowUp" && direction !== "down") {
          direction = "up";
        }
      });

// Generate initial food and start game loop
      generateFood();
      var gameInterval = setInterval(moveSnake, 200);
    });
  </script>
</body>
</html>
```