JavaScript プログラミング学習ゲーム集 | 楽しく学ぶ初心者向け
山崎講師ソースコードは難読化していないので、「ページのソースを表示」でソースコードをご覧になれます。
※動作確認用のブラウザは全て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」は等しいとしてプレイして下さい。
その他のゲーム
情報処理技術を学ぶことはできませんが、プログラミングを学べば、こんなことまでできるのだということを知って下さい。
クリックして点を稼ぐゲーム
※動作検証済み（Windows, Android, iPad, iPhone）
プレイヤーが制限時間内にできるだけ多くのクリックを行い、スコアを競います。
目指せ、高橋名人！！
反応速度計測ゲーム
※動作検証済み（Windows, Android, iPad, iPhone）
クリック速度は速かったでしょうか？
あなたは、自分の反射神経に自信はありますか？
このゲームは、ボタンの色が変わったらできるだけ早くボタンをクリックすることで反応速度を測定します。
スネークゲーム
※動作検証済み（Windows）
キーボードの矢印キーを使ってグリーンスネークを操作し、赤いエサを食べて成長していくことが目的のゲームです。壁に触れるとゲームオーバーです。
ブラックジャックアドバイザーゲーム
※動作検証済み（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（※） | ヒット | ヒット |
この戦略を使うことで、バーストのリスクを抑えつつ、ディーラーのバースト確率を活かした最善手を選択することができます。
このゲームをプレイすると如何にブラックジャックのルールがカジノ側に有利にできているかを体感でき、カジノ通いを辞めることができます。
落ちものパズルゲーム
※動作検証済み（Windows）
ブロックを操作して積み上げ、同じ色のブロックを3つ以上揃えると消えるゲームです。
レベルが上がるごとにブロックの落下速度が速くなり、障害物ブロックが追加され、難易度が増します。
爆弾ブロックも登場します。
ブロック崩しゲーム
※動作検証済み（Windows, Android, iPad, iPhone）
もはや何の説明もいらないでしょう。
素数だけを選択するゲーム
※動作検証済み（Windows, Android, iPad, iPhone）
スマートフォンでは、クリックの代わりにタップという操作があります。スマホのスクリーンを指で触れる操作です。
このゲームの目的は、表示される数字のターゲットをタップし、正しい素数を見逃さずにスコアを稼ぐことです。
全部で25個ある素数（2, 3, 5, 7など）をタップするとスコアが1点増えます。
素数でない数（4, 6, 8など）をタップするとスコアが1点減ります。
素数をタップせずに見逃すとスコアが1点減ります。
2から100までのすべての数字が表示され終わるとゲームが終了します。
ゲーム終了時、ハイスコアが更新されると、ブラウザのcookieに1年間保存されます。次回ゲームをプレイする際には、前回のハイスコアが表示されます。
素数が色分けされた練習モードとされていない本番モードがあります。
加速度センサーを使ったゴルフゲーム
※動作検証済み（Android, iPhone）
スマートフォンには加速度センサーというものが組み込まれています。
このセンサーは、デバイスの動きや傾きを検出します。
X、Y、Zの3軸方向の加速度を測定し、ユーザーの動作や端末の向きを感知します。
画面の自動回転、歩数計、ゲームでの傾き操作など、多くの機能が実現されます。
このゲームはその加速度センサーを使い、スマートフォンの傾きでボールを転がして穴にいれるゲームです。
以上。
投稿者プロフィール
- 代表取締役
-
セイ・コンサルティング・グループ株式会社代表取締役。
岐阜県出身。
2000年創業、2004年会社設立。
IT企業向け人材育成研修歴業界歴20年以上。
すべての無駄を省いた費用対効果の高い「筋肉質」な研修を提供します！
この記事に間違い等ありましたらぜひお知らせください。
最新の投稿
新人エンジニア研修講師2024年12月25日IT技術者の副業としての研修講師の魅力とは？- 新人エンジニア研修講師2024年12月25日IT技術者の定年後のお仕事としての研修講師の魅力とは？
- 全ての社員2024年12月25日TOEICでよく出てくる意外な意味で使われる英単語 50連発
- 新人エンジニア研修講師2024年12月25日新人エンジニア研修使える「アイスブレイク集」 45連発
