かわいいトカゲ's game

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

No:31396

←

Prev Next

→

かわいいトカゲ
Developer User15123｜Date and time 23/12/26 18:26:26
Build time 25.191 sec｜Game capacity 2.353KB｜

Script

了解です。では、かわいいトカゲのゲームを作りましょう。

🦎

このコードは、HTMLの中にゲームエリアとトカゲの表示を行う要素を作成し、JavaScriptでトカゲの移動を制御しています。ゲームエリアは黄色の四角で表示され、トカゲは🦎の絵文字で表示されます。トカゲの移動はキーボードの矢印キーで行えます。上キーで上に、下キーで下に、左キーで左に、右キーで右に移動します。このコードをHTMLファイルに保存し、ブラウザで開くとかわいいトカゲのゲームが遊べます。

←

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-area {
      width: 300px;
      height: 300px;
      background-color: yellow;
      position: relative;
    }
    #lizard {
      font-size: 30px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="game-area">
    <div id="lizard">🦎</div>
  </div>

function moveLizard(direction) {
        const currentLeft = parseInt(lizard.style.left);
        const currentTop = parseInt(lizard.style.top);

switch (direction) {
          case 'up':
            lizard.style.top = (currentTop - 10) + 'px';
            break;
          case 'down':
            lizard.style.top = (currentTop + 10) + 'px';
            break;
          case 'left':
            lizard.style.left = (currentLeft - 10) + 'px';
            break;
          case 'right':
            lizard.style.left = (currentLeft + 10) + 'px';
            break;
        }
      }

document.addEventListener('keydown', function(event) {
        switch (event.key) {
          case 'ArrowUp':
            moveLizard('up');
            break;
          case 'ArrowDown':
            moveLizard('down');
            break;
          case 'ArrowLeft':
            moveLizard('left');
            break;
          case 'ArrowRight':
            moveLizard('right');
            break;
        }
      });
    });
  </script>
</body>
</html>
```

このコードは、HTMLの中にゲームエリアとトカゲの表示を行う要素を作成し、JavaScriptでトカゲの移動を制御しています。ゲームエリアは黄色の四角で表示され、トカゲは🦎の絵文字で表示されます。

トカゲの移動はキーボードの矢印キーで行えます。上キーで上に、下キーで下に、左キーで左に、右キーで右に移動します。

このコードをHTMLファイルに保存し、ブラウザで開くとかわいいトカゲのゲームが遊べます。