Game of shooting at a target with a bow and arrow's game

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

No:5175

617

←

Prev Next

→

Game of shooting at a target with a bow and arrow
Developer もちきなこ｜Date and time 23/6/29 20:02:33
Build time 25.996 sec｜Game capacity 2.737KB｜

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>
        #target {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        #arrow {
            width: 20px;
            height: 100px;
            background-color: red;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            transition: transform 1s;
        }
    </style>
</head>
<body>
    <div id="target"></div>
    <div id="arrow"></div>
    
    <script>
        // ターゲットの位置をランダムに設定
        var target = document.getElementById("target");
        target.style.top = Math.random() * window.innerHeight + "px";
        target.style.left = Math.random() * window.innerWidth + "px";
        
        // 弓矢の初期位置を設定
        var arrow = document.getElementById("arrow");
        
        // スマホの傾きにより弓矢の位置を更新
        window.addEventListener("deviceorientation", function(event) {
            var y = event.beta; // 前後の傾き（-180から180の範囲）
            var x = event.gamma; // 左右の傾き（-90から90の範囲）
            
            var arrowRotation = Math.min(Math.max(x, -90), 90);
            arrow.style.transform = "rotate(" + arrowRotation + "deg)";
        });
        
        // ターゲットと弓矢の当たり判定をチェック
        setInterval(function() {
            var targetRect = target.getBoundingClientRect();
            var arrowRect = arrow.getBoundingClientRect();
            
            if (targetRect.left < arrowRect.right
                && targetRect.right > arrowRect.left
                && targetRect.top < arrowRect.bottom
                && targetRect.bottom > arrowRect.top) {
                // 的に当たった場合、ターゲットの位置を再設定
                target.style.top = Math.random() * window.innerHeight + "px";
                target.style.left = Math.random() * window.innerWidth + "px";
            }
        }, 10);
    </script>
</body>
</html>
```