【コピペで動く】ブロック崩しゲームの作り方｜親子プログラミング

こんにちは！プログラミング未経験パパのcospaoです。

お子さんとゲームセンターやおうちで、こんな経験はありませんか？

「ブロック崩し、もう1回やりたい！」
「こんどは自分で作ってみたいな」

その「もう1回！」の気持ち、実はプログラミングで作るゲームでも味わえるんです。今回は、バーを動かしてボールを跳ね返し、カラフルなブロックをこわしていく、昔からみんなに愛される「ブロック崩し」を親子で作ってみましょう。

むずかしい準備は一切ありません。ここにあるコードをコピーして、ファイルに貼り付けるだけ。パソコンでもスマホでも動きます。プログラミングが初めてのパパ・ママでも大丈夫です。

まずは完成品で遊んでみよう！

百聞は一見にしかず。まずは完成したゲームで遊んでみてください。「▶ スタート」を押すと、ボールが飛び出します。バーを左右に動かしてボールを跳ね返しましょう。ふつうのブロックは10点、いちばん上の金ブロックは30点。制限時間は60秒です。ボールが下に落ちてもゲームは終わりません。もう一度スタートの位置から飛び出します。60秒で何点とれるか、家族で競ってみてくださいね。

どうでしょう？ボールがカーンと跳ね返ってブロックがパリンと消える気持ちよさ、クセになりますよね。このゲーム、実は3つの仕掛けだけでできています。次で種明かしをします。

今日つくるもの：ブロック崩しゲーム

ルールはとても簡単です。

バーを左右に動かして、ボールを跳ね返す
ボールが当たったブロックは消えて、ふつうは10点
いちばん上の金ブロックは30点とお得
ボールが下に落ちても大丈夫。もう一度スタートの位置から出てくる
制限時間は60秒。全部こわせたら、その時点で大成功！

なぜこのゲームが動くの？（3つの仕掛け）

仕掛け1：住所（座標）。 ボールもバーもブロックも、画面の中の「住所」を持っています。ボールは「横が何番、縦が何番」という住所を少しずつ変えながら動いているんです。住所が変わるから、ボールが動いて見えるんですね。

仕掛け2：壁で跳ね返る（反射）。 ボールが壁やバー、ブロックにぶつかったら、進む向きを反対にします。壁に当たったら横向きを反対に、バーやブロックに当たったら縦向きを反対に。これだけで、ボールがあちこち跳ね回るんです。

仕掛け3：「当たった？」チェック（当たり判定）。 ボールが動くたびに、コンピュータが「ブロックの住所と重なった？」をチェックしています。重なったらブロックを消して、点数を増やしています。ゲームの気持ちよさは、このチェックが作っているんです。

この3つが分かればOK。あとはコードをコピペするだけです。

コピペで動く完全コード

では、ソースコードをお渡しします。やり方は3ステップです。

下のボックスのコードを全部コピーする（ボックスをクリックすると全選択されます）
Windowsならメモ帳、Macならテキストエディットに貼り付ける（Macは「標準テキスト」形式にしてください）
ファイル名を game.html として保存し、ブラウザで開く

▼ この下のコードを全選択してコピーしてください ▼

↑ ボックスの中をクリックすると全選択されます。

開いて「▶ スタート」を押せば、さっき遊んだゲームそのままが動きます。もし真っ白な画面になったら、ファイル名が game.html になっているか、文字化けしていないかを確認してみてください（直し方はチートシートにも書きました）。

親のチートシート（このまま言ってあげて）

お子さんに説明するとき、そのまま使えるセリフ集です。専門用語も、身近なものに言い換えてあります。

そのまま言えるセリフ集

「ボールがどこにいるかは、住所で決まってるんだ。住所が変わるから動いて見えるんだよ」（＝座標）
「壁に当たったら向きを変えるのは、ボールが壁で跳ね返るのと同じだね」（＝反射）
「ボールが動くたびに、コンピュータが『ブロックと重なった？』って見張ってるんだよ」（＝当たり判定）
「点数はね、コンピュータが頭の中のノートに書き足してるんだ」（＝変数・スコア）
「60秒たったら終わるのは、砂時計が落ちきるのと同じだね」（＝タイマー）
「バーの真ん中で受けると真上に、端で受けると斜めに飛ぶよ。ねらって角度を変えてみよう」（＝角度のコントロール）
「ボールが落ちても大丈夫。あきらめずにもう一度だね」（＝失敗しても続けられる設計）

数字の意味だけ、こっそり確認

コードの一番上に、数字がまとめて書いてあります。ここが「ゲームのツマミ」です。

GAME_TIME = 60 … ゲームの長さ（秒）
BRICK_SCORE = 10 … ふつうのブロック1個の点数
GOLD_SCORE = 30 … 金ブロック1個の点数
BALL_SPEED = 4 … ボールの速さのもとになる数字（実際の動きは横・縦の向きと組み合わせます）
PADDLE_WIDTH = 90 … バーの幅。大きいほど当てやすい
ROWS = 6 … ブロックの段数
COLS = 8 … ブロックの列数

困ったときのチェックリスト

画面が真っ白 → ファイル名が game.html.txt になっていないか確認（Windowsは拡張子表示をオンに）
文字化けする → 保存するときの文字コードを「UTF-8」にする
バーが動かない → マウスで画面の上を動かすか、キーボードの←→キーを使ってみてください。スマホなら指でなぞります

子どもとミニ改造してみよう！

動いたら、次は改造です。コードの一番上の「★ここを変えると改造できるよ」の場所だけを触るので、安心して挑戦してください。うまくいかなくなったら、もう一度コピペし直せば元通りです。

レベル1：数字を変えてみよう

