アクションゲーム！'s game

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

No:13710

←

Prev Next

→

アクションゲーム！
Developer User6006｜Date and time 23/8/29 16:43:32
Build time 14.947 sec｜Game capacity 1.988KB｜

Script

了解です。以下にJavaScriptを含むHTMLファイルで実装したアクションゲームの例を示します。

😀

このゲームはスマートフォン操作に対応しており、矢印キーで画面内のキャラクターを移動させることができます。キャラクターは絵文字の「😀」で表示され、画面中央からスタートします。キー操作に応じてキャラクターの位置が変化し、毎フレーム表示位置が更新される仕組みです。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下にJavaScriptを含むHTMLファイルで実装したアクションゲームの例を示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Action Game</title>
    <style>
      #player {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <div id="player">😀</div>

// キーボード操作時の動作
      document.addEventListener('keydown', (event) => {
        if (event.key === 'ArrowUp') {
          playerY -= speed;
        } else if (event.key === 'ArrowDown') {
          playerY += speed;
        } else if (event.key === 'ArrowLeft') {
          playerX -= speed;
        } else if (event.key === 'ArrowRight') {
          playerX += speed;
        }
        updatePlayerPosition();
      });

// キャラクターの表示位置を更新
      function updatePlayerPosition() {
        let player = document.getElementById('player');
        player.style.left = playerX + 'px';
        player.style.top = playerY + 'px';
      }
      
      // ゲームループ
      function gameLoop() {
        updatePlayerPosition();
        requestAnimationFrame(gameLoop); // 次のフレームの描画をリクエスト
      }

// ゲームの開始
      gameLoop();
    </script>
  </body>
</html>
```