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

No:14294

164

←

Prev Next

→

Eat The Numbers
Developer User6030｜Date and time 23/8/31 18:44:05
Build time 26.899 sec｜Game capacity 3.935KB｜

Script

Eat The Numbers

Score: 0

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
  <head>
    <title>Eat The Numbers</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        text-align: center;
      }
      canvas {
        border: 1px solid black;
        background-color: white;
      }
      #score {
        font-size: 25px;
        margin-top: 10px;
      }
    </style>
  </head>
  <body>
    <h1>Eat The Numbers</h1>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <p id="score">Score: 0</p>
    <script>
      (function () {
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        const scoreText = document.getElementById("score");

let score = 0;
        let snake = [{ x: 200, y: 200 }];
        let direction = "right";
        let food = { x: 0, y: 0 };

function getRandomPosition() {
          return Math.floor(Math.random() * 20) * 20;
        }

function drawSnake() {
          snake.forEach((segment) => {
            context.fillStyle = "green";
            context.fillRect(segment.x, segment.y, 20, 20);
            context.strokeStyle = "black";
            context.strokeRect(segment.x, segment.y, 20, 20);
          });
        }

function drawFood() {
          context.fillStyle = "red";
          context.fillRect(food.x, food.y, 20, 20);
          context.strokeStyle = "black";
          context.strokeRect(food.x, food.y, 20, 20);
        }

function updateScore() {
          scoreText.innerHTML = "Score: " + score;
        }

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

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

snake.unshift(head);
          snake.pop();
        }

function handleKeydown(event) {
          const key = event.key;

if (key === "ArrowUp" && direction !== "down") {
            direction = "up";
          } else if (key === "ArrowDown" && direction !== "up") {
            direction = "down";
          } else if (key === "ArrowLeft" && direction !== "right") {
            direction = "left";
          } else if (key === "ArrowRight" && direction !== "left") {
            direction = "right";
          }
        }

function checkCollision() {
          const head = snake[0];

// Check wall collision
          if (
            head.x < 0 ||
            head.y < 0 ||
            head.x >= canvas.width ||
            head.y >= canvas.height
          ) {
            clearInterval(gameLoop);
            alert("Game Over! Your score: " + score);
          }

// Check self collision
          for (let i = 1; i < snake.length; i++) {
            if (head.x === snake[i].x && head.y === snake[i].y) {
              clearInterval(gameLoop);
              alert("Game Over! Your score: " + score);
              break;
            }
          }
        }

function gameLoop() {
          context.clearRect(0, 0, canvas.width, canvas.height);
          drawFood();
          drawSnake();
          eatFood();
          moveSnake();
          checkCollision();
        }

food.x = getRandomPosition();
        food.y = getRandomPosition();

document.addEventListener("keydown", handleKeydown);

const gameLoop = setInterval(gameLoop, 100);
      })();
    </script>
  </body>
</html>