CodeCombatでプログラミング学習

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(ハングリーであれ,愚か者であれ)」.

愛知県名古屋市にある椙山女学園大学 文化情報学部 向研究室の公式サイトです. 専門は情報科学であり,人工知能やデータベースなどの技術要素を指導しています. この公式サイトでは,授業で使用している教材を公開すると共に, ベールに包まれた女子大教員のミステリアスな日常を4コマ漫画でお伝えしていきます. サイトに関するご意見やご質問はFacebookまたはTwitterでお問い合わせください.

スポンサーリンク