Crossing the line game's game

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

No:7253

4569

←

Prev Next

→

Crossing the line game
Developer User3992｜Date and time 23/7/6 16:58:59
Build time 18.624 sec｜Game capacity 2.35KB｜

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>
        #player {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div id="player">🙂</div>

// プレイヤーの初期位置
        let posX = window.innerWidth / 2;
        let posY = window.innerHeight / 2;

// プレイヤーが画面外に出たかのフラグ
        let isOutOfBounds = false;

// キーダウンイベントのリスナー
        window.addEventListener('keydown', (event) => {
            if (isOutOfBounds) return;  // 画面外に出た時は操作を受け付けない

// キーコードに基づいてプレイヤーの移動量を設定
            let moveX = 0;
            let moveY = 0;
            switch (event.keyCode) {
                case 37: // 左
                    moveX = -10;
                    break;
                case 38: // 上
                    moveY = -10;
                    break;
                case 39: // 右
                    moveX = 10;
                    break;
                case 40: // 下
                    moveY = 10;
                    break;
            }

// プレイヤーの座標を更新
            posX += moveX;
            posY += moveY;

// プレイヤーが画面外に出た場合の処理
            if (posX < 0 || posX > window.innerWidth || posY < 0 || posY > window.innerHeight) {
                isOutOfBounds = true;
                player.style.color = 'red';
                player.textContent = '😵';
            }

// プレイヤーの位置を更新
            player.style.left = posX + 'px';
            player.style.top = posY + 'px';
        });
    </script>
</body>
</html>
```