AI game creator

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

No:20382

←

Prev Next

→

Angry birds
Developer User9027｜Date and time 23/10/9 10:17:31
Build time 11.424 sec｜Game capacity 2.128KB｜

Script

// Enclose the JavaScript code within script tags

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Angry Birds Game</title>
    <style>
        canvas {
            border: 2px solid black;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="600" height="400"></canvas>

var birdImage = new Image();
birdImage.src = "bird.png";

var pigImage = new Image();
pigImage.src = "pig.png";

var brickImage = new Image();
brickImage.src = "brick.png";

var birdX = 100;
var birdY = 200;
var birdSpeedY = 0;

var pigs = [
  { x: 400, y: 350 },
  { x: 450, y: 300 },
  { x: 500, y: 350 }
];

var bricks = [
  { x: 200, y: 350 },
  { x: 250, y: 300 },
  { x: 300, y: 350 }
];

function updateGameArea() {
  context.clearRect(0, 0, canvas.width, canvas.height);

// Move the bird based on the touch events
  canvas.addEventListener("touchstart", jump);
  birdY += birdSpeedY;
  birdSpeedY += 1;

// Draw the bird
  context.drawImage(birdImage, birdX, birdY, 50, 50);

// Draw the pigs
  pigs.forEach(function(pig) {
    context.drawImage(pigImage, pig.x, pig.y, 50, 50);

// Check for collision between bird and pig
    if (
      birdX < pig.x + 50 &&
      birdX + 50 > pig.x &&
      birdY < pig.y + 50 &&
      birdY + 50 > pig.y
    ) {
      birdSpeedY = -15; // Bird jumps up on collision
    }
  });

// Draw the bricks
  bricks.forEach(function(brick) {
    context.drawImage(brickImage, brick.x, brick.y, 50, 50);

// Check for collision between bird and brick
    if (
      birdX < brick.x + 50 &&
      birdX + 50 > brick.x &&
      birdY < brick.y + 50 &&
      birdY + 50 > brick.y
    ) {
      birdSpeedY = -15; // Bird jumps up on collision
    }
  });

requestAnimationFrame(updateGameArea);
}

function jump() {
  birdSpeedY = -15; // Bird jumps up on touch event
}

// Start the game
birdImage.onload = function() {
  requestAnimationFrame(updateGameArea);
};
    </script>
</body>
</html>