JavaScript プログラミング学習ゲーム集 | 楽しく学ぶ初心者向け

2024年7月25日 2025年5月25日山崎講師

山崎講師

ソースコードは難読化していないので、「ページのソースを表示」でソースコードをご覧になれます。

※動作確認用のブラウザは全てGoogle Chromeです。

情報処理技術を学べるゲーム

新人エンジニアのための重要単語当てゲーム

※動作検証済み（Windows, Android, iPad, iPhone）

JavaSE、MySQL、HTML、CSS、JavaScriptの重要なキーワードを覚えましょう。

間違い6回以内で単語を当てて下さい。

新人エンジニアのための重要単語タイピングゲーム

※動作検証済み（Windows, Android, iPad, iPhone）

JavaSE、MySQL、HTML、CSS、JavaScriptの重要なキーワードをタイピングするゲームです。

特に終了条件はありませんので延々と遊べます。

新人エンジニアのための重要単語シャッフルキーワードゲーム

※動作検証済み（Windows, Android, iPad, iPhone）

タイピングとハングマンでキーワードを覚えたらシャッフルキーワードゲームにチャレンジしてみましょう。

JavaSE、MySQL、HTML、CSS、JavaScriptの重要な単語がアルファベットをシャッフルされた状態で出題されるので、正しい単語を入力して下さい。

こちらも特に終了条件はありませんので延々と遊べます。

JavaScriptクイズゲーム

※動作検証済み（Windows, Android, iPad, iPhone）

キーワードに慣れたら文法も押さえましょう。

JavaScriptの文法クイズ全5問です。

16進数16パズルゲーム

※動作検証済み（Windows, Android, iPad, iPhone）

おなじみの16個のタイルを昇順に並べるゲームです。ただし、タイルは16進数で書かれています。以下のようになればゴールです。

練習用の3×3のパズルも用意しています。

CSS16進数カラーコード当てゲーム

※動作検証済み（Windows, Android, iPad, iPhone）

CSS3には名前のついた色が約140色あります。その色を当てるゲームです。

3段階の難易度から選択でき、全10問が出題されます。

なお、色のボタンはカラーコードの昇順に並んでいます。

6進数カラーコードは、#記号に続けて6桁の16進数（0-9およびA-F）で色を表します。

各2桁は、赤 (Red)、緑 (Green)、青 (Blue) の成分を示します。

たとえば、#RRGGBB のように表記されます。

RR: 赤の成分（00からFFまで）
GG: 緑の成分（00からFFまで）
BB: 青の成分（00からFFまで）

例:

#FFFFFF: 白 (R=255, G=255, B=255)

#000000: 黒 (R=0, G=0, B=0)

#FF0000: 赤 (R=255, G=0, B=0)

1024を目指すゲーム

※動作検証済み（Windows, Android, iPad, iPhone）

2進数に強くなるには、2の乗数を意識することです。例えば以下のような数値たちです。

10進数	2の乗数	2進数
1	2^0	1
2	2^1	10
4	2^2	100
8	2^3	1000
16	2^4	10000
32	2^5	100000
64	2^6	1000000
128	2^7	10000000
256	2^8	10000000
512	2^9	100000000
1024	2^10	1000000000

このパズルで2の乗数に強くなりましょう。

このゲームは、4x4のグリッド上で行われます。プレイヤーは矢印キーを使って全てのタイルを上下左右にスライドさせます。同じ数字のタイルが隣接している場合、一つに結合されます。目標は、2の10乗（すなわち1024）のタイルを作ることです。

10進数と2進数の神経衰弱

※動作検証済み（Windows, Android , iPad, iPhone）

おなじみ、2人のプレイヤーがカードをめくって同じ数値のペアを見つけるゲームです。

ただし、数値は1から8までの整数が、10進数と2進数で書かれています。

例えば、「10進数の1」と「2進数の0001」は等しいとしてプレイして下さい。

その他のゲーム

情報処理技術を学ぶことはできませんが、プログラミングを学べば、こんなことまでできるのだということを知って下さい。

Min-Max法で戦うコンピュータとのオセロゲーム

オセロゲーム

※動作検証済み（Windows, Android, iPad, iPhone）

JavaScript プログラミング学習ゲーム集 | 楽しく学ぶ初心者向け - — Min-Max法で戦うコンピュータとのオセロゲーム

ブラックジャックアドバイザーゲーム

※動作検証済み（Windows, Android, iPad）

ブラックジャックは、プレイヤーとディーラーが21に近い手札を競うカードゲームです。

各カードの数値はそのまま、絵札は10、エースは1または11とカウントします。

プレイヤーはカードを追加するか止めるかを選び、合計が21を超えるとバスト（敗北）します。

ディーラーは17以上で止め、16以下で引きます。

プレイヤーの合計が21に近く、ディーラーを超えると勝利です。自然のブラックジャック（エースと10の組み合わせ）は最高の手です。

最下部にプレイヤーの最善手が表示されますので、ブラックジャックの腕を上げる事ができます。

なお、最善手を文章でまとめると以下のとおりです。（ただし、スプリットやインシュアランス、ダブルダウンは考慮していません）

最善手のまとめ表

プレイヤーの手札(2枚の合計)	ディーラーの1枚目のカードが2～6	ディーラーの1枚目のカードが7以上
17以上	スタンド	スタンド
13～16	スタンド	ヒット
12	スタンド（4～6）	ヒット
11以下	ヒット	ヒット
ソフト13～16（※）	ヒット	ヒット