🐍【探検しよう!】ヘビゲームの裏側ツアー!

ようこそ、未来のクリエイター!

みんなが遊んでくれたヘビゲーム。実はこれ、君たちの身の回りにある「Web技術」だけで作られています。このページでは、ゲームの裏側を探検する特別なツアーにご招待! どうやってヘビが動いているのか、その秘密を一緒に解き明かしていこう!

登場するのは「3人の魔法使い」

このゲームの世界は、3人のすごい魔法使いの力で成り立っています。

ヘビが動く魔法「ゲームループ」の正体

ヘビがヌルヌル動いて見えるのは、最強の魔法「パラパラ漫画」のおかげ!

JavaScriptは、目にも止まらぬ速さで絵を描き直すことができます。その速さ、なんと1秒間に約60回! この魔法の呪文が requestAnimationFrame です。

この高速ループの中では、こんなことが一瞬で行われています。

  1. 画面を一度まっさらに消す
  2. ヘビの位置をほんの少しだけ動かす
  3. 新しい位置にヘビを描く
  4. エサやアイテムを描く
  5. ヘビが壁にぶつかっていないかチェックする

この一連の流れを何度も何度も繰り返すことで、ヘビはまるで生きているかのように、滑らかに動いて見えるのです。

🔥 君も挑戦!魔法使いになってみよう!

プログラミングの本当の面白さは、自分の手で世界を「書き換える」ことができること。さあ、君も魔法使いになるための第一歩を踏み出そう!

ステップ1:ゲームのプログラムをダウンロードしよう

まずは、このゲームの設計図(プログラム)をダウンロードします。下のリンクをクリックして、ZIPファイルをダウンロードしてください。

ゲームのプログラムをダウンロード (nnct-4D-app-main.zip)

ダウンロードしたら、ZIPファイルを右クリックして「すべて展開」を選び、フォルダを開いておきましょう。(音声ファイルは権利上の問題のため削除しています)

ステップ2:メモ帳で「呪文の書」を開こう

次に、プログラムが書かれたファイル(呪文の書)を編集します。展開したフォルダの中にあるファイルを使います。Windowsに標準で入っている「メモ帳」というアプリを使いましょう。

挑戦その1:ヘビの色を変える魔法!

  1. 展開したフォルダの中にある script.js ファイルを右クリックし、「プログラムから開く」→「メモ帳」を選んで開きます。
  2. メモ帳が開いたら、ctx.fillStyle = 'green'; という行を探してください。これは「ヘビの色を緑にせよ」という呪文です。
  3. この 'green' の部分を、'blue''purple' など、好きな色(英語)に書き換えてみましょう。
  4. 書き換えたら、メモ帳の「ファイル」メニューから「上書き保存」を選んで、変更を保存します。

挑戦その2:スコアを10倍にする魔法!

  1. 同じく script.js の中で、今度は score += 10; という行を探してください。これは「エサを食べたらスコアを10点増やせ」という呪文です。
  2. この 10 の部分を、1001000 に書き換えてみましょう。
  3. 書き換えたら、先ほどと同じように「上書き保存」をします。

ステップ3:魔法の結果を確認しよう!

呪文を書き換えたら、いよいよ結果の確認です!

展開したフォルダの中にある game.html ファイルをダブルクリックして、Webブラウザで開いてください。(すでに開いている場合は、ページの再読み込みボタンを押します)

どうかな? ヘビの色が変わったり、スコアが爆発的に増えたりしたはずです。これがプログラミングの力です!

君はもう、立派な魔法使いの卵だ!

未来の魔法使いを目指す君へ

このツアーはどうだったかな?

ゲームで遊ぶのはもちろん楽しい。でも、「創る側」はもっとエキサイティングで、面白い! 私たちの学科では、今日紹介したような魔法(プログラミング)を基礎から学び、自分のアイデアを形にする力を身につけることができます。

君も私たちと一緒に、世界を驚かせるような、最高の魔法使いを目指してみませんか?