Japanese card game where the 7 card is special's game

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

No:7520

1258

←

Prev Next

→

Japanese card game where the 7 card is special
Developer User4049｜Date and time 23/7/8 12:44:59
Build time 18.826 sec｜Game capacity 3.075KB｜

Script

了解しました。セブンブリッジというゲームを作成します。

このプログラムでは、セブンブリッジというゲームを実装しています。プレイヤー（赤いボックス）をスマホの傾きで操作し、ゴール（緑のボックス）に到達することが目標です。スマホの傾き情報を取得するために、`mousemove`イベントを利用しています。プレイヤーの位置を傾きに応じて更新し、ゴールに到達した場合には「CLEAR!」と表示し、ゴールの背景色を変更する処理も追加しています。上記のコードを1枚のHTMLファイルとして保存し、スマホのブラウザで開くとセブンブリッジのゲームがプレイできます。

←

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>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#container {
            display: flex;
            flex-direction: column;
        }

#bridge {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

.bridge {
            width: 50px;
            height: 10px;
            background-color: gray;
        }

#player {
            width: 50px;
            height: 50px;
            background-color: red;
        }

#goal {
            width: 50px;
            height: 50px;
            background-color: green;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="bridge">
            <div class="bridge"></div>
            <div class="bridge"></div>
            <div class="bridge"></div>
            <div class="bridge"></div>
            <div class="bridge"></div>
            <div class="bridge"></div>
            <div class="bridge"></div>
        </div>
        <div id="player"></div>
        <div id="goal"></div>
    </div>

function handleOrientation(event) {
            const bridgeArray = document.getElementsByClassName("bridge");
            const player = document.getElementById("player");
            const goal = document.getElementById("goal");

const x = event.gamma; // X軸の傾き
            const maxX = window.innerWidth - player.offsetWidth;

const index = Math.max(Math.min(Math.floor(x / 10), bridgeArray.length - 1), 0);
            const selectedBridge = bridgeArray[index];

player.style.left = (selectedBridge.offsetLeft + selectedBridge.offsetWidth / 2 - player.offsetWidth / 2) + "px";

if (selectedBridge === goal) {
                goal.innerHTML = "CLEAR!";
                goal.style.backgroundColor = "gold";

window.removeEventListener('deviceorientation', handleOrientation);
            }
        }
    </script>
</body>
</html>
```

このプログラムでは、セブンブリッジというゲームを実装しています。プレイヤー（赤いボックス）をスマホの傾きで操作し、ゴール（緑のボックス）に到達することが目標です。

スマホの傾き情報を取得するために、`deviceorientation`イベントを利用しています。プレイヤーの位置を傾きに応じて更新し、ゴールに到達した場合には「CLEAR!」と表示し、ゴールの背景色を変更する処理も追加しています。

上記のコードを1枚のHTMLファイルとして保存し、スマホのブラウザで開くとセブンブリッジのゲームがプレイできます。