2D action by Okada Gonzaemon's game | AI game creator

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

No:12320

60

2D action by Okada Gonzaemon
Developer User5065｜Date and time 23/8/14 23:53:15
Build time 38.372 sec｜Game capacity 3KB｜

岡田権左衛門の2Dアクションゲームの実装例を以下に示します。このゲームは、HTMLのキー入力イベントを使用してプレイヤーを操作します。

このプログラムでは、HTMLのcanvas要素を使用してゲーム画面を描画しています。プレイヤーの位置は`playerX`と`playerY`で管理され、キー入力イベントでこれらの座標が変更されます。 `draw()`関数は、ゲームのメインループであり、定期的に呼び出されます。この関数内でプレイヤーの座標を更新し、`drawBall()`関数を使用してプレイヤーを描画します。`requestAnimationFrame()`関数を使って次のフレームの描画をリクエストしています。キー入力イベントは`keydown`イベントと`keyup`イベントを使用して処理されます。`keydown`イベント（キーが押されている状態）で`rightPressed`または`leftPressed`変数がtrueに設定され、`keyup`イベント（キーが離された状態）ではこれらの変数がfalseに設定されます。このプログラムは、スマホではなくPCのキーボードを前提としていますが、必要に応じてタッチイベントやジャイロセンサーなどを使用してスマホでも操作できるように拡張することができます。

→ 　

0　

0　

　
　

[PR]現在の人気ゲームランキング

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

(C)2023 HisashiApp

岡田権左衛門の2Dアクションゲームの実装例を以下に示します。このゲームは、HTMLのキー入力イベントを使用してプレイヤーを操作します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>岡田権左衛門の2Dアクション</title>
</head>
<body>
  <canvas id="gameCanvas" width="400" height="300"></canvas>
  <script>
    // ゲームオブジェクトの設定
    var canvas = document.getElementById("gameCanvas");
    var ctx = canvas.getContext("2d");
    var playerX = canvas.width / 2;
    var playerY = canvas.height - 30;
    var ballRadius = 10;
    var dx = 2;
    var dy = -2;

// ゲームループ
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawBall();
      playerX += dx;
      playerY += dy;
      requestAnimationFrame(draw);
    }

// プレイヤーの描画
    function drawBall() {
      ctx.beginPath();
      ctx.arc(playerX, playerY, ballRadius, 0, Math.PI*2);
      ctx.fillStyle = "#0095DD";
      ctx.fill();
      ctx.closePath();
    }

// キー入力イベントの処理
    document.addEventListener("keydown", keyDownHandler, false);
    document.addEventListener("keyup", keyUpHandler, false);

var rightPressed = false;
    var leftPressed = false;

function keyDownHandler(e) {
      if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = true;
      }
      else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = true;
      }
    }

function keyUpHandler(e) {
      if(e.key == "Right" || e.key == "ArrowRight") {
        rightPressed = false;
      }
      else if(e.key == "Left" || e.key == "ArrowLeft") {
        leftPressed = false;
      }
    }

// ゲーム開始
    draw();

</script>
</body>
</html>
```

このプログラムでは、HTMLのcanvas要素を使用してゲーム画面を描画しています。プレイヤーの位置は`playerX`と`playerY`で管理され、キー入力イベントでこれらの座標が変更されます。

`draw()`関数は、ゲームのメインループであり、定期的に呼び出されます。この関数内でプレイヤーの座標を更新し、`drawBall()`関数を使用してプレイヤーを描画します。`requestAnimationFrame()`関数を使って次のフレームの描画をリクエストしています。

キー入力イベントは`keydown`イベントと`keyup`イベントを使用して処理されます。`keydown`イベント（キーが押されている状態）で`rightPressed`または`leftPressed`変数がtrueに設定され、`keyup`イベント（キーが離された状態）ではこれらの変数がfalseに設定されます。

このプログラムは、スマホではなくPCのキーボードを前提としていますが、必要に応じてタッチイベントやジャイロセンサーなどを使用してスマホでも操作できるように拡張することができます。