Palace of the Dragon King's game

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

No:4998

689

←

Prev Next

→

Palace of the Dragon King
Developer User3806｜Date and time 23/6/29 6:28:46
Build time 19.289 sec｜Game capacity 1.702KB｜

Script

は、ゲームとして遊べるHTMLファイルを作成します。

🐉

このHTMLファイルでは、スマホの傾きを検出して、表示されているドラゴンが傾くというゲームを実装しています。スマートフォンでこのHTMLファイルを開くと、ドラゴンが表示され、スマホを傾けるとドラゴンも傾くようになります。スマホの傾きを検出するために、`mousemove`イベントを使用しています。このイベントはスマホが傾いた時に発火し、イベントオブジェクトには傾きの情報が含まれます。傾きの値を取得して、`rotateX`と`rotateY`のCSSプロパティを設定することで、ドラゴンの傾きをコントロールしています。このように、絵文字やJavaScriptを活用して、スマホで遊べるゲームを作成することができます。

←

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>
        #game {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 3em;
        }
    </style>
</head>
<body>
    <div id="game">
        🐉
    </div>
    <script>
        window.addEventListener('deviceorientation', handleOrientation);

function handleOrientation(event) {
            const dragon = document.getElementById('game');
            const tiltLR = event.gamma;
            const tiltFB = event.beta;

dragon.style.transform = `rotateX(${tiltFB}deg) rotateY(${tiltLR}deg)`;
        }
    </script>
</body>
</html>
```

このHTMLファイルでは、スマホの傾きを検出して、表示されているドラゴンが傾くというゲームを実装しています。スマートフォンでこのHTMLファイルを開くと、ドラゴンが表示され、スマホを傾けるとドラゴンも傾くようになります。

スマホの傾きを検出するために、`deviceorientation`イベントを使用しています。このイベントはスマホが傾いた時に発火し、イベントオブジェクトには傾きの情報が含まれます。傾きの値を取得して、`rotateX`と`rotateY`のCSSプロパティを設定することで、ドラゴンの傾きをコントロールしています。

このように、絵文字やJavaScriptを活用して、スマホで遊べるゲームを作成することができます。