Zenn
🔵

ぷよぷよプログラミングをGodotで実装 03 コード理解（player.js）

2025/03/07に公開
JavaScript
ゲーム開発
Godot
プログラミング教育
tech

はじめに

前回に引き続きぷよぷよプログラミングを利用して、Godotでパズルゲームの作り方の基礎を一緒に学んでいこうと思います。YouTubeでもこの記事の内容に沿ってゲームを作っているので、動画を見ながら取り組んでみてください。

https://youtu.be/ZpPS9VSz09A

前回の記事はこちら
https://zenn.dev/yurinchi/articles/d94e36dbe479cd

利用教材

この記事で学ぶこと

godotを触る前にまずはぷよぷよプログラミングのソースコード(javascript)について解説をしていきます。
今回は主にplayer.jsについて解説します。

player.js の概要

このクラスでは、ぷよの配置や移動、消去のロジックが実装されています。ゲームの進行を管理し、プレイヤーがぷよを積み上げて消していく過程を処理します。

player.js の構成

プロパティ

centerPuyo

中心ぷよの色を保持するためのプロパティ。新しいぷよが生成されるときにランダムな色が割り当てられます。

movablePuyo

動くぷよの色を保持するためのプロパティ。新しいぷよが生成されるときにランダムな色が割り当てられます。

puyoStatus

現在のぷよの位置や状態（座標、回転角度など）を保持するためのプロパティ。ぷよの動きや回転を管理します。

centerPuyoElement

中心ぷよの画像要素を保持するためのプロパティ。HTML要素としてのぷよを操作します。

movablePuyoElement

動くぷよの画像要素を保持するためのプロパティ。HTML要素としてのぷよを操作します。

groundFrame

ぷよが地面に接地しているフレーム数をカウントするためのプロパティ。ぷよの接地状態を管理します。

keyStatus

プレイヤーのキーボード入力状態を保持するためのプロパティ。キーが押されているかどうか（左、右、上、下）を管理します。

actionStartFrame

移動や回転アクションの開始フレームを保持するためのプロパティ。アクションの進行状態を管理します。

moveSource

移動元のぷよの位置を保持するためのプロパティ。移動アニメーションの開始位置を設定します。

moveDestination

移動先のぷよの位置を保持するためのプロパティ。移動アニメーションの終了位置を設定します。

rotateBeforeLeft

回転前のぷよの左側の位置を保持するためのプロパティ。回転アニメーションの開始位置を設定します。

rotateAfterLeft

回転後のぷよの左側の位置を保持するためのプロパティ。回転アニメーションの終了位置を設定します。

rotateFromRotation

回転前のぷよの角度を保持するためのプロパティ。回転アニメーションの開始角度を設定します。

メソッド

initialize

目的

キーボードやタッチ入力の状態を初期化し、イベントリスナを登録します。

主要な処理

  • keyStatus オブジェクトを初期化して、キーボードの入力状態（左、右、上、下キー）を管理します
  • keydown イベントリスナを登録し、キーが押されたときに keyStatus を更新します
  • keyup イベントリスナを登録し、キーが離されたときに keyStatus を更新します
  • touchend イベントリスナを登録し、タッチ入力が終了したときに keyStatus をリセットします
  • gesture 関数を定義し、タッチジェスチャーによって keyStatus を更新する。

入力方法とイベントリスナの紐付けを行っています。
Godotで作る時は一旦キーボード入力だけで実装しようと思います。

createNewPuyo

目的

新しいぷよを生成し、ステージに配置できるかどうかを確認します。

主要な処理

  • ステージの上部（左から3つ目の列）が空いているか確認して、空いていない場合は新しいぷよを配置できないため false を返却します。
  • 新しいぷよの色をランダムに決定します
  • 新しいぷよの画像要素を作成し、ステージに追加します
  • 新しいぷよの初期配置を設定（中心ぷよは左から2列目、画面上部から出現）します
  • setPuyoPosition メソッドを呼び出して、ぷよの位置を設定します

スタート位置が左から3つ目とハードコーディングになっているので、Godot化する際は列の数に合わせて変動するようにしようと思います。

setPuyoPosition

目的

ぷよの現在の位置を画面上に設定します。

主要な処理

  • 中心ぷよの位置をスタイルプロパティを使って設定します
  • 動くぷよの位置を計算し、スタイルプロパティを使って設定しています

ぷよの描写を行うために呼び出されるから、ぷよの作成時や移動した際に呼び出されます。

falling(isDownPressed)

目的

ぷよが下に自由落下するかどうかを判断し、必要に応じて落下速度を調整します

主要な処理

  • 下にブロックがあるかどうかを確認します (isBlocked)
  • 下にブロックがなければぷよを自由落下させ、下キーが押されている場合は加速します。
  • 境を超えた場合は再チェックし、得点を加算します
  • ブロックにぶつかった場合、ぷよの位置を調整して接地を開始します

groundFrame プロパティを用いて接地状態を管理し、接地が完了すると true を返します。

playing(frame)

目的

プレイヤーの操作状態を管理します

主要な処理

  • falling メソッドを呼び出して自由落下を確認します
  • 下キーが押されている場合、自由落下を加速します
  • 左右キーが押されている場合、左右に動かせるかどうかを確認します
  • 回転キーが押されている場合、ぷよを回転させることができるかどうかを確認します

moving(frame)

目的

ぷよが移動中の状態を管理します。

主要な処理

  • falling メソッドを呼び出して自然落下を確認します
  • 移動の進行状況を計算し、ぷよの位置を更新します
  • 移動が完了した場合は false を返します

rotating(frame)

目的

ぷよが回転中の状態を管理します。

主要な処理

  • falling メソッドを呼び出して自然落下を確認します
  • 回転の進行状況を計算し、ぷよの位置と回転角度を更新します
  • 回転が完了した場合は false を返します

fix

目的

現在のぷよをステージ上に固定します。

主要な処理

  • ぷよの現在の位置をステージ上に設定し、ぷよをカウントします。
  • 操作用に作成したぷよ画像を削除します

batankyu

目的

ゲームオーバー時に上キーが押されたらリロードします。

主要な処理

  • 上キーが押された場合、ページをリロードします

まとめ

このコードはぷよの生成と操作の制御について学んでいきました。
JavaScriptの分析もあともう少しで完了です。
次の記事がJavaScript回の最後になると思います。

Discussion