AI game creator

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

No:10019

←

Prev Next

→

Dot Brave
Developer User4454｜Date and time 23/7/28 22:00:46
Build time 21.614 sec｜Game capacity 2.113KB｜

Script

了解です。では、ドット勇者というシンプルなゲームを実装してみましょう。

🧑

このプログラムは、画面に表示されるドット勇者をスマホの矢印キーで操作できるゲームです。プレイヤーの位置は、左上を基準に横方向と縦方向に移動していきます。プレイヤーを動かすたびに `transform` プロパティを使って位置を変更しています。ご参考までに、プレイヤーの位置更新部分のコードも以下に記載します。
以上が、ドット勇者というゲームの実装例です。お楽しみいただければ幸いです。

←

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-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #player {
            font-size: 5rem;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <span id="player">🧑</span>
    </div>
    <script>
        // プレイヤー要素の取得
        const player = document.getElementById("player");

// 初期位置を設定
        let x = 0;
        let y = 0;

// キーダウンイベントのリスナーを追加
        document.addEventListener("keydown", function(event) {
            const key = event.key;
            switch (key) {
                case "ArrowUp":
                    y -= 10;
                    break;
                case "ArrowDown":
                    y += 10;
                    break;
                case "ArrowLeft":
                    x -= 10;
                    break;
                case "ArrowRight":
                    x += 10;
                    break;
            }

// プレイヤーの位置を更新
            player.style.transform = `translate(${x}px, ${y}px)`;
        });
    </script>
</body>
</html>
```

このプログラムは、画面に表示されるドット勇者をスマホの矢印キーで操作できるゲームです。プレイヤーの位置は、左上を基準に横方向と縦方向に移動していきます。プレイヤーを動かすたびに `transform` プロパティを使って位置を変更しています。

ご参考までに、プレイヤーの位置更新部分のコードも以下に記載します。

```javascript
// プレイヤーの位置を更新
player.style.transform = `translate(${x}px, ${y}px)`;
```

以上が、ドット勇者というゲームの実装例です。お楽しみいただければ幸いです。