AI game creator

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

No:11013

←

Prev Next

→

angry bird
Developer User1006｜Date and time 23/8/6 15:46:35
Build time 16.617 sec｜Game capacity 2.021KB｜

Script

了解です。以下にアングリーバードのゲームのプログラムを示します。

このプログラムでは、黄色い円がバードのキャラクターを表しており、タッチ操作（スマホ操作）によってバードが上に移動します。また、バードは底面に当たると跳ね返るような動きも実装されています。各位置や動きのパラメータは変数として用意されており、必要に応じて調整することができます。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解です。以下にアングリーバードのゲームのプログラムを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>アングリーバード</title>
    <style>
        #container {
            position: relative;
            width: 300px;
            height: 400px;
            border: 1px solid black;
        }
        #bird {
            position: absolute;
            top: 180px;
            left: 10px;
            width: 40px;
            height: 40px;
            background: yellow;
            border-radius: 50%;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="bird"></div>
    </div>
    
    <script>
        var bird = document.getElementById("bird");
        var container = document.getElementById("container");
        var startPosX = 10;
        var startPosY = 180;
        var speedX = 0;
        var speedY = 0;
        var gravity = 0.1;
        
        function update() {
            speedY += gravity;
            startPosX += speedX;
            startPosY += speedY;
            
            if (startPosY + bird.offsetHeight >= container.offsetHeight) {
                startPosY = container.offsetHeight - bird.offsetHeight;
                speedY = -speedY;
            }
            
            bird.style.left = startPosX + "px";
            bird.style.top = startPosY + "px";
            
            requestAnimationFrame(update);
        }
        
        update();
        
        document.addEventListener("touchstart", function() {
            speedY = -3;
        });

</script>
</body>
</html>
```