AI game creator

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

No:21774

←

Prev Next

→

Eating game
Developer User10069｜Date and time 23/10/18 8:15:35
Build time 59.96 sec｜Game capacity 2.722KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Eating Game</title>
    <style>
      canvas {
        border: solid 1px #000;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Game Variables
      let score = 0;
      let gameOver = false;

// Pictograms
      const appleImg = new Image();
      appleImg.src = "apple.png";

const burgerImg = new Image();
      burgerImg.src = "burger.png";

// Character
      const character = {
        x: 200,
        y: 200,
        size: 50,
      };

// Food
      const food = {
        x: Math.floor(Math.random() * 15) * 25,
        y: Math.floor(Math.random() * 15) * 25,
        size: 25,
      };

// Event Listener for arrow key inputs
      document.addEventListener("keydown", moveCharacter);

// Function to handle character movement
      function moveCharacter(event) {
        if (event.key === "ArrowUp" && character.y > 0) {
          character.y -= character.size;
        } else if (
          event.key === "ArrowDown" &&
          character.y < canvas.height - character.size
        ) {
          character.y += character.size;
        } else if (
          event.key === "ArrowLeft" &&
          character.x > 0
        ) {
          character.x -= character.size;
        } else if (
          event.key === "ArrowRight" &&
          character.x < canvas.width - character.size
        ) {
          character.x += character.size;
        }
        
        // Check if character has collided with food
        if (character.x === food.x && character.y === food.y) {
          score++;
          food.x = Math.floor(Math.random() * 15) * 25;
          food.y = Math.floor(Math.random() * 15) * 25;
        }
      }

// Function to draw the game
      function draw() {
        // Clear canvas
        ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw character
        ctx.fillRect(character.x, character.y, character.size, character.size);

// Draw food
        ctx.drawImage(appleImg, food.x, food.y, food.size, food.size);

// Draw score
        ctx.font = "20px Arial";
        ctx.fillText("Score: " + score, 10, 30);

// Check if game is over
        if (gameOver) {
          ctx.font = "30px Arial";
          ctx.fillText("Game Over!", canvas.width / 2 - 80, canvas.height / 2);
          return;
        }

// Request next frame
        requestAnimationFrame(draw);
      }

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