「scene」変数の作成タイトルの中身ベストスコア処理おわりに!スピードアップ機能SPACEキーでスピードアップ「update」関数内の「30カウントずつ」という「if」文に新たな条件文を付け加えます。徐々にスピードアップ(難易度アップ)スピードを管理するための「spd」という変数を作り、「spdカウント」ずつ落下させる、処理をします。「spd」の値が「20」なら、「20カウントずつの落下」になります。この「spd」の値が小さくなることでスピードがアップしていきます。際限なく小さくなるとゲーム性が崩壊するので、「8」未満にはならないようにします。現状だとキー操作はいついかなる時も可能です。それだと場外へどこまでも行くことができてしまいます。(ブロック誕生の瞬間に右・左キーを連打で場外へ可能)なので、フィールド内に入ってからキー操作が可能なようにします。省略スコア・ゲームオーバー処理スコア処理スコア処理は、「score」という変数を用意し、削除されたブロックの色・数によって得点を追加していきます。false;}//省略ゲームオーバー処理ゲームオーバー処理は「0行目にブロックが登録されたら」という条件で判定します。薄い水色で示された部分が「0行目」です。ここにブロックが登録されるということは、次のブロックが落下した時点で完全に溢れてしまうことを意味します。その時点でゲームオーバーとします。上の画像のようなイメージで、スコアや操作方法、削除した色の個数を表示します。この際、削除した色は「delnum」という配列変数を用いてその個数の値を管理します。表示は座標・色・フォント設定、そして描画関数を使っていくだけの作業ですので、コピペでOKです。最後にタイトル画面の作成と切り替え処理を作成します。「scene」変数の作成このテトリスでは「タイトル画面」と「ゲームプレイ画面」の2つの画面が存在します。その画面の状態を「scene」という変数を用いて管理します。true;break;}}}requestAnimationFrame(main);}さて、ここで「init」関数を作成した意味が出てきました。(上記38行目)もし「init」関数を作成せず、変数宣言の段階で値を代入していただけだと、このタイミングでまた変数代入を全部行う必要が出てきてしまいます。なるとスパゲティプログラム化まったなしです!タイトルの中身では、タイトル画面の中身を作成していきましょう。理想は以下の画像です。非常な簡素な作りですが、ポイントは「最高スコア」。タイトル画面を作成した後はこの最高スコア処理を作成して完成にこぎつけます。最後にベストスコア処理を作成します。bestscore);break;}}}requestAnimationFrame(main);}ベストスコアの更新は「?・:文(3項演算文)」を使います。式の内容な以下の通りです。aが10なら「20を代入」、そうでなければ「0を代入」この3項演算式を利用し、「scoreがbestscoreより高いならそのscoreを代入」し、「そうでなければ今までのbestscoreを代入」するという式を記述します。おわりに!さて、これでテトリスは完成しました!ここまでお疲れ様でした。これでJavaScriptの腕前も相当上がったのではないでしょうか?ここで培った経験はのちに必ず技術として、知識として活きてきます。このシリーズで目指していくテトリスは、このようなものになります。このシリーズを通してテトリスの作り方を学んでいくことによって、この画像と同じものを作ることができます。今、ブロックが壁・ブロックに着地した段階までできました。色の値は以下のように定数として用意します。このように文字列で定義したのは、「coJavaScript【Part1/5】HTML+JavaScriptでシューティングゲームを作る今回はHTMLとJavaScriptを使って、ブラウザ上で動かせるシューティングゲームの作り方を解説していきます。プレイヤーが敵を倒すとスコアが獲得できます。このテトリスにおいて、何もないマスは「0」、壁を「9」とし、それ以外の数字をブロックとします。コメントをキャンセルメールアドレスが公開されることはありません。R1カテゴリーJavaJavaFXJavaScriptPythonRこのサイトの管理人IT系だんしプログラミングが大好きな人。趣味でゲームやツール製作をしながら、プログラミング記事を書き続けています。