AI game creator

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

No:40116

←

Prev Next

→

Angry Birds
Developer User4389｜Date and time 24/2/1 6:44:37
Build time 11.767 sec｜Game capacity 3.517KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
  <head>
    <title>Angry Birds</title>
    <style>
      canvas {
        border: 1px solid black;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script>
      // Game logic starts here
      const canvas = document.getElementById("gameCanvas");
      const ctx = canvas.getContext("2d");

// Objects
      let bird = {
        x: 50,
        y: canvas.height / 2,
        radius: 20,
        color: "yellow",
        velocity: 0,
        gravity: 0.5,
        jumpHeight: 10,
        draw: function () {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
          ctx.fillStyle = this.color;
          ctx.fill();
          ctx.closePath();
        },
        update: function () {
          this.velocity += this.gravity;
          this.y += this.velocity;
          if (this.y + this.radius > canvas.height) {
            this.y = canvas.height - this.radius;
          }
        },
        jump: function () {
          this.velocity = -this.jumpHeight;
        },
      };

let obstacles = [];
      class Obstacle {
        constructor(x, y, width, height, color) {
          this.x = x;
          this.y = y;
          this.width = width;
          this.height = height;
          this.color = color;
        }

draw() {
          ctx.beginPath();
          ctx.rect(this.x, this.y, this.width, this.height);
          ctx.fillStyle = this.color;
          ctx.fill();
          ctx.closePath();
        }

update() {
          this.x -= 2;
        }
      }

function createObstacle() {
        let x = canvas.width;
        let y = Math.random() * (canvas.height - 200);
        let width = 50;
        let height = Math.random() * 200 + 50;
        let color = "green";
        obstacles.push(new Obstacle(x, y, width, height, color));
      }

// Game loop
      function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        bird.draw();
        obstacles.forEach((obstacle) => {
          obstacle.draw();
        });
      }

function update() {
        bird.update();
        obstacles.forEach((obstacle) => {
          obstacle.update();
        });

// Check for collision
        obstacles.forEach((obstacle) => {
          if (
            bird.x < obstacle.x + obstacle.width &&
            bird.x + bird.radius > obstacle.x &&
            bird.y < obstacle.y + obstacle.height &&
            bird.y + bird.radius > obstacle.y
          ) {
            // Game over
            clearInterval(gameInterval);
            alert("Game over! Your Score: " + score);
          }
        });

// Remove off-screen obstacles
        obstacles = obstacles.filter(
          (obstacle) => obstacle.x + obstacle.width > 0
        );
      }

function jump() {
        bird.jump();
      }

function onTouch() {
        jump();
      }

function onMouseClick() {
        jump();
      }

// Event listeners
      document.addEventListener("touchstart", onTouch);
      document.addEventListener("mousedown", onMouseClick);

// Game setup
      let score = 0;
      let gameInterval;
      function startGame() {
        gameInterval = setInterval(() => {
          createObstacle();
          update();
          draw();
          score++;
        }, 20);
      }

startGame();
    </script>
  </body>
</html>