{requestAnimationFrame(main);}このテトリスにおいて、何もないマスは「0」、壁を「9」とし、それ以外の数字をブロックとします。これを前提とし、「12×22」のフィールドを作成します。「12×22」は変わらない前提となりますので、定数化します。フィールドの高さ//省略フィールドの描画まず、フィールドを描画していくにあたって、フィールドの左上座標を設定します。フィールドのCanvas内のY座標//省略フィールドの描画は、先ほど作成した「field」変数の内容を用いて、矩形(マス)を何個も描画していきます。「9」なら色がグレーの矩形を描画して、もし「0」なら描画しない。2種類しか無いので、「0」なら描画しないという処理だけを記述します。この作業を「for」文を用いて行なっていきます。フィールドを描画requestAnimationFrame(main);}「18行目」の「clearRect」関数を実行しているのは、メインループ中に再描画を行うためです。画面クリアをしないと、前のフレームで描画されていた内容が消されずに、どんどん絵の具を塗りつぶしていくのと同じで、画面がめちゃくちゃになってしまいます。フィールドの枠を描画これだけではマスの感覚がつかめないので、フィールドに枠を描画してあげます。フィールド枠を描画requestAnimationFrame(main);}ブロックの描画ブロックを描画する際に必要な変数は以下の4つとなります。フィールド枠を描画requestAnimationFrame(main);}ここまでで、このような画面が表示されていればOKです!結構テトリスっぽい感じが出てきたと思います。次に、フィールドの更新を行う関数を作成していきます。テトリスの場合は、ブロックが落ちてくる様子を描画していくため、先ほど作成したブロックのY座標用の変数「by」を更新していきます。テトリスは流れる様には落ちず、一定の間隔でマス単位の移動を行います。その間隔を計測するためのカウンタ変数を用意して、30カウントずつ移動するようにプログラムします。カウンタを更新requestAnimationFrame(main);}ですが、このままだと当たり判定がないため、ブロックは際限なく落ち続けてしまいます。今回は以上になりますが、次回は当たり判定の作成とともに、キー操作のプログラムも行っていきます。今回は3種類の敵が必要なので、「水色」の敵は「0」、「緑色」の敵は「1」、「黄色」の敵は「2」とします。最大発射数をJavaScript【Part1/5】HTML+JavaScriptでシューティングゲームを作る今回はHTMLとJavaScriptを使って、ブラウザ上で動かせるシューティングゲームの作り方を解説していきます。プレイヤーが敵を倒すとスコアが獲得できます。色の値は以下のように定数として用意します。その弾が存在しているかどうかのフラグ。フラグを表す変数は基本的に「true・false」で管理します。このシリーズで目指していくテトリスは、このようなものになります。このシリーズを通してテトリスの作り方を学んでいくことによって、この画像と同じものを作ることができます。コメントをキャンセルメールアドレスが公開されることはありません。R1カテゴリーJavaJavaFXJavaScriptPythonRこのサイトの管理人IT系だんしプログラミングが大好きな人。趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。