Recrea el juego angry birds's game

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

No:40357

←

Prev Next

→

Recrea el juego angry birds
Developer User18058｜Date and time 24/2/2 9:25:23
Build time 15.921 sec｜Game capacity 4.606KB｜

Script

Score: 0

Swipe left or right to move the bird and hit the pigs!

←

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>
        #game-container{
            position: relative;
            width: 500px;
            height: 500px;
            background-color: #9C9C9C;
            margin: 0 auto;
            overflow: hidden;
        }
        #bird {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 50px;
            background-image: url('bird.png');
            background-size: cover;
        }
        .pig {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-image: url('pig.png');
            background-size: cover;
        }
        .block {
            position: absolute;
            bottom: 0;
            width: 50px;
            height: 50px;
            background-image: url('block.png');
            background-size: cover;
        }
        #score {
            text-align: center;
        }
        #instructions {
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="bird"></div>
        <div class="pig" style="bottom: 100px; left: 200px;"></div>
        <div class="pig" style="bottom: 100px; left: 300px;"></div>
        <div class="block" style="bottom: 200px; left: 250px;"></div>
        <div class="block" style="bottom: 200px; left: 350px;"></div>
    </div>
    <div id="score">Score: 0</div>
    <div id="instructions">Swipe left or right to move the bird and hit the pigs!</div>

var xPos = 0;
        var yPos = 0;
        var birdWidth = 50;
        var containerWidth = container.offsetWidth;
        var isPlaying = false;

function checkCollision() {
            for (var i = 0; i < pigs.length; i++) {
                var pig = pigs[i];
                var birdRect = bird.getBoundingClientRect();
                var pigRect = pig.getBoundingClientRect();

if (birdRect.bottom >= pigRect.top && birdRect.left <= pigRect.right && birdRect.right >= pigRect.left) {
                    score++;
                    scoreDisplay.textContent = "Score: " + score;
                    pig.style.display = "none";
                }
            }
        }

var birdRect = bird.getBoundingClientRect();

if (birdRect.bottom > 0) {
                    bird.style.bottom = (yPos += 2) + "px";
                    checkCollision();
                } else {
                    isPlaying = false;
                }
            }

requestAnimationFrame(gameLoop);
        }

container.addEventListener('mousemove', moveBird);
        container.addEventListener('touchmove', function(event) {
            moveBird(event.touches[0]);
        });

requestAnimationFrame(gameLoop);
    </script>
</body>
</html>