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

No:5769

3624

←

Prev Next

→

10 days with the bears. Farming together in the fi..ALL
Developer User3589｜Date and time 23/6/30 19:33:09
Build time 29.976 sec｜Game capacity 3.092KB｜

Script

では、以下に「クマと10日間」というゲームを作ってみましょう。

クマと10日間

このゲームでは、クマの要素がフィールド上でクリックするとその位置に移動します。また、収穫の成功率は50%で、収穫が成功すると「収穫成功！」と表示され、失敗すると「収穫失敗！」と表示されます。残りの日数は10日で、クリックするたびに1日ずつ減っていきます。日数が0になると「ゲーム終了」と表示されます。なお、この実装では収穫の結果はコンソールに表示されます。表示方法を変えたり、結果を画面に表示するように変更することも可能ですが、具体的な要件がないため、以上の実装でよろしいでしょうか。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

では、以下に「クマと10日間」というゲームを作ってみましょう。

```html
<!DOCTYPE html>
<html>
<head>
    <title>クマと10日間</title>
    <style>
        #field {
            width: 400px;
            height: 400px;
            border: 1px solid black;
            position: relative;
        }
        
        .kuma {
            font-size: 50px;
            position: absolute;
        }
    </style>
</head>
<body>
    <h1>クマと10日間</h1>
    <div id="field"></div>
    
    <script>
        window.addEventListener('DOMContentLoaded', (event) => {
            const field = document.getElementById('field');
            
            // クマの初期位置をランダムに設定
            let kumaLeft = Math.floor(Math.random() * (field.offsetWidth - 50));
            let kumaTop = Math.floor(Math.random() * (field.offsetHeight - 50));
            
            // クマの要素を生成して表示
            const kuma = document.createElement('div');
            kuma.classList.add('kuma');
            kuma.textContent = '🐻';
            kuma.style.left = kumaLeft + 'px';
            kuma.style.top = kumaTop + 'px';
            field.appendChild(kuma);
            
            let days = 10;
            
            // フィールド上でクリックしたときの動作を定義
            field.addEventListener('click', (event) => {
                if (days > 0) {
                    // クリックした位置にクマが移動
                    kumaLeft = event.clientX - field.getBoundingClientRect().left - 25;
                    kumaTop = event.clientY - field.getBoundingClientRect().top - 25;
                    kuma.style.left = kumaLeft + 'px';
                    kuma.style.top = kumaTop + 'px';
                    
                    // 収穫があるか判定
                    const harvest = Math.random() < 0.5;
                    if (harvest) {
                        console.log('収穫成功！');
                    } else {
                        console.log('収穫失敗！');
                    }
                    
                    days--;
                    console.log('残りの日数: ' + days);
                } else {
                    console.log('ゲーム終了');
                }
            });
        });
    </script>
</body>
</html>
```

なお、この実装では収穫の結果はコンソールに表示されます。表示方法を変えたり、結果を画面に表示するように変更することも可能ですが、具体的な要件がないため、以上の実装でよろしいでしょうか。