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

No:7760

590

Looking at the controller upside down
Developer o2pi4｜Date and time 23/7/9 20:06:23
Build time 11.258 sec｜Game capacity 2.523KB｜

ゲームのキャラクターが逆さまに操作されるというテーマでゲームを作成します。以下のコードを1枚のhtmlファイルに実装してください。

逆さまコントローラーゲーム

スマホの画面を逆さにしてキャラクターを操作しましょう！

👾

このゲームでは、スマホの加速度センサーを使用して、スマホを逆さまにすることでキャラクターを操作します。画面の中央に表示されたキャラクターをスマホを逆さまに傾けることで、左右や上下に移動させることができます。キャラクターは絵文字の👾を使用しており、スマホを動かすとキャラクターが動いている様子が見えます。このプログラムでは、`mousemove`イベントを使用してスマホの加速度センサーの値を取得し、その値に基づいてキャラクターの位置を更新しています。`handleMotion`関数では、加速度センサーのx軸とy軸の値を取得して、それぞれの値を位置情報に変換しています。`calculateTranslation`関数では、加速度の値をパーセンテージに変換して、移動距離を指定するための文字列を生成しています。このゲームはスマホの操作を前提としているため、スマホで実行することを推奨します。スマホの加速度センサーの値に基づいてキャラクターが動く様子を楽しんでください。

→ 　

2　

1　

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

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

(C)2023 HisashiApp

ゲームのキャラクターが逆さまに操作されるというテーマでゲームを作成します。以下のコードを1枚のhtmlファイルに実装してください。

```html
<!DOCTYPE html>
<html>
<head>
    <title>逆さまコントローラーゲーム</title>
    <style>
        #character {
            font-size: 50px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <h1>逆さまコントローラーゲーム</h1>
    <p>スマホの画面を逆さにしてキャラクターを操作しましょう！</p>
    <div id="character">👾</div>

<script>
        window.addEventListener('devicemotion', handleMotion);

function handleMotion(event) {
            var x = event.accelerationIncludingGravity.x;
            var y = event.accelerationIncludingGravity.y;

document.getElementById('character').style.transform = 'translate(' + calculateTranslation(y) + ', ' + calculateTranslation(x) + ')';
        }

function calculateTranslation(value) {
            var maxTranslation = 50;
            var translation = (value / 9.8) * maxTranslation;

return translation + '%';
        }
    </script>
</body>
</html>
```

このゲームでは、スマホの加速度センサーを使用して、スマホを逆さまにすることでキャラクターを操作します。画面の中央に表示されたキャラクターをスマホを逆さまに傾けることで、左右や上下に移動させることができます。

キャラクターは絵文字の👾を使用しており、スマホを動かすとキャラクターが動いている様子が見えます。

このプログラムでは、`devicemotion`イベントを使用してスマホの加速度センサーの値を取得し、その値に基づいてキャラクターの位置を更新しています。`handleMotion`関数では、加速度センサーのx軸とy軸の値を取得して、それぞれの値を位置情報に変換しています。`calculateTranslation`関数では、加速度の値をパーセンテージに変換して、移動距離を指定するための文字列を生成しています。

このゲームはスマホの操作を前提としているため、スマホで実行することを推奨します。スマホの加速度センサーの値に基づいてキャラクターが動く様子を楽しんでください。