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

No:13288

131

←

Prev Next

→

クレーンゲーム
Developer User5804｜Date and time 23/8/27 20:37:04
Build time 12.397 sec｜Game capacity 1.847KB｜

Script

了解しました。以下にクレーンゲームのプログラムを記述します。

クレーンゲーム

スマホの画面をタップするとクレーンが動きます。目標の文字を取ることができるでしょうか？

🏗️

🎯

このプログラムでは、クレーンゲームを実装しています。クレーンのアイコン(🏗️)をクリックすると、クレーンと目標の文字(🎯)の距離を計算し、近い場合はクリアと表示され、遠い場合は失敗と表示されます。

←

Prev　Next

→ 　

Back　

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

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>
        #crane {
            font-size: 80px;
            cursor: pointer;
        }
        #target {
            font-size: 60px;
        }
    </style>
</head>
<body>
    <h1>クレーンゲーム</h1>
    <p>スマホの画面をタップするとクレーンが動きます。目標の文字を取ることができるでしょうか？</p>
    <div id="crane">🏗️</div>
    <p id="target">🎯</p>

crane.addEventListener('click', function() {
                const craneX = crane.getBoundingClientRect().x + crane.offsetWidth / 2;
                const craneY = crane.getBoundingClientRect().y + crane.offsetHeight / 2;
                const targetX = target.getBoundingClientRect().x + target.offsetWidth / 2;
                const targetY = target.getBoundingClientRect().y + target.offsetHeight / 2;

const distance = Math.sqrt(Math.pow(craneX - targetX, 2) + Math.pow(craneY - targetY, 2));
                if (distance < 50) {
                    alert('クリア！');
                } else {
                    alert('失敗！');
                }
            });
        });
    </script>
</body>
</html>
```