Web Game: テトリス風のゲーム
次のブロック
- レベル 1
- ライン 0
- 点数 0
キーボードでの操作
- キー 動作
- ← 左移動
- → 右移動
- ↑ 回転
- ↓ ダウン
- Space 下まで落下
- P ポーズ ON/OFF
ブラウザー(JavaScript)でテトリス風のゲームをプレイ!
PCはキーボード、スマホはボタン、iPadは両方での操作に対応しています。
ゲームの動きを理解するための学習用には、このページの HTMLと利用しているJavaScriptのソースを確認!
JavaScriptで作ってみよう!
- このページのソースを確認すると HTMLとJavaScriptのファイルがわかります。JavaScriptのソースと同じ場所に .min が無いファイル名で圧縮されていないファイルが置いてあります。
- ソースコードは、クラス化してないシンプルな作りでコメントも入れてあり、コメントを含めて 800 行ぐらいです。
- ちょっとだけソースコードを解説。詳しくはソースコードを参照してください。
HTML側:
- 描画するための canvas エリア(ゲーム画面、スコア画面)を配置
- 操作用のボタンを配置(モバイル端末向け)
JavaScript側:
- 画面サイズなどの初期設定を行う変数の初期化
- 状態を保持する変数の定義
- HTML側と連携するのに document.getElementById を利用
- 落ちてくる形を定義
- 描画や動作のための関数を定義
- 動きの制御
- キーイベント(キー入力)の制御
- タッチイベントの制御