3D　三角関数　球　立体　影's game

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

No:39895

153

←

Prev Next

→

3D　三角関数　球　立体　影
Developer 食べる鶏と熱いタバスコ｜Date and time 24/1/30 19:08:30
Build time 12.398 sec｜Game capacity 2.371KB｜

Script

了解いたしました。以下に、要件を満たすプログラムの例を示します。

このプログラムは、スマートフォンの傾きを検知して、球を画面上で動かすゲームです。ブラウザでこのファイルを開くと、スマートフォンを傾けることで球を操作することができます。球は3Dのアニメーションがかかっており、回転しながら動きます。この例では、`window.addEventListener('mousemove', handleOrientation);` によってデバイスの傾きを監視し、`handleOrientation` 関数で傾きを反映させています。`translateX` と `translateY` スタイルを使用して球の位置を制御しています。上記のコードを1枚のHTMLファイルに保存し、ブラウザで開くことでゲームを遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

了解いたしました。以下に、要件を満たすプログラムの例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>3Dトリッキーゲーム</title>
    <style>
        #game-container {
            width: 100vw;
            height: 100vh;
            background-color: #222;
            display: flex;
            justify-content: center;
            align-items: center;
        }

#ball {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: #ff7f00;
            position: absolute;
            left: 50vw;
            top: 50vh;
            transform-style: preserve-3d;
            animation: spin 3s infinite linear;
        }

@keyframes spin {
            0% {
                transform: translateZ(0) rotateX(0deg) rotateY(0deg);
            }
            100% {
                transform: translateZ(-500px) rotateX(360deg) rotateY(360deg);
            }
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="ball"></div>
    </div>

function handleOrientation(event) {
            var ball = document.getElementById("ball");
            var beta = event.beta; // 上下の傾斜
            var gamma = event.gamma; // 左右の傾斜

// 傾斜を球の位置に反映
            ball.style.transform = "translateX(" + gamma * 2 + "px) translateY(" + beta * 2 + "px)";
        }
    </script>
</body>
</html>
```

このプログラムは、スマートフォンの傾きを検知して、球を画面上で動かすゲームです。ブラウザでこのファイルを開くと、スマートフォンを傾けることで球を操作することができます。球は3Dのアニメーションがかかっており、回転しながら動きます。

この例では、`window.addEventListener('deviceorientation', handleOrientation);` によってデバイスの傾きを監視し、`handleOrientation` 関数で傾きを反映させています。`translateX` と `translateY` スタイルを使用して球の位置を制御しています。

上記のコードを1枚のHTMLファイルに保存し、ブラウザで開くことでゲームを遊ぶことができます。