AI game creator

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

No:5143

716

←

Prev Next

→

Spy, Shooting
Developer User3818｜Date and time 23/6/29 19:31:26
Build time 29.808 sec｜Game capacity 3.263KB｜

Script

了解です。では、スマホ操作を前提としたシューティングゲームを作成してみましょう。プレイヤーは「😎」の絵文字で表現され、敵は「👾」の絵文字で表現されます。以下がゲームの実装例です。

😎

このゲームでは、スマホの傾きを利用してプレイヤーを動かし、一定間隔で敵が生成されます。プレイヤーと敵が重なると敵が消えるようになっています。ご参考までにお試しください。もしご希望のゲームがありましたら、お知らせください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

了解です。では、スマホ操作を前提としたシューティングゲームを作成してみましょう。プレイヤーは「😎」の絵文字で表現され、敵は「👾」の絵文字で表現されます。

以下がゲームの実装例です。

```html
<!DOCTYPE html>
<html>
<head>
    <title>シューティングゲーム</title>
    <style>
        #game-board {
            position: relative;
            width: 100vw;
            height: 100vh;
            overflow: hidden;
        }
        #player {
            position: absolute;
            font-size: 3rem;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        .enemy {
            position: absolute;
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <div id="game-board">
        <div id="player">😎</div>
    </div>
    <script>
        const player = document.getElementById('player');
        const gameBoard = document.getElementById('game-board');

let playerX = 0;
        let playerY = 0;

// プレイヤーの移動処理
        window.addEventListener('deviceorientation', handleOrientation);

function handleOrientation(event) {
            const x = event.gamma;  // x軸の傾き
            const y = event.beta;   // y軸の傾き

playerX = clamp(playerX + x, 0, gameBoard.clientWidth - player.clientWidth);
            playerY = clamp(playerY + y, 0, gameBoard.clientHeight - player.clientHeight);

player.style.left = playerX + 'px';
            player.style.top = playerY + 'px';
        }

// 敵の生成処理
        setInterval(() => {
            const enemy = document.createElement('div');
            enemy.classList.add('enemy');
            enemy.innerText = '👾';
            enemy.style.left = Math.random() * (gameBoard.clientWidth - enemy.clientWidth) + 'px';
            enemy.style.top = Math.random() * (gameBoard.clientHeight - enemy.clientHeight) + 'px';
            gameBoard.appendChild(enemy);
        }, 1000);

// 当たり判定処理
        setInterval(() => {
            const enemies = document.getElementsByClassName('enemy');

Array.from(enemies).forEach(enemy => {
                if (isColliding(player, enemy)) {
                    enemy.remove();
                }
            });
        }, 100);

function isColliding(elem1, elem2) {
            const rect1 = elem1.getBoundingClientRect();
            const rect2 = elem2.getBoundingClientRect();

return !(
                rect1.top > rect2.bottom ||
                rect1.right < rect2.left ||
                rect1.bottom < rect2.top ||
                rect1.left > rect2.right
            );
        }

function clamp(value, min, max) {
            return Math.min(Math.max(value, min), max);
        }
    </script>
</body>
</html>
```

このゲームでは、スマホの傾きを利用してプレイヤーを動かし、一定間隔で敵が生成されます。プレイヤーと敵が重なると敵が消えるようになっています。

ご参考までにお試しください。もしご希望のゲームがありましたら、お知らせください。