ようこそ、未来のクリエイター!
みんなが遊んでくれたヘビゲーム。実はこれ、君たちの身の回りにある「Web技術」だけで作られています。このページでは、ゲームの裏側を探検する特別なツアーにご招待! どうやってヘビが動いているのか、その秘密を一緒に解き明かしていこう!
このゲームの世界は、3人のすごい魔法使いの力で成り立っています。
ヘビがヌルヌル動いて見えるのは、最強の魔法「パラパラ漫画」のおかげ!
JavaScriptは、目にも止まらぬ速さで絵を描き直すことができます。その速さ、なんと1秒間に約60回! この魔法の呪文が requestAnimationFrame です。
この高速ループの中では、こんなことが一瞬で行われています。
この一連の流れを何度も何度も繰り返すことで、ヘビはまるで生きているかのように、滑らかに動いて見えるのです。
プログラミングの本当の面白さは、自分の手で世界を「書き換える」ことができること。さあ、君も魔法使いになるための第一歩を踏み出そう!
まずは、このゲームの設計図(プログラム)をダウンロードします。下のリンクをクリックして、ZIPファイルをダウンロードしてください。
ゲームのプログラムをダウンロード (nnct-4D-app-main.zip)
ダウンロードしたら、ZIPファイルを右クリックして「すべて展開」を選び、フォルダを開いておきましょう。(音声ファイルは権利上の問題のため削除しています)
次に、プログラムが書かれたファイル(呪文の書)を編集します。展開したフォルダの中にあるファイルを使います。Windowsに標準で入っている「メモ帳」というアプリを使いましょう。
script.js ファイルを右クリックし、「プログラムから開く」→「メモ帳」を選んで開きます。ctx.fillStyle = 'green'; という行を探してください。これは「ヘビの色を緑にせよ」という呪文です。'green' の部分を、'blue' や 'purple' など、好きな色(英語)に書き換えてみましょう。script.js の中で、今度は score += 10; という行を探してください。これは「エサを食べたらスコアを10点増やせ」という呪文です。10 の部分を、100 や 1000 に書き換えてみましょう。呪文を書き換えたら、いよいよ結果の確認です!
展開したフォルダの中にある game.html ファイルをダブルクリックして、Webブラウザで開いてください。(すでに開いている場合は、ページの再読み込みボタンを押します)
どうかな? ヘビの色が変わったり、スコアが爆発的に増えたりしたはずです。これがプログラミングの力です!
君はもう、立派な魔法使いの卵だ!
このツアーはどうだったかな?
ゲームで遊ぶのはもちろん楽しい。でも、「創る側」はもっとエキサイティングで、面白い! 私たちの学科では、今日紹介したような魔法(プログラミング)を基礎から学び、自分のアイデアを形にする力を身につけることができます。
君も私たちと一緒に、世界を驚かせるような、最高の魔法使いを目指してみませんか?