ブロックの落下処理 JavaScriptでミスタードリラーもどきを作る（3）

JavaScriptでミスタードリラーもどきを作る（2）の続きです。今回はブロックを落下させる処理を実装します。

Contents

1 ブロックの落下処理
2 ブロックの更新
3 あたり判定
- 3.1 カプセルを回収時の処理
- 3.2 プレイヤー死亡時の処理
4 ゲームオーバー時とステージクリア時の処理
5 描画処理

ブロックの落下処理

ブロックが破壊されることで落下を開始するブロックがある場合は落下処理をおこないます。カプセル以外のブロックは支えがなくなるとグラグラ振動し、しばらくすると落下を開始ます。

そこでまず「支えがないブロック」を取得します。その取得方法ですが、幅優先探索で取得します。

一番下の行にある破壊されていないブロックを起点とする
上に破壊されていないし落下を開始していないブロックがあるならたどっていく
上下左右に破壊されていないし落下を開始していない同色のブロックがあるならたどっていく
（ただしエアカプセルはくっつかないので下・左・右にはたどらない）
たどりつくことができなかったブロックは支えがないブロックである

function getNoSupportBlocks(){
    const checked2x2 = [];
    for(let row = 0; row < ROW_COUNT; row++){
        const arr = [];
        for(let col = 0; col < COL_COUNT; col++)
            arr.push(false);
        checked2x2.push(arr);
    }

    const dx = [1, -1, 0, 0];
    const dy = [0, 0, -1, 1];

    const qX = [];
    const qY = [];

    const set = new Set();

    for(let col = 0; col < COL_COUNT; col++){
        const lowest = blocks2x2[ROW_COUNT - 1][col];
        if(lowest == null || lowest.IsDead)
            continue;

        qY.push(ROW_COUNT - 1);
        qX.push(col);
        set.add(lowest);
    }

    while(qX.length > 0){
        const x = qX.shift();
        const y = qY.shift();
        const type = blocks2x2[y][x].Type;

        for(let i=0; i<4; i++){
            const nx = x + dx[i];
            const ny = y + dy[i];
            if(nx < 0 || nx >= COL_COUNT || ny < 0 || ny >= ROW_COUNT || blocks2x2[ny][nx] == null || blocks2x2[ny][nx].IsDead)
                continue;

            if(dy[i] != -1){ // 左右と下方向につながっている場合
                if(blocks2x2[ny][nx].Type != type) // 異なる色でつながっている場合は無視
                    continue;
                if(blocks2x2[ny][nx].Type == 1) // 同色でもエアカプセルなら無視
                    continue;
            }

            if(blocks2x2[ny][nx].Falling) // すでに落下を開始している場合も無視
                continue;

            if(!checked2x2[ny][nx]){
                checked2x2[ny][nx] = true;
                qX.push(nx);
                qY.push(ny);
                set.add(blocks2x2[ny][nx]);
            }
        }
    }

    const blocks = [];
    for(let row = 0; row < checked2x2.length; row++){
        for(let col = 0; col < COL_COUNT; col++){
            const block = blocks2x2[row][col];
            if(set.has(block))
                continue;
            if(block != null && !block.IsDead && !block.WaitingFall && !block.Falling)
                blocks.push(block);
        }
    }
    return blocks;
}

