ひよこラジコンであそぶもかちゃん🐥's game

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

No:16242

144

←

Prev Next

→

ひよこラジコンであそぶもかちゃん🐥
Developer おまめちゃん｜Date and time 23/9/16 20:43:28
Build time 16.794 sec｜Game capacity 1.719KB｜

Script

了解です！では、ひよこラジコンで遊ぶゲームを作成します。以下のコードを1枚のHTMLファイルに記述してください。

🐥

このHTMLファイルをブラウザで開くと、画面中央にひよこの絵文字が表示されます。キーボードの矢印キーを押すと、ひよこの位置が移動します。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

了解です！では、ひよこラジコンで遊ぶゲームを作成します。

以下のコードを1枚のHTMLファイルに記述してください。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>ひよこラジコンであそぶもかちゃん</title>
    <style>
        #game {
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 100px;
        }
    </style>
</head>
<body>
    <div id="game">
        🐥
    </div>

switch (e.key) {
                case 'ArrowUp':
                    y -= 1;
                    break;
                case 'ArrowDown':
                    y += 1;
                    break;
                case 'ArrowLeft':
                    x -= 1;
                    break;
                case 'ArrowRight':
                    x += 1;
                    break;
                default:
                    return;
            }

const game = document.getElementById('game');
            const rect = game.getBoundingClientRect();
            const xPos = rect.left + x * 10;
            const yPos = rect.top + y * 10;

game.style.left = xPos + 'px';
            game.style.top = yPos + 'px';
        });
    </script>
</body>
</html>
```

このHTMLファイルをブラウザで開くと、画面中央にひよこの絵文字が表示されます。キーボードの矢印キーを押すと、ひよこの位置が移動します。