Webゲーム制作の授業、今回はその3としてプログラミングの基礎「変数と条件分岐(if)」についてです。
ゲーム制作を通してプログラミングの基礎を学ぼう
授業ではenchant.jsというライブラリ(プログラムのパーツ)を使って、効率よくプログラミングを行うことで、体験重視の授業になるようにしていました。
変数と条件分岐
ゲーム制作に限らず、様々なデータを扱ったり(変数の利用)、「こんな時はどうする?」といった場合によって行う処理を変えたり(条件分岐)、プログラミングの基礎知識として分かっておきたいことがいろいろとあります。
ただ聞いても分からない
私が初めてプログラミングに触れたのは、大学の授業(19歳頃?)ででした。その時の言語はFORTRAN。条件分岐やループ処理をしたのはぼんやり覚えています。クラスメイトに手伝ってもらってなんとか課題を提出したものの、分かった実感は全くありませんでした。
その後、工学部のC言語の授業を履修して出てみたものの、講義で行われた詳細な「メモリ」の解説で心が折れました。当時理学部だった私にとって初めて知ることばかり。聞くこと全てが分かりませんでした(笑)。
とにかくトライ&エラー
そんな私でもその後プログラミングを仕事にできたのですから、興味のある方はぜひ心配しないで楽しんでやってみてほしいと思います。
プログラミングの学習は外国語を覚えるのにも似ています。単語と文法を習ってみただけではまだしゃべれるようにはならないですが、とにかく使ってみて経験を重ねることで使えるようになります。
ある程度のところまで行けたらあとは楽になるはずです。
コンピュータは怒らない
プログラムの入力を間違えて滝のようなエラーを吐きだそうと、コンピュータは怒りません。今はコンピュータが即壊れる心配をせずにプログラミングを学習してみることができますので、遠慮は無用です。
それなのに。吐き出されたエラーを見ながら「あ~ごめんごめん」「そうだよね~」などと呟くようになったら。あなたも立派なプログラマかも(笑)
授業のプリント
話が脱線しましたが、授業で配布したプリントは次のようなものです(無理矢理)。
変数とif文を使った描画制御
今日のMission
1.リソース(画像)をプロジェクトに追加し、Spriteクラスを使って適切に表示ができる。
2.flag_x === true(26行目) なぜ=(イコール)が3つなのか説明できる。
3.変数flag_xがどうして必要なのか説明できる。
<演習問題例>
1)準備
code.9leap.netにログインする。
http://code.9leap.net/codes/show/151788 からフォークする。
2)「Add Resource」ボタンからクマの画像を追加する。
3)15行目以降を記述し、クマを表示させる。変数名はbearとする。
4)フラグの利用
①~④の処理を書いてみましょう。1つ書いたらすぐに実行するとデバッグが楽です。
// 方向フラグをtrueに
var flag_x = true;
// くまが表示されているとき、常に行う処理
bear.addEventListener(Event.ENTER_FRAME,function()
{
if(flag_x === true)
{
if(bear.x < 300){
// ① クマを3ピクセル右へ動かす
}
else
{
// ② 方向フラグをfalse(左)にする。
}
}
if(flag_x === false)
{
if(bear.x > 0){
// ③ クマを3ピクセル左に動かす
}
else
{
// ④ 方向フラグをtrue(右)にする
}
授業のながれ
授業の冒頭10分程度で説明を行った後は、全員が達成できることを目指して、学生が自由に課題に取り組みます。教室内の立ち歩きも相談も自由です。学生が自主的に教室のホワイトボードを使って、ミニ授業をおこなっても構いません。
全員が達成するためには協働が求められます。様々なコミュニケーションスキルを学ぶ機会にもなります。
クラス全体としての達成度については授業の最後で確認をします。
プログラミングを楽しむ
作ったものが動きはじめるのは、誰にとっても驚きや楽しさがあることだと思います。
それを繰り返し体験しながら試行錯誤を重ねていけるのが、プログラミングの良いところです。