Web Game: 2048風のゲーム
遊び方
矢印キーでタイルを上下左右に移動させます。同じ数字のタイルが触れると合体します(数字が足される)。足された数字が 2048に到達したら勝ちです!
操作方法
- キー / 指でボード動作
- ← / 左へスワイプタイルを左へ移動
- → / 右へスワイプタイルを右へ移動
- ↑ / 上へスワイプタイルを上へ移動
- ↓ / 下へスワイプタイルを下へ移動
ブラウザー(JavaScript)で2048風のゲームをプレイ!
PCはキーボード、スマホはスワイプ、iPadは両方での操作に対応しています。
Open Sourceの 2048 を利用して学習用に作っています。
ゲームの動きを理解するための学習用には、このページの HTMLと利用しているJavaScriptのソースを確認!
JavaScriptで作ってみよう!
- 2048.htmlの gameAreaと 2048.min.js, 2048.css で構成されています。
- このページ(2048.html) のソースを確認すると HTMLとJavaScriptのファイルがわかります。JavaScriptのソースと同じ場所に .min が無いファイル名で圧縮されていないファイルが置いてあります。
- ソースコード(2048.js) は、クラス化してないシンプルな作りでコメントも入れてあり、コメントを含めて 900 行ぐらいです。
HTML側:
- 描画するための ゲームエリア(gameArea)を配置
- ゲームエリアには、ボード部分、スコア部分、ボタン部分があります
JavaScript側:
- 初期化
- キーイベント(キー入力)の制御
- 画面動作の制御
- 画面レイアウト
- タイルの制御
- スコアの制御
- ゲームの制御