electromagnetic catapult's game

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

No:7398

3238

←

Prev Next

→

electromagnetic catapult
Developer User3997｜Date and time 23/7/7 13:56:52
Build time 17.553 sec｜Game capacity 4.263KB｜

Script

以下は、HTML上で動作するシンプルな電磁式カタパルトのゲームの実装例です。カタパルトを弾かせ、的に当てることを目指して遊ぶことができます。

このプログラムでは、カタパルトと弾がドラッグ操作によって動かせるようになっています。カタパルトをタッチして左右に動かし、弾をタッチして上に発射します。的に弾が当たるかどうかを判定し、結果をアラートで表示します。ただし、上記の例では絵文字を使用しておらず、絵文字を使用したゲームであるかどうかは不明です。また、ゲーム全体としての機能やデザインについての具体的な要件が不明のため、要件に合わせた修正や更新が必要かもしれません。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>電磁式カタパルト</title>
    <style>
        #catapult {
            width: 300px;
            height: 50px;
            background-color: gray;
            position: relative;
        }
        #projectile {
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
            top: -50px;
        }
        #target {
            width: 50px;
            height: 50px;
            background-color: blue;
            position: absolute;
            bottom: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div id="catapult">
        <div id="projectile"></div>
    </div>
    <div id="target"></div>
    <script>
        // カタパルトと的の初期位置
        let catapultX = 0;
        let projectileY = -50;
        let targetX = 0;
        
        // カタパルトのドラッグ操作の処理
        const catapult = document.getElementById("catapult");
        let isDragging = false;
        let prevX = 0;
        catapult.addEventListener("touchstart", function(event) {
            isDragging = true;
            prevX = event.touches[0].clientX;
        });
        catapult.addEventListener("touchmove", function(event) {
            if (isDragging) {
                const deltaX = event.touches[0].clientX - prevX;
                catapultX += deltaX;
                prevX = event.touches[0].clientX;
                catapult.style.left = catapultX + "px";
            }
        });
        catapult.addEventListener("touchend", function(event) {
            isDragging = false;
        });
        
        // 弾の発射
        const projectile = document.getElementById("projectile");
        projectile.addEventListener("touchstart", function(event) {
            const launchInterval = setInterval(function() {
                if (projectileY >= 0) {
                    projectileY -= 5;
                    projectile.style.top = projectileY + "px";
                } else {
                    clearInterval(launchInterval);
                    // 当たり判定のチェック
                    const target = document.getElementById("target");
                    if (Math.abs(targetX - catapultX) <= 10) {
                        alert("当たり！おめでとう！");
                    } else {
                        alert("ミス！もう一回頑張ろう！");
                    }
                    // 初期位置に戻す
                    projectileY = -50;
                    projectile.style.top = projectileY + "px";
                }
            }, 10);
        });
        
        // 的のドラッグ操作の処理
        const target = document.getElementById("target");
        target.addEventListener("touchstart", function(event) {
            isDragging = true;
            prevX = event.touches[0].clientX;
        });
        target.addEventListener("touchmove", function(event) {
            if (isDragging) {
                const deltaX = event.touches[0].clientX - prevX;
                targetX += deltaX;
                prevX = event.touches[0].clientX;
                target.style.left = targetX + "px";
            }
        });
        target.addEventListener("touchend", function(event) {
            isDragging = false;
        });
    </script>
</body>
</html>
```

このプログラムでは、カタパルトと弾がドラッグ操作によって動かせるようになっています。カタパルトをタッチして左右に動かし、弾をタッチして上に発射します。的に弾が当たるかどうかを判定し、結果をアラートで表示します。

ただし、上記の例では絵文字を使用しておらず、絵文字を使用したゲームであるかどうかは不明です。また、ゲーム全体としての機能やデザインについての具体的な要件が不明のため、要件に合わせた修正や更新が必要かもしれません。