ぷよぷよプログラミングをGodotで実装 04 コード理解（score.js、puyoimage.js）
はじめに
前回に引き続きぷよぷよプログラミングを利用して、Godotでパズルゲームの作り方の基礎を一緒に学んでいこうと思います。YouTubeでもこの記事の内容に沿ってゲームを作っているので、動画を見ながら取り組んでみてください。
前回の記事はこちら
利用教材
この記事で学ぶこと
godotを触る前にまずはぷよぷよプログラミングのソースコード(javascript)について解説をしていきます。
今回はscore.jsとpuyoimage.jsについて解説します。
ゲームのメインロジックではないからさらっと解説します。
score.js の概要
このクラスは、ゲームのスコアを管理するためのものです。
fontTemplateListプロパティ
役割
フォントのテンプレート画像のリストを保持するプロパティです。スコア表示に使用される数字の画像を格納します。
fontLengthプロパティ
役割
スコア表示のために使用されるフォントの桁数を保持するプロパティです。表示可能な最大桁数を設定します。
scoreプロパティ
役割
現在のスコアを保持するプロパティです。
initialize()
役割
スコアシステムを初期化するためのメソッドです。
主要な処理
- フォントテンプレートリストを初期化します
- 各数字（0〜9）のフォント画像を取得し、リストに追加します
- スコアを表示するための桁数を設定します
- スコアをゼロにリセットし、スコアを表示します
showScore()
役割
現在のスコアを画面に表示するメソッドです。
主要な処理
- scoreElement の中身をクリアします。
- スコアを下の桁から順に表示します。10で割ったあまりを計算し、対応するフォント画像を追加します。
calculateScore(rensa, piece, color)
役割
スコアを計算するメソッドです。
主要な処理
- 連鎖数、ぷよの数、色の数に基づいてボーナススコアを計算します
- スコアの倍率を計算し、得点を加算します
addScore(score)
役割
スコアを追加し、スコアを表示するメソッドです。
主要な処理
- スコアに指定された得点を追加します
- スコアを表示します
ボーナススコア配列
Score.rensaBonus
連鎖ボーナスを保持する配列です。連鎖数に応じたボーナススコアを格納します。
Score.pieceBonus
ぷよの数に応じたボーナスを保持する配列です。
Score.colorBonus
色の数に応じたボーナスを保持する配列です。
puyoimage.js の概要
ぷよぷよの画像やゲームオーバー時の画像を管理し、適切に表示・アニメーションさせることができます。
puyoImagesプロパティ
ぷよぷよの画像要素を格納する配列。5つのぷよぷよの画像が含まれます。
batankyuImageプロパティ
バタンキュー（ゲームオーバー）時の画像要素を格納するプロパティです。
gameOverFrameプロパティ
ゲームオーバー時のフレーム数を保持するプロパティです。
initialize()
目的
ぷよぷよとバタンキュー画像を初期化します。
主要な処理
- puyoImages 配列を初期化し、各ぷよぷよ画像を取得して設定します
- 画像の幅と高さを設定し、スタイルを絶対位置に設定します
- batankyuImage を取得して設定し、幅とスタイルを設定します
getPuyo(index)
目的
指定されたインデックスのぷよぷよ画像を複製して返します。
主要な処理
puyoImages 配列から指定されたインデックスの画像を複製して返します。
prepareBatankyu(frame)
目的
バタンキュー画像を準備してステージに追加します。
主要な処理
- gameOverFrame を設定します
- ステージ要素に batankyuImage を追加します
- batankyuImage の位置を設定します
batankyu(frame)
目的
バタンキュー画像のアニメーションを実行させます。
主要な処理
- 現在のフレーム数からゲームオーバーフレーム数との差を計算し、比率を求めます
- 比率を基に batankyuImage の位置を計算し、左右と上下の座標を更新します
まとめ
このコードはぷよのスコアの計算ロジックと画像の描写について学んでいきました。
今回の記事でJavaScriptの分析は完了です。
次の記事がいよいよGodotに変換していこうと思います。
Discussion