ストリートファイターシリーズが基盤の格闘ゲーム's game | AI game creator

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

No:25684

98

ストリートファイターシリーズが基盤の格闘ゲーム
Developer User12620｜Date and time 23/11/23 22:43:42
Build time 147.312 sec｜Game capacity 2.92KB｜

了解です。以下にストリートファイターシリーズを基盤にした格闘ゲームのHTMLファイルの実装例を示します。

このHTMLファイルでは、2つのキャラクター（プレイヤーと敵）が対戦する格闘ゲームを実装しています。プレイヤーは矢印キー（左右）で操作し、敵はAキーとDキーで操作します。ゲームエリアは400x400ピクセルの白い矩形で表現されており、プレイヤーと敵はそれぞれ赤い矩形と青い矩形で表示されます。プレイヤーの初期位置は左側、敵の初期位置は右側に設定されています。キー入力に応じてキャラクターが移動する処理はJavaScriptで記述されており、`keydown` イベントを取得してキー入力に応じてキャラクターの位置を変更しています。`ArrowLeft` キーでプレイヤーが左に、`ArrowRight` キーでプレイヤーが右に、`KeyA` キーで敵が左に、`KeyD` キーで敵が右に移動します。このHTMLファイルをブラウザで開くと、実際のゲームとしてプレイすることができます。スマートフォンでも操作が可能ですが、キーボードを使用した方法となります。

→ 　

0　

0　

　
　

[PR]現在の新着人気ランキング

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

(C)2023 HisashiApp

了解です。以下にストリートファイターシリーズを基盤にした格闘ゲームのHTMLファイルの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    body {
      background-color: black;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    
    #gameArea {
      position: relative;
      width: 400px;
      height: 400px;
      background-color: white;
      border: 2px solid black;
    }
    
    .character {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 75px;
      background-color: red;
    }
    
    #player {
      left: 50px;
    }
    
    #enemy {
      right: 50px;
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="gameArea">
    <div id="player" class="character"></div>
    <div id="enemy" class="character"></div>
  </div>
  
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      var player = document.getElementById('player');
      var enemy = document.getElementById('enemy');
      
      document.addEventListener('keydown', function(event) {
        if (event.key === 'ArrowLeft') {
          moveCharacter(player, -10);
        } else if (event.key === 'ArrowRight') {
          moveCharacter(player, 10);
        } else if (event.key === 'KeyA') {
          moveCharacter(enemy, -10);
        } else if (event.key === 'KeyD') {
          moveCharacter(enemy, 10);
        }
      });
      
      function moveCharacter(character, amount) {
        var currentLeft = parseFloat(character.style.left) || 0;
        var newLeft = currentLeft + amount;
        character.style.left = newLeft + 'px';
      }
    });
  </script>
</body>
</html>
```

このHTMLファイルでは、2つのキャラクター（プレイヤーと敵）が対戦する格闘ゲームを実装しています。プレイヤーは矢印キー（左右）で操作し、敵はAキーとDキーで操作します。

ゲームエリアは400x400ピクセルの白い矩形で表現されており、プレイヤーと敵はそれぞれ赤い矩形と青い矩形で表示されます。プレイヤーの初期位置は左側、敵の初期位置は右側に設定されています。

キー入力に応じてキャラクターが移動する処理はJavaScriptで記述されており、`keydown` イベントを取得してキー入力に応じてキャラクターの位置を変更しています。`ArrowLeft` キーでプレイヤーが左に、`ArrowRight` キーでプレイヤーが右に、`KeyA` キーで敵が左に、`KeyD` キーで敵が右に移動します。

このHTMLファイルをブラウザで開くと、実際のゲームとしてプレイすることができます。スマートフォンでも操作が可能ですが、キーボードを使用した方法となります。