You can see many things in an x-ray 🩻.'s game

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

No:5314

8152

←

Prev Next

→

You can see many things in an x-ray 🩻.
Developer anonymous｜Date and time 70/1/1 9:56:32
Build time unknown sec｜Game capacity 3.392KB｜

Script

以下は、ゲームの例です。プレーヤーはスマホを傾けることでアバターを操作し、画面内のキャラクターを回収しながら進んでいくゲームです。

🧑

このゲームでは、アバター（🧑）をスマホの傾きで操作し、キャラクター（🐱）を回収することが目標です。スマホの傾きを検知するために、`mousemove` イベントを使用しています。アバターの移動速度や生成するキャラクターの絵文字など、ゲームの要素はカスタマイズ可能です。

←

Prev　Next

→ 　

Back　

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

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

以下は、ゲームの例です。プレーヤーはスマホを傾けることでアバターを操作し、画面内のキャラクターを回収しながら進んでいくゲームです。

```html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #player {
        position: fixed;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 30px;
    }
    .character {
        position: absolute;
        font-size: 30px;
    }
</style>
</head>
<body>
    <div id="player">🧑</div>

// アバターの初期位置をセット
        let playerX = window.innerWidth / 2;

// アバターの移動処理
        function movePlayer(event) {
            const x = event.gamma; // スマホの傾きを取得
            playerX += x * speed;

// アバターの位置を更新
            player.style.left = playerX + 'px';

// キャラクターとの当たり判定
            for (let i = 0; i < characters.length; i++) {
                const character = characters[i];
                if (isCollision(player, character)) {
                    character.remove(); // キャラクターを回収

// スコアの更新などのゲームロジックを追加
                }
            }
        }

// 二つの要素が当たっているか判定
        function isCollision(element1, element2) {
            const rect1 = element1.getBoundingClientRect();
            const rect2 = element2.getBoundingClientRect();
            return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
        }

// キャラクターを生成して画面内に配置
        function createCharacter() {
            const character = document.createElement('div');
            character.innerHTML = '🐱'; // 絵文字を使ってキャラクターを描画
            character.classList.add('character');

// 適当な位置に配置
            const x = Math.floor(Math.random() * (window.innerWidth - 100)) + 50;
            const y = Math.floor(Math.random() * (window.innerHeight - 100)) + 50;
            character.style.left = x + 'px';
            character.style.top = y + 'px';

document.body.appendChild(character);
        }

// 初期化
        function init() {
            // 画面をタッチした時にキャラクターを生成
            document.body.addEventListener('click', createCharacter);

// スマホの傾きを検出してアバターを移動
            window.addEventListener('deviceorientation', movePlayer);
        }

init();
    </script>
</body>
</html>
```

このゲームでは、アバター（🧑）をスマホの傾きで操作し、キャラクター（🐱）を回収することが目標です。スマホの傾きを検知するために、`deviceorientation` イベントを使用しています。アバターの移動速度や生成するキャラクターの絵文字など、ゲームの要素はカスタマイズ可能です。