https://gyazo.com/f9259cc324d105af94fc6b36926e4a64

CodeCombatとは

CodeCombatはRPG風のゲームを遊びながらプログラミングを学ぶことができるプラットフォームです。 オープンソースのコミュニティで運営されており、2013年に公開されて以降、500人以上のプログラマーがこのプロジェクトに関わって開発が続けられています。 IEやChromeなどのウェブブラウザさえあれば、プラットフォームに参加できることが特徴であり、50以上の言語に翻訳され、世界で5,000,000人以上のプレイヤーがこのプラットフォームでプログラミングを学んでいます(2016年11月18日現在)。 本格的にプラットフォームを利用するには、アカウント登録が必要ですが、今回はアカウント登録はしないで、プログラミングの基本的な文法を学ぶ「キースガードのダンジョン」に挑戦してみましょう。 この授業を受ける多くの皆さんは「プログラミングは難しい」という先入観を持っているのではないでしょうか。 この授業が終わった頃には「プログラミングは楽しい」と思ってもらえることを期待します。

https://gyazo.com/d4755f8a5ae46d02259d313e8a1a077f

学習コースの選択

早速、CodeCombatでプログラミング学習を始めましょう。 まずは、下記のリンクをクリックしてブラウザでCodeCombatを開きます。

CodeCombat

CodeCombatを開いたら、「今すぐプレイ」をクリックしましょう。 すると、学習コース(ダンジョン)を選択するページに遷移します。

https://gyazo.com/e9196a9357aa338197a133d7b10aa910

プログラミングに必要な、文法、メソッド、パラメータなどの基本的なスキルを学ぶことが出来る学習コースが「キースガードのダンジョン」です。 キースガードのダンジョンの「ゲームスタート」をクリックしましょう。

https://gyazo.com/adb30ddba80b8928e19c9b6057f3e25d

キースガードのダンジョン ~始まりの回廊~

キースガードのダンジョンは、40のステージで構成されています。 まず最初は「始まりの回廊」に挑戦します。 「始まりの回廊」をクリックしすると、このステージの概要が表示されます。 このステージの目的は「宝石を集めること」のようです。 「壁の針」がちょっと気になりますね。 では、ゲームスタートを選びましょう。

https://gyazo.com/b85c31675652aeb734b0155b84aaa9f3

https://gyazo.com/9dac272f7bf876970f5f89d3857eda0e

次に、ヒーロー(主人公)を選択する画面になります。 最初は4人しか選べませんが、ゲームを進めると選択できるヒーローが増えていきます。 好きなヒーローを選びましょう。 剣士の「サー・サーリン・サンダフィスト」を選択したとして説明を続けます。 また、この画面では学習するプログラミング言語を選択します。 ここでは、ウェブで用いられる「JAVASCRIPT」を選びましょう。 ヒーローとプログラミング言語の選択が終わったら「次へ」をクリックしましょう。

https://gyazo.com/f242bbccd036ae520c9b9e29939970fa

次に、武器や防具などを装備するイベントリの画面になります。 ここでは、ヒーローを上下左右に動かすための「質素な靴」を装備します。 靴のアイコンをダブルクリックすると装備することが可能です。 「質素な靴」を装備したら「ゲームスタート」をクリックしましょう。

https://gyazo.com/d5701b9a018257308b01a13a83a6d3d3

https://gyazo.com/cd6e7dfb478c83373d222051463309b3

さぁ、とうとうゲームが開始しました。 「レベルスタート」をクリックしましょう。 このステージの目標は「壁の針をよける」「宝石を集める」の2つです。 プログラムをコーディングして目標を達成しましょう。

https://gyazo.com/488e6f3534647cadd46d51ea620705d1

マップを確認すると、ヒーローはスタート位置から右に進んだ後に、壁の針を避ける必要がありそうです。 ヒーローを下に進めるには「hero.moveDown()」というコードを入力すれば良さそうです。 では、6行目に上記のコードを追加して、「実行」をクリックしましょう。

https://gyazo.com/ba9843c1d66645d499aa52304a757a1d

https://gyazo.com/f58f3fa15f1be8dbbfac5d10376a7a45

これで、残るはヒーローの右にある宝石をゲットするだけです。 ヒーローを右に進めるには「hero.moveRight()」というコードを入力しましょう。 では、7行目に上記のコードを追加して、「実行」をクリックしましょう

https://gyazo.com/3bcc92c3a867c68c4781894879744938

宝石をゲットして、全ての目標を達成したため、ゲームクリアです。 「完了」をクリックしましょう。 獲得した経験値、ジェム、武器・防具を確認したら「次へ」をクリックします。

https://gyazo.com/08cc26ff9995c13a1e1b9d408fe19529

https://gyazo.com/6e3216e5fe4ae420cf80bc85342ae726

これで、最初のステージは終了です。 プログラミングに興味が湧いてきましたか。 ではその調子で次のステージに挑戦してみましょう。

キースガードのダンジョン ~宝石の部屋~

次のステージは「宝石の部屋」です。 このステージの目的は「素早く宝石を集めること」のようです。 「将来必要になる」との暗示は、女性にとっては嬉しいかもしれませんが、男性にとっては恐怖です(笑)。 では、ゲームスタートを選びましょう。

https://gyazo.com/9b2a09838bf7a80ff6014ffd16196c66

https://gyazo.com/2d3b333b015a96b24915f8e4d1d18ca1

イベントリの画面では、最初のステージで手に入れた「皮のベルト」を装備しておきましょう。 「皮のベルト」を装備したら「ゲームスタート」をクリックしましょう。

https://gyazo.com/4dad85e67ca5cb73c55c92c98905646c

今度のステージでも目標は「壁の針をよける」「宝石を集める」の2つです。 だけど、マップが先程よりも複雑になっているようです。 では、ヒーローを移動させるコードを駆使して、目標を達成させてください。

https://gyazo.com/b4323be54acc70099573bc87c35a36ea

全ての宝石をゲットしたらゲームクリアです。 「完了」をクリックしましょう。 獲得した経験値、ジェム、武器・防具を確認したら「次へ」をクリックし、 ステージの選択画面に戻ります。

https://gyazo.com/14d17022ed0148d568b24172b627f483

https://gyazo.com/8448777da4507fb0798717d8e7d994a2

キースガードのダンジョンの全クリアを目指せ!

ここからは、皆さん自身で考えながら、ゲームを進めてみて下さい。 鬼に見つからないで宝石を集める「影の番兵」、 鬼を攻撃して宝石を集める「本当の名前」、 複数の鬼を倒す「上げられた剣」など、まだまだステージは多く残っています

https://gyazo.com/9515c5adff7e54d96fbb9c6ef70ba300

https://gyazo.com/d75d255873eb2a9d07753700ec74a2de

https://gyazo.com/dc8284e5efcd7f807b5c5834824af257

最後に

CodeCombatを利用したプログラミング学習はいかがだったでしょうか。 「プログラミングは難しい」から「プログラミングは楽しい」に変化したでしょうか。 情報技術の発展は目覚ましく「プログラミング」が必修科目になる日も決して遠くはありません。 文化情報学科では、プログラミングの技術はもちろん「人工知能」や「データベース」などの最先端の情報技術も学ぶことができます。 文化情報学科を卒業する頃には、アプリやゲームを遊ぶだけではなく、実装・開発できる人材になって欲しいと思っています。 最後に、アップルの創設者である故スティーブ・ジョブスの言葉を皆さんにお贈りします。 「Stay hungry, stay foolish(ハングリーであれ、愚か者であれ)」。