短い勝負に → GAME_TIME を 60 から 30 に（30秒のスピード勝負）
長く遊びたい → GAME_TIME を 60 から 120 に（2分モード）
点数をド派手に → BRICK_SCORE を 10 から 100 に（100点ずつ増えて気持ちいい！）
金ブロック祭り → GOLD_SCORE を 30 から 50 に（金ブロック狙いがもっとお得）
やさしい太バー → PADDLE_WIDTH を 90 から 150 に（ボールを受けやすくなる）
鬼モードの細バー → PADDLE_WIDTH を 90 から 60 に（当てるのがドキドキ）

レベル2：見た目を変えてみよう

ブロックの色を変える → コードの中の色コード（例："#ef5350"）を好きな色に変える
背景の色を変える → background: #e3f2fd の色コードを変える（例：#e3f2fd を #fff3e0 にすると夕方色）
ボールの色を変える → ボールを描く部分の "#ffffff" を "#ffeb3b" などに変える

レベル3：物足りない人への挑戦状（ルールを自分で作る）

「簡単すぎる？？」「もっと難易度を上げたい？？」「ゲームオーバー要素もほしい？」——大丈夫、全部この記事のコードで、自分で好きなように変えられます。やり方はこの3つ。ここからはコードの書き換えに挑戦する上級編です。

挑戦1：ボールが落ちたらゲームオーバーにする

今のゲームは、ボールが落ちても最初からやり直しになります。これを「落ちたら終わり」に変えます。コードの中で ballY > 390 と書かれた場所を探して、その中身をこう書き換えてください。

if (ballY > 390) {
  messageEl.textContent = "おっと！ボールが落ちたよ。もう一度スタートの位置から！";
  resetBall();
}

if (ballY > 390) {
  endGame("ボールが落ちちゃった！ゲームオーバー。スコアは " + score + " 点です！");
  return;
}

やっていることはシンプルで、「ボールを最初の位置に戻す」の代わりに、「ゲームを終わらせる命令（endGame）」を呼ぶようにしただけです。文章（” ” で囲まれた部分）は、好きな言葉に変えてOKです。

挑戦2：時間とともに、だんだん速くする

2か所に手を入れます。まず、コードの一番上「★ここを変えると改造できるよ★」の場所に、この2行を足してください。

var SPEED_UP_EVERY = 10; // 何秒ごとに速くなるか
var SPEED_UP_RATE = 1.15; // 速くなるときの倍率

次に、setInterval と書かれた「1秒ごとに時間を数える」場所の中身を、こう書き換えます。

timerId = setInterval(function () {
  timeLeft = timeLeft - 1;
  timeEl.textContent = timeLeft;
  if (timeLeft <= 0) endGame();
}, 1000);

timerId = setInterval(function () {
  timeLeft = timeLeft - 1;
  timeEl.textContent = timeLeft;
  if (timeLeft <= 0) { endGame(); return; }
  var elapsed = GAME_TIME - timeLeft;
  if (elapsed > 0 && elapsed % SPEED_UP_EVERY === 0) {
    speed = speed * SPEED_UP_RATE;
    ballDX = ballDX * SPEED_UP_RATE;
    ballDY = ballDY * SPEED_UP_RATE;
  }
}, 1000);

意味は「10秒たつごとに、ボールの速さを1.15倍にする」。数字を変えれば加速のペースも自由自在です（5秒ごとに、1.3倍、など）。

挑戦3：ブロックを山ほど増やして、全部こわすのを至難のわざにする

これは数字1つだけ。ROWS を 6 から 10 に変えると、ブロックは8列×10段＝80個になります。60秒では、まず全部はこわせません。「全部こわしたら勝ち」ではなく「何点取れるか」の勝負に早変わりです。逆に小さい子向けに減らしたいときは、ROWS を 4、COLS を 6 にすると、24個の短いゲームになります。

もっと手軽にボールを速く／ゆっくりに → ボールの最初の向き ballDX = 1.5 と ballDY = -3.8 の数字を変える（速くは 2.0 と -4.5、ゆっくりは 1.0 と -2.5）
お子さんが考えたルールを、ぜひ数字や書き換えに落とし込んでみてください。「どうすればそうなる？」を考えるのが一番の勉強です

親御さんへのメッセージ：失敗こそが最高の先生

改造して画面が真っ白になっても、決して叱らないでください。むしろ「おめでとう！壊れる理由を見つけたね！」と声をかけてあげてほしいのです。プログラマーにとってエラーは敵ではなく、「コンピュータは言われた通りにしか動かない」ことを教えてくれる正直な先生です。「どこを変えたから動かなくなったのかな？」と一緒に探す時間こそが、論理的に考える力を育てます。

「もっと本格的にゲームを作りたい」と言い出したら（PR）

※このセクションは広告（アフィリエイトリンク）を含みます。

コピペで作る楽しさに目覚めたお子さんには、オンライン教材「デジタネ」という次のステップもあります。マイクラやRobloxを使いながら、ゲーム作りを通してプログラミングを学べる小中学生向けの教材です。無料トライアルがあるので、合うかどうかは試してから判断できます。

オンラインで学ぶ！小中学生向けプログラミング「デジタネ」

まとめ

今日は、バーを動かしてボールを跳ね返し、ブロックをこわすゲームを、コピペだけで作りました。おさらいすると、ゲームは「住所（座標）」「壁で跳ね返る（反射）」「当たった？チェック（当たり判定）」の3つの仕掛けでできています。この考え方は、ほかのどんなゲームにも応用できます。

家族でスコアを競うと、もっと盛り上がりますよ。親子で「ああでもない、こうでもない」と言いながら改造する時間が、きっと良い思い出になります。

【コピペで動く】ブロック崩しゲームの作り方｜子どもと作るはじめてのプログラミング