鬼ごっこをしてあそぶゲーム's game

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

No:20190

101

←

Prev Next

→

鬼ごっこをしてあそぶゲーム
Developer User8975｜Date and time 23/10/8 18:41:13
Build time 15.475 sec｜Game capacity 2.675KB｜

Script

了解です。以下に、スマートフォンで遊べる鬼ごっこのゲームを実装したHTMLファイルを示します。

👦

👹

このHTMLファイルを開くと、スマートフォンの画面上にプレイヤーと敵が表示されます。プレイヤーをタップするとゲームがスタートし、敵が左右に移動します。敵に触れてしまうとゲームオーバーになり、リロードして再度プレイすることができます。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、スマートフォンで遊べる鬼ごっこのゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鬼ごっこ</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #fafafa;
        }

#player {
            font-size: 4rem;
            cursor: pointer;
        }

#enemy {
            position: absolute;
            font-size: 4rem;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="player">👦</div>
    <div id="enemy">👹</div>

// クリックイベントの設定
            player.addEventListener('click', () => {
                if (enemy.style.display === 'none') {
                    alert('鬼ごっこスタート！');
                    enemy.style.display = 'block';
                } else {
                    alert('ゲームオーバー！');
                    location.reload();
                }
            });

// 敵の移動
            let isEnemyMovingRight = true;
            setInterval(() => {
                const enemyPosition = enemy.getBoundingClientRect();
                const enemyLeft = enemyPosition.left;
                const enemyWidth = enemyPosition.width;
                const screenWidth = window.innerWidth;

if (isEnemyMovingRight) {
                    if (enemyLeft + enemyWidth + 10 < screenWidth) {
                        enemy.style.left = `${enemyLeft + 10}px`;
                    } else {
                        isEnemyMovingRight = false;
                    }
                } else {
                    if (enemyLeft > 10) {
                        enemy.style.left = `${enemyLeft - 10}px`;
                    } else {
                        isEnemyMovingRight = true;
                    }
                }
            }, 100);
        });
    </script>
</body>
</html>
```