HTML5 で遊びながら学ぶ (10) - テトリス コントロール インターフェイス (ソースコード)

本当はいくつか文章を書きたかったのですが、前の記事の反響があまり良くなかったため、当初の予定では「蛇」を書く予定でした。ソースコードに直接書き込むことができます。

今回は、以前のプログラムをベースに次の機能を追加しました:

1. キーボード制御

2. 開始、一時停止

3. 行数としての空白行の一時停止効果増加、スピードアップ

5、効果音

などを解消します。

前回の記事のモデルのコードは既にかなり詳しく書かれており、制御とグラフィックスのコードが追加されているだけで、かなりまとまった記述になっていると感じます。

ヒント

: この記事のテトリス ゲームを実行するには、Chrome ブラウザが必要です。Firefox ブラウザでも実行できますが、効果音はありません。

最後に長文がいくつかありますが、読みたい場合は読んでください。

コードのこの部分は主に 2 つの

タイマー

で構成されています。

最初のタイマーは、間隔ごとに TickMessage メッセージを生成します。このメッセージの処理は、落下後にブロックが消えるたびに、トリガーの速度が速くなります。

2 番目のタイマーはメッセージ

Loop

で、可能な限り高速にループするため、時間間隔は 0 に設定されます。

ゲーム全体のモデル部分とコントロール部分は多くの イベント

を生成し、ユーザーがいつボタンを押すか誰も分からないため、ここではメッセージ

queue が維持されます。 新しい状況が発生すると、対応するメッセージがメッセージキューに追加され、メッセージループはメッセージが存在する限りそこからメッセージを取り出して処理します。

グラフィック部分では、7 色の小さな正方形を事前に描画し、

キャッシュ

して、後で必要になったときに直接使用できるようにすることが重要なポイントです。そうしないと、一時的に描画すると、ブロックの数が増加するにつれてプログラムが停止してしまいます。

以上がHTML5 で遊びながら学ぶ (10) - テトリス コントロール インターフェイス (ソースコード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。