function getNoSupportBlocks(){

const checked2x2 = [];

for(let row = 0; row < ROW_COUNT; row++){

const arr = [];

for(let col = 0; col < COL_COUNT; col++)

arr.push(false);

checked2x2.push(arr);

}

const dx = [1, -1, 0, 0];

const dy = [0, 0, -1, 1];

const qX = [];

const qY = [];

const set = new Set();

for(let col = 0; col < COL_COUNT; col++){

const lowest = blocks2x2[ROW_COUNT - 1][col];

if(lowest == null || lowest.IsDead)

continue;

qY.push(ROW_COUNT - 1);

qX.push(col);

set.add(lowest);

}

while(qX.length > 0){

const x = qX.shift();

const y = qY.shift();

const type = blocks2x2[y][x].Type;

for(let i=0; i<4; i++){

const nx = x + dx[i];

const ny = y + dy[i];

if(nx < 0 || nx >= COL_COUNT || ny < 0 || ny >= ROW_COUNT || blocks2x2[ny][nx] == null || blocks2x2[ny][nx].IsDead)

continue;

if(dy[i] != -1){ // 左右と下方向につながっている場合

if(blocks2x2[ny][nx].Type != type) // 異なる色でつながっている場合は無視

continue;

if(blocks2x2[ny][nx].Type == 1) // 同色でもエアカプセルなら無視

continue;

}

if(blocks2x2[ny][nx].Falling) // すでに落下を開始している場合も無視

continue;

if(!checked2x2[ny][nx]){

checked2x2[ny][nx] = true;

qX.push(nx);

qY.push(ny);

set.add(blocks2x2[ny][nx]);

}

const blocks = [];

for(let row = 0; row < checked2x2.length; row++){

for(let col = 0; col < COL_COUNT; col++){

const block = blocks2x2[row][col];

if(set.has(block))

continue;

if(block != null && !block.IsDead && !block.WaitingFall && !block.Falling)

blocks.push(block);

}

return blocks;

}

支えがないブロックを取得したら落下待機状態にします。ただしエアカプセルはただちに落下させます。ただし、
エアカプセルであっても下にブロックがある場合はただちに落下することができないので待機状態にします。

それぞれをグループ化したらFallingGroupのインスタンスを生成して配列に格納します。またエアカプセルは横のつながりを持たないのでグループ化するときは単体で扱います。

function setBlocksTofallingGroups(noSupportBlocks){
    // すでにfallingGroupsに追加されているブロックであるときは重複して追加しないようにする
    const set = new Set();
    fallingGroups.forEach(group => group.Blocks.forEach(_ => set.add(_)));

    // 引数を落下待機にするブロックとエアカプセルにわける
    const blocks = noSupportBlocks.filter(_ => !set.has(_) && _.Type != 1);
    const capsules = noSupportBlocks.filter(_ => !set.has(_) && _.Type == 1);

    const noWait = [];

    // エアカプセルであって下にブロックがある場合は他のブロックと同様に待機状態にする
    // このときエアカプセルは下にあるものから評価しなければならない
    capsules.sort((a,b) => b.Row - a.Row);
    capsules.forEach(capsule => {
        if(blocks.find(_ => _.Col == capsule.Col && _.Row == capsule.Row + 1) != null)
            blocks.push(capsule);
        else
            noWait.push(capsule);
    });

    // 待機状態のブロックは60更新後に落下を開始する
    // そうでないならただちに落下を開始する
    if(blocks.length > 0)
        fallingGroups.push(new FallingGroup(blocks, 60));
    if(noWait.length > 0)
        noWait.forEach(_ => fallingGroups.push(new FallingGroup([_], 0)));
}

function setBlocksTofallingGroups(noSupportBlocks){

// すでにfallingGroupsに追加されているブロックであるときは重複して追加しないようにする

const set = new Set();

fallingGroups.forEach(group => group.Blocks.forEach(_ => set.add(_)));

// 引数を落下待機にするブロックとエアカプセルにわける

const blocks = noSupportBlocks.filter(_ => !set.has(_) && _.Type != 1);

const capsules = noSupportBlocks.filter(_ => !set.has(_) && _.Type == 1);

const noWait = [];

// エアカプセルであって下にブロックがある場合は他のブロックと同様に待機状態にする

// このときエアカプセルは下にあるものから評価しなければならない

capsules.sort((a,b) => b.Row - a.Row);

capsules.forEach(capsule => {

if(blocks.find(_ => _.Col == capsule.Col && _.Row == capsule.Row + 1) != null)

blocks.push(capsule);

else

noWait.push(capsule);

});

// 待機状態のブロックは60更新後に落下を開始する

// そうでないならただちに落下を開始する

if(blocks.length > 0)

fallingGroups.push(new FallingGroup(blocks, 60));

if(noWait.length > 0)

noWait.forEach(_ => fallingGroups.push(new FallingGroup([_], 0)));

}

ブロックの更新

ブロックの更新処理は以下のようになります。

fallingGroupが存在する場合はWaitCountを減らす
WaitCountが0以下なら落下させる
（落下し終わると自動的にFallingGroup.IsDead == true になる）
落下が完了した場合は他のブロックとくっつくものと引き続き落下するものにわける
引き続き落下する場合は待機時間なしで次の落下処理を開始する
くっつくものは同色で4つ以上くっついている場合、消滅させる
消滅した場合、新たな支えがないブロックが発生するので setBlocksTofallingGroups(getNoSupportBlocks()) を実行する

function updateBlocks(){
    fallingGroups.forEach(_ => _.WaitCount--);
    fallingGroups.filter(_ => _.WaitCount <= 0).forEach(_ => _.Fall());

    // 落下が完了した場合
    const finishGroups = fallingGroups.filter(_ => _.IsDead);
    finishGroups.forEach(group => {
        const blocks = group.Blocks;

        const falls = []; // 引き続き落下するブロック
        const fix = []; // 他のブロックとくっつくブロック
        const noSupportBlocks = getNoSupportBlocks();
        const set = new Set();

        // noSupportBlocksのなかに存在するブロックは引き続き落下するブロックである
        noSupportBlocks.forEach(_ => set.add(_));
        blocks.forEach(_ => {
            if(set.has(_))
                falls.push(_);
            else
                fix.push(_);
        });

        // 引き続き落下させる（待機なし）
        if(falls.length > 0)
            fallingGroups.push(new FallingGroup(falls, 0));

        // 4つ以上くっついたブロックがあれば消滅させる
        if(delete4(fix))
            setBlocksTofallingGroups(getNoSupportBlocks());
    });

    fallingGroups = fallingGroups.filter(_ => !_.IsDead)

    function delete4(fixBlocks){
        let done = false;
        for(let i= 0; i<fixBlocks.length; i++){
            if(fixBlocks[i].Type == 1) // エアカプセルは4つ以上くっついても消滅しない
                continue;
            const connectedBlocks = getConnectedBlocks(fixBlocks[i], 4);
            connectedBlocks.forEach(_ => {
                _.IsDead = true;
                onBlockBroken(_);
                done = true;
            });
        }
        return done;
    }
}

function updateBlocks(){

fallingGroups.forEach(_ => _.WaitCount--);

fallingGroups.filter(_ => _.WaitCount <= 0).forEach(_ => _.Fall());

// 落下が完了した場合

const finishGroups = fallingGroups.filter(_ => _.IsDead);

finishGroups.forEach(group => {

const blocks = group.Blocks;

const falls = []; // 引き続き落下するブロック

const fix = []; // 他のブロックとくっつくブロック

const noSupportBlocks = getNoSupportBlocks();

const set = new Set();

// noSupportBlocksのなかに存在するブロックは引き続き落下するブロックである

noSupportBlocks.forEach(_ => set.add(_));

blocks.forEach(_ => {

if(set.has(_))

falls.push(_);

else

fix.push(_);

});

// 引き続き落下させる（待機なし）

if(falls.length > 0)

fallingGroups.push(new FallingGroup(falls, 0));

// 4つ以上くっついたブロックがあれば消滅させる

if(delete4(fix))

setBlocksTofallingGroups(getNoSupportBlocks());

});

fallingGroups = fallingGroups.filter(_ => !_.IsDead)

function delete4(fixBlocks){

let done = false;

for(let i= 0; i<fixBlocks.length; i++){

if(fixBlocks[i].Type == 1) // エアカプセルは4つ以上くっついても消滅しない

continue;

const connectedBlocks = getConnectedBlocks(fixBlocks[i], 4);

connectedBlocks.forEach(_ => {

_.IsDead = true;

onBlockBroken(_);

done = true;

});

}

return done;

}

あたり判定

あたり判定（プレイヤーの死亡判定）は以下のようにおこないます。

すでにプレイヤー死亡の場合はなにもしない
エアカプセル以外の破壊されていないブロックがプレイヤーと同じ位置に存在する場合、プレイヤーと同じX座標でY座標の差がBLOCK_SIZE / 8未満の位置に存在する場合はプレイヤー死亡とする
プレイヤーがいる位置にカプセルがある場合はカプセル回収の処理をおこなう

function judge(){
    if(player.IsDead || player.Row < 1)
        return;

    if(player.Air <= 0){
        onPlayerDead();
        return;
    }

    const overBlock = blocks2x2[player.Row - 1][player.Col];
    if(overBlock != null && !overBlock.IsDead && overBlock.Type != 1 && player.Y - overBlock.Y < BLOCK_SIZE / 8)
        onPlayerDead();

    const block = blocks2x2[player.Row][player.Col];
    if(block != null && !block.IsDead){
        if(block.Type == 1)
            playerBreakCapsule(block);
        else
            onPlayerDead(block);
    }
}

function judge(){

if(player.IsDead || player.Row < 1)

return;

if(player.Air <= 0){

onPlayerDead();

return;

}

const overBlock = blocks2x2[player.Row - 1][player.Col];

if(overBlock != null && !overBlock.IsDead && overBlock.Type != 1 && player.Y - overBlock.Y < BLOCK_SIZE / 8)

onPlayerDead();

const block = blocks2x2[player.Row][player.Col];

if(block != null && !block.IsDead){

if(block.Type == 1)

playerBreakCapsule(block);

else

onPlayerDead(block);

}

カプセルを回収時の処理

カプセルを回収したときの処理を示します。

エアカプセルの死亡フラグのセット
カプセルが破壊されることで支えがないブロックが発生するかもしれないので setBlocksTofallingGroups(getNoSupportBlocks()) を実行する
エアの回復（最大値を超えない範囲で最大値の10％分）
スコアの加算
爆発の火花の発生
効果音の再生

function playerBreakCapsule(capsule){
    capsule.IsDead = true;

    setBlocksTofallingGroups(getNoSupportBlocks());

    player.Air += player.AirFull / 10;
    if(player.Air > player.AirFull)
        player.Air = player.AirFull;

    score += 300;

    const dx = [4, -4, -4, 4];
    const dy = [4, 4, -4, -4];
    for(let i=0; i<4; i++)
        sparks.push(new Spark(capsule.X, capsule.Y, dx[i], dy[i]));

    getSound.currentTime = 0;
    getSound.play();
}

function playerBreakCapsule(capsule){

capsule.IsDead = true;

setBlocksTofallingGroups(getNoSupportBlocks());

player.Air += player.AirFull / 10;

if(player.Air > player.AirFull)

player.Air = player.AirFull;

score += 300;

const dx = [4, -4, -4, 4];

const dy = [4, 4, -4, -4];

for(let i=0; i<4; i++)

sparks.push(new Spark(capsule.X, capsule.Y, dx[i], dy[i]));

getSound.currentTime = 0;

getSound.play();

}

プレイヤー死亡時の処理

プレイヤー死亡時は以下の処理をおこないます。

死亡フラグのセット
残機 1 減らす
効果音の再生
爆発の火花の発生
自機がまだ存在する場合はプレイヤーを復活させる
存在しない場合はゲームオーバー処理

function onPlayerDead(block){
    player.IsDead = true;
    rest--;

    deadSound.currentTime = 0;
    deadSound.play();

    for(let i=0; i<16; i++){
        const v = 4 + 2 * Math.random();
        const angle = 2 * Math.PI * Math.random();
        const vx = v * Math.cos(angle);
        const vy = v * Math.sin(angle);
        sparks.push(new Spark(player.X, player.Y, vx, vy));
    }
    if(rest > 0)
        resurrect();
    else
        onGameovered();
}

function onPlayerDead(block){

player.IsDead = true;

rest--;

deadSound.currentTime = 0;

deadSound.play();

for(let i=0; i<16; i++){

const v = 4 + 2 * Math.random();

const angle = 2 * Math.PI * Math.random();

const vx = v * Math.cos(angle);

const vy = v * Math.sin(angle);

sparks.push(new Spark(player.X, player.Y, vx, vy));

}

if(rest > 0)

resurrect();

else

onGameovered();

}

プレイヤーを復活させる処理を示します。

プレイヤーがいる位置から上にあるブロックは必要ないので対応するblocks2x2[row][col]にnullを代入しています。またそれよりも下の部分は残すのですが、落下中のブロックが宙ぶらりんの状態で浮いてしまうので落下状態と待機状態をいずれも解除して落下処理前の位置に再設定しています。

そのあと死亡位置の中央でプレイヤーを復活させます。

function resurrect(){
    setTimeout(() => {
        fallingGroups = [];
        for(let row = 0; row < ROW_COUNT; row++){
            for(let col = 0; col < COL_COUNT; col++){
                const block = blocks2x2[row][col];
                if(block == null || block.IsDead)
                    continue;
                if(row <= player.Row)
                    blocks2x2[row][col] = null;
                else{
                    if(block.Falling){
                        block.Falling = false;
                        block.WaitingFall = false;
                        block.Y = row * BLOCK_SIZE;
                        block.X = col * BLOCK_SIZE;
                    }
                }
            }
        }
        player.Init(player.Row, 3);
    }, 3000);
}

function resurrect(){

setTimeout(() => {

fallingGroups = [];

for(let row = 0; row < ROW_COUNT; row++){

for(let col = 0; col < COL_COUNT; col++){

const block = blocks2x2[row][col];

if(block == null || block.IsDead)

continue;

if(row <= player.Row)

blocks2x2[row][col] = null;

else{

if(block.Falling){

block.Falling = false;

block.WaitingFall = false;

block.Y = row * BLOCK_SIZE;

block.X = col * BLOCK_SIZE;

}

player.Init(player.Row, 3);

}, 3000);

}

ゲームオーバー時とステージクリア時の処理

ゲームオーバー時は以下の処理をおこないます。

効果音の再生とBGMの停止
スマホ用の操作ボタンの非表示
ゲームスタートボタンの再表示
press◯◯Keyフラグのクリア

地味に重要なのがプレイヤーを移動させるためのpress◯◯Keyフラグのクリアです。スマホでプレイしていてゲームオーバーになった場合、これにともなって操作用ボタンが消えてしまうのでこれらのフラグはユーザーの操作ではクリアされなくなるのです（PCからの操作であれば問題ない）。

function onGameovered(){
    bgm.pause();
    $ctrlButtons.style.display = 'none';

    pressLeftKey = false;
    pressRightKey = false;
    pressUpKey = false;
    pressDownKey = false;

    setTimeout(() => {
        if(isPlaying){
            isPlaying = false;
            $startButtons.style.display = 'block';
            gameoverSound.currentTime = 0;
            gameoverSound.play();
        }
    }, 3000);
}

function onGameovered(){

bgm.pause();

$ctrlButtons.style.display = 'none';

pressLeftKey = false;

pressRightKey = false;

pressUpKey = false;

pressDownKey = false;

setTimeout(() => {

if(isPlaying){

isPlaying = false;

$startButtons.style.display = 'block';

gameoverSound.currentTime = 0;

gameoverSound.play();

}

}, 3000);

}

ステージクリア時の処理を示します。

移動不可、あたり判定無効にしたいので死んではないけど死亡フラグをセットする
BGMの停止と効果音の再生
落下中のブロックに関する情報のクリア
ステージクリアを示す文字列の表示
次のステージのブロックの生成
プレイヤーの位置の初期化
停止していたBGMの再生

ステージクリアを示す文字列（DOM要素を使う）を下から上へ移動するように表示させます。

function onStageClear(){
    player.IsDead = true;

    fallingGroups = [];
    bgm.pause();
    clearSound.currentTime = 0;
    clearSound.play();

    // ステージクリアを示す文字列（DOM要素）を下から上へ流れるように表示する
    let stageClearY = CANVAS_HEIGHT;
    const $stageClear = document.getElementById('stage-clear');
    $stageClear.style.display = 'block';

    const intervalID =  setInterval(() => {
        stageClearY -= 4;
        $stageClear.style.top = stageClearY + 'px';
    }, 1000 / 60);

    setTimeout(() => {
        clearInterval(intervalID);
        player.IsDead = false;

        score += 5000;
        createBlocks();
        player.Init(0, 3);
        player.Direct == '';

        $stageClear.style.display = 'none';

        bgm.currentTime = 0;
        bgm.play();
    }, 3000);
}

function onStageClear(){

player.IsDead = true;

fallingGroups = [];

bgm.pause();

clearSound.currentTime = 0;

clearSound.play();

// ステージクリアを示す文字列（DOM要素）を下から上へ流れるように表示する

let stageClearY = CANVAS_HEIGHT;

const $stageClear = document.getElementById('stage-clear');

$stageClear.style.display = 'block';

const intervalID = setInterval(() => {

stageClearY -= 4;

$stageClear.style.top = stageClearY + 'px';

}, 1000 / 60);

setTimeout(() => {

clearInterval(intervalID);

player.IsDead = false;

score += 5000;

createBlocks();

player.Init(0, 3);

player.Direct == '';

$stageClear.style.display = 'none';

bgm.currentTime = 0;

bgm.play();

}, 3000);

}

描画処理

描画処理を示します。

canvas全体を黒で塗りつぶす
ブロックを描画する
ゴールが見える位置にあるときは描画する
火花があるときは描画する
プレイヤーが生存するときは描画する
上部にスコア等を描画する

function draw(){
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

    // ブロックの描画
    if(blocks2x2.length == ROW_COUNT){
        for(let row = 0; row<ROW_COUNT; row++){
            for(let col = 0; col<COL_COUNT; col++){
                const block = blocks2x2[row][col];
                if(block != null && !block.IsDead)
                    blocks2x2[row][col].Draw();
            }
        }
    }

    // ゴールの描画
    const y = BLOCK_SIZE * ROW_COUNT - scroll_y;
    if(y < CANVAS_HEIGHT){
        ctx.fillStyle = '#f00';
        ctx?.fillRect(0, y + 30, CANVAS_WIDTH, 60);

        ctx.fillStyle = '#fff';
        ctx.font='48px Arial';
        ctx.textBaseline = 'top';
        const w = ctx.measureText('GOAL').width;
        ctx.fillText('GOAL',(CANVAS_WIDTH - w) / 2, y  + 30 + 10);
    }

    sparks.forEach(_ => _.Draw());
    player.Draw();

    // スコアの描画
    ctx.fillStyle = '#000';
    ctx.fillRect(0, 0, CANVAS_WIDTH, 70);

    ctx.fillStyle = '#fff';
    ctx.font='24px Arial';
    ctx.textBaseline = 'top';

    ctx.fillText(`Score ${score.toLocaleString()}`,10, 10)
    ctx.fillText(`残 ${rest}`,10, 40);

    const air = Math.max(Math.floor(player.Air / 60 * 2), 0);
    const airText = `Air ${air}`;
    const airTextWidth = ctx.measureText(airText).width;
    ctx.fillText(airText,CANVAS_WIDTH - airTextWidth - 30, 10);

    const depthText = `Depth ${player.Row} / ${ROW_COUNT-1} - ${stage.toString()}`;
    const depthTextWidth = ctx.measureText(depthText).width;
    ctx.fillText(depthText, CANVAS_WIDTH - depthTextWidth - 30, 40)
}

function draw(){

ctx.fillStyle = '#000';

ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);

// ブロックの描画

if(blocks2x2.length == ROW_COUNT){

for(let row = 0; row<ROW_COUNT; row++){

for(let col = 0; col<COL_COUNT; col++){

const block = blocks2x2[row][col];

if(block != null && !block.IsDead)

blocks2x2[row][col].Draw();

}

// ゴールの描画

const y = BLOCK_SIZE * ROW_COUNT - scroll_y;

if(y < CANVAS_HEIGHT){

ctx.fillStyle = '#f00';

ctx?.fillRect(0, y + 30, CANVAS_WIDTH, 60);

ctx.fillStyle = '#fff';

ctx.font='48px Arial';

ctx.textBaseline = 'top';

const w = ctx.measureText('GOAL').width;

ctx.fillText('GOAL',(CANVAS_WIDTH - w) / 2, y + 30 + 10);

}

sparks.forEach(_ => _.Draw());

player.Draw();

// スコアの描画

ctx.fillStyle = '#000';

ctx.fillRect(0, 0, CANVAS_WIDTH, 70);

ctx.fillStyle = '#fff';

ctx.font='24px Arial';

ctx.textBaseline = 'top';

ctx.fillText(`Score ${score.toLocaleString()}`,10, 10)

ctx.fillText(`残 ${rest}`,10, 40);

const air = Math.max(Math.floor(player.Air / 60 * 2), 0);

const airText = `Air ${air}`;

const airTextWidth = ctx.measureText(airText).width;

ctx.fillText(airText,CANVAS_WIDTH - airTextWidth - 30, 10);

const depthText = `Depth ${player.Row} / ${ROW_COUNT-1} - ${stage.toString()}`;

const depthTextWidth = ctx.measureText(depthText).width;

ctx.fillText(depthText, CANVAS_WIDTH - depthTextWidth - 30, 40)

}

動作確認はこちらから

ブロックの落下処理 JavaScriptでミスタードリラーもどきを作る（3）

ブロックの落下処理

ブロックの更新

あたり判定

カプセルを回収時の処理

プレイヤー死亡時の処理

ゲームオーバー時とステージクリア時の処理

描画処理

鳩でも分かるC#管理人からのお願い

コメントについて

管理人のモチベーションアップのために

コメントをどうぞ