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進数
12^01
22^110
42^2100
82^31000
162^410000
322^5100000
642^61000000
1282^710000000
2562^810000000
5122^9100000000
10242^101000000000

このパズルで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の組み合わせ)は最高の手です。

落ちものパズルゲーム

※動作検証済み(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軸方向の加速度を測定し、ユーザーの動作や端末の向きを感知します。

画面の自動回転、歩数計、ゲームでの傾き操作など、多くの機能が実現されます。

このゲームはその加速度センサーを使い、スマートフォンの傾きでボールを転がして穴にいれるゲームです。


以上。