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

No:9065

131

←

Prev Next

→

Zelda Mario
Developer User4246｜Date and time 23/7/21 2:32:42
Build time 13.835 sec｜Game capacity 2.276KB｜

Script

了解しました。以下に、JavaScriptを含むHTMLファイルでゼルダマリオ風のシンプルなゲームを作成する例を示します。

Zelda Mario Game

👾

この例では、プレイヤーの移動にキーボードの方向キーを使用しています。プレイヤーの位置は`playerX`と`playerY`変数で追跡され、キーボードが押されるたびに更新されます。プレイヤーの位置は`top`と`left` CSSプロパティを使用して更新され、その位置に絵文字のプレイヤーが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

了解しました。以下に、JavaScriptを含むHTMLファイルでゼルダマリオ風のシンプルなゲームを作成する例を示します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Zelda Mario Game</title>
    <style>
        #player {
            position: absolute;
            top: 300px;
            left: 150px;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <h1>Zelda Mario Game</h1>
    <div id="player">👾</div>

// プレイヤーの移動処理
        function movePlayer(event) {
            const dx = 20; // 移動量

switch (event.key) {
                case 'ArrowUp':
                    if (playerY - dx >= 0) {
                        playerY -= dx;
                    }
                    break;
                case 'ArrowDown':
                    if (playerY + dx <= window.innerHeight - dx) {
                        playerY += dx;
                    }
                    break;
                case 'ArrowLeft':
                    if (playerX - dx >= 0) {
                        playerX -= dx;
                    }
                    break;
                case 'ArrowRight':
                    if (playerX + dx <= window.innerWidth - dx) {
                        playerX += dx;
                    }
                    break;
            }

// プレイヤーの位置を更新
            document.getElementById('player').style.top = playerY + 'px';
            document.getElementById('player').style.left = playerX + 'px';
        }

// キーボードの方向キーが押されたときにプレイヤーの移動処理を呼び出す
        window.addEventListener('keydown', movePlayer);
    </script>
</body>
</html>
```