JavaScript

JavaScript

JavaScript:パズルゲームのゲームオーバーからタイトルに戻る処理

ゲームオーバー後は、あるていど余韻を残してからタイトル画面に戻りたい。
JavaScript

JavaScript:パズルゲームのタイトル画面を作る

タイトル画面は、ゲームタイトルの文字列を表示するだけのシンプルなものとする。 タイトル画面表示中にクリックするとゲーム画面に遷移する。 現時点ではゲームオーバーとならないため、タイトル画面に戻ることはない。
JavaScript

JavaScript:パズルゲームで次に来るブロックを表示しておく

ステージの上方に、次に配置可能なブロックを表示しておく。 次に来るブロックは、ブロックを配置する際(ステージクリック)にランダムで設定するようになっている。
JavaScript

JavaScript:落ちものゲームの消去予定ブロックをsetTimeoutで200ミリ秒別画像で表示してから消す

落ちものゲームで消去予定のブロックは、すぐに消してしまうとどれが消えたか分からない。 どのブロックが消えたのか分かるようにするために、200ミリ秒後に消すような処理は、setTimeoutで実現できる。
JavaScript

JavaScript:落ちものゲームでブロックが3つ以上そろったら消す

縦と横方向に落ちてきたブロックが3つ以上そろったら消す。 落ちている最中にそろっても消さない。ブロックが全て落ちてから消すようにしている。
JavaScript

JavaScript:ステージ上に出現したブロックを落とす

パズルゲーム風のマス目をクリックするとそこにブロックキャラが登場する。 ブロックキャラの下に何も無ければ、一定間隔で下に落ちる。素のJavaScriptのみで実践する。
JavaScript

JavaScript:セル状のステージに画像を配置する

async関数とawaitを用いて画像ファイルを読み込んだあとにゲーム画面を描画するようにしている。 クリックしたセル位置に読み込んだ画像をランダムで表示させている。
JavaScript

JS:複数の画像読み込みが完了した時点で処理をしたい

Promiseオブジェクトを使うと「画像読み込み完了後に関数の戻り値を返す」などの非同期処理完了後の動作をJavaScriptで記述できる。
JavaScript

JavaScript:マウスホバーしているセル位置を求める

パズルゲームなどの格子状ステージで、現在マウスホバー中のセル位置を視覚的に変化させる。
JavaScript

JS:キャンバスで市松模様を表示する

市松模様は、例えば上の方から交互に色違いの四角形を並べていくが、下にずれたとき開始の色が上とは1つずれなければ完成しない。