ぬえさぶろうのAnimate放送部

最初に「index.php」がロードされます。

config.js

設定ファイル

stage.js

ぷよの落下、「全消し」の表示など、ステージ（フィールド）の表示を制御

puyoimage.js

ぷよの画像やゲームオーバー時の「ばたんきゅー」の表示を制御

score.js

スコアの計算・表示を制御

game.js

プログラムの全体の制御

player.js

プレイヤーの操作を制御

ぷよぷよの舞台である作成と制御について説明しましょう。フィールドはstage.jsで「Stage」クラスとして作ります。フィールドは縦12×横6のマス目です。 この2次元配列boardの要素は、初期状態ではすべて0ですが、これはぷよぷよがフィールドに存在しないことを意味します。フィールド(board)にぷよを配置する処理を担うのがsetPuyo関数です。この関数は次の3つの引数を持ちます。

setPuyo関数

引数名	用途
x	x軸方向の位置(0~5)
y	y軸方向の位置(0~11)
puyo	ぷよの色(1～5)

this.board[y][x] = {
    puyo: puyo,
    element:puyoImage
}

board要素の状態

0	初期状態
null	ぷよを消した状態
{ puyo,element }	ぷよが存在する状態

落ちてくる2つのぷよを作成している部分
createNewPuyo関数

• 「中心ぷよ」と「動くぷよ」で構成
• 色はランダム
• 画面外の上部・中央から落ちてくる

puyoStatus

フィールドの位置

centerPuyo

中心ぷよの色

movablePuyo

動くぷよの色

centerPuyoElement

中心ぷよのDOMオブジェクト

movablePuyoElement

回転ぷよのDOMオブジェクト

this.puyoStatus = {
    x: 2, //中心ぷよの位置：左から2列目
    y: -1, //画面上部ギリギリから出てくる
    left: 2 * Config.puyoImgWidth,
    top: -1 * Config.puyoImgHeight,
    dx: 0, //動くぷよの相対位置
    dy: -1,
    rotation: 90 //動くぷよの角度は90度
};

ぷよの色を乱数で決める

this.centerPuyo = Math.floor ( Math.random() * puyoColors) + 1;

1

緑色：

2

青色:

3

紫:

4

赤:

5

黄:

const puyoColors = Math.max(1,Math.min(5, Config.puyoColors));

色が決定したら、続けて、ぷよのDOMオブジェクトを用意します。getPuyo関数を使います。

Stage.stageElement.appendChild(this.centerPuyoElement);
Stage.stageElement.appendChild(this.movablePuyoElement);

　作成した2つのぷよは、player.jsで定義しているsetPuyoPosition関数を使って初期位置を描画します。

ゲーム全体の「初期化」とゲームの「メインループ」を制御しているgame.jpについて説明します。
「windowのloadイベント」が発生すると、game.jsのinitialize関数でゲーム全体の初期化を行い、その後、loop関数でゲームのメインループに入ります。メインループは、プログラムが終了するまで永久に続きます。

window.addEventListener("load", () = >{
    initialize();
    loop();
});

ぷよぷよでは、「同じ色のぷよが４個以上くっついているか？」の判定方法を解説します。

---

checkErase関数が、ぷよを消せるかの判定を行っています。フィールドの全マスに対し、「同じ色のぷよが4個以上のつながっているか？」をチェックしています。

<script>
board = [
    [1,1,1,1,0,0],
    [0,1,0,0,0,1],
    [0,1,1,0,1,1]
];

const sequencePuyoInfoList = [];

const checkSequentialPuyo = (x,y) = > {
    //すでに[x,y]がsequentialPuyoListにある場合はreturn
    if(sequencepuyoInfoList.some(p = > p[0] === x && p[1] === y)){
        return;
    }
    sequencePuyoInfoList.push([x,y]);
    
    const direction = [[0,1],[1,0],[0,-1],[-1,0]];
    for(let i = 0; i < direction.length; i++){
        const dx = x + direction[i][0];
        const dy = y + direction[i][1];
        //フィールドの外にはみ出た
        if(dx < 0 || dy < 0 || dx >= 6 || dy >= 3){
            continue;
        }
        //1でない
        if(board[dy][dx] !== 1){
            continue;
        }
        checkSequentialPuyo(dx,dy);
    }
}

checkSequentialPuyo(1,0);
console.log(sequencePuyoinfoList);
</script>