ディスディスブログ

気分変調症の男がテレビ番組の感想やカメラ、ファッションのことなどを書きます

ディスディスブログ

『CodeCombat』(コードコンバット)でファンタジー世界で剣をふるいながらプログラミング (JavaScript) を学んでいます

スポンサーリンク

『paiza開発日誌』さんの読者になっています。先日気になる記事がありました。

 

paiza.hatenablog.com

 

「ゲームで楽しく遊ぶように学べた! プログラミング学習サイト14選」という記事がそれでして、紹介されている中の「CodeCombat」なるサイトに興味が湧いたので昨日初めてプレイしてみました。今日でまだ2日目です。

私はプログラミング経験がほぼありません。私はHTML+CSSは多少分かり、Webサイトを幾つか作ってWeb上に公開した経験があります。そのときにjQueryを使ってスムーススクロールやアコーディオンメニューなどを実装していましたがコピペ状態です。『ドットインストール』さんでJavaScriptやjQueryを少し学んだ経験もありますけどほぼ忘れています。PHPは初心者向けの本を購入して3周ほどやってみました。まず環境構築段階で相当苦労した思い出があり、もう一度やれと言われたらできない自信があります。

 

www.backlog.jp

 

Gitにも少し手を出しましたが早々に詰んでしまいました。『サルでもわかるGit入門』さんを見てやっていましたけど、できなかったのでサル未満確定です。

プログラムなどを勉強する前にもっと知っておかねばならないことがあるのだろうな、ということは痛切に感じています。

 

codecombat.com

 

f:id:dysdis:20150918192142j:plain

 

こちらがその「CodeCombat」(コードコンバット)です。英語サイトのようですが、日本語化も進んでいますので、英語が苦手な方は言語設定から日本語にしてプレイすると良いでしょう。英語の状態でプレイするのも雰囲気があって良いですよ。私は最初は日本語でプレイしていましたが、今日は英語 (US) に設定しました。

もちろんアカウントは作りましょう。私はYahoo!メールで作りました。

攻略に入る前にプレイヤーのキャラクター、ゲーム内での呼び方はヒーロー、を選択します。無課金だとデフォルトで選択できる戦士(男)と戦士(女)の2人しか選べないようです。課金するとレンジャーや魔法使いなど選択肢が増えるのでしょう。装備アイテムなども購入できますが、初期段階では購入できなかったかと思います(忘れました)。

次に、プレイに使用するプログラミング言語を選択します。選べるプログラミング言語はPythonとJavaScriptとCoffeeScript、Clojure、Lua、Ioです。デフォルトはPython。私はJavaScriptを選択しています。

 

 

f:id:dysdis:20150918193740j:plain

 

いよいよプレイをスタートさせますが、最初にマップ選択画面です。最初は「Kithgard Dungeon」(キースガードのダンジョン)しか選択できません。画面は2マップ目の「Backwoods Forest」(辺境の森林)まで選択可能になっていますが、それは私が1マップ目をクリアしているからです。なのでキースガードの「PLAY」を選択します。日本語だと「ゲームスタート」だったでしょうか。

 

 

 

f:id:dysdis:20150918194105j:plain

 

こちらが「キースガードのダンジョン」のマップです。赤い旗みたいなものが立っているマスで戦闘があります。青い円の中に白い星が描かれているマスは課金者専用の戦闘マスのようです。青い煙のマスは分かりません。一つ上の画像で「キースガードのダンジョン」に「17/37」と表示されているのはそういう理由からです。

私がクリアしていない残りの20マスが課金マスと思われます。無課金でも「キースガードのダンジョン」のマップをクリアできたので、課金マスは攻略には直接関係していないのでしょう。課金マスにはより優良な装備が手に入る的なことがあるのかも。

 

 

 

f:id:dysdis:20150918194057j:plain

 

戦闘前にはInventory(インベントリ)画面で戦闘準備をします。私はヒーローに戦士の男性を選択しています。こちらで装備を整えますが、初期状態ではあまり関係がありません。戦闘をクリアすることでジェムが手に入り、それを貯めることで装備などのアイテムを購入しヒーローを強化していきます。

 

 

 

f:id:dysdis:20150918194120j:plain

 

これが戦闘画面です。ヒーローの戦士♂を、画面右のエディタでプログラムを組んで動かし、戦闘前に提示される目標を達成させるとクリアです。エディタ入力時は入力候補を挙げてくれるなどフォローしてくれるので、難しく考える必要はありません。

確か、画像のステージの目標はヒーローが死なないこと、ジェム(宝石)を全て回収することだったかと。ボーナスはコードに問題がないこと。コードにミスが無かったり、より少ないコードで達成させられるとボーナスが付くため、より簡潔なコードを書くことが求められます。それと時間的に早くクリアした方が良いのと思われます。

 

 

 

f:id:dysdis:20150918194123j:plain

 

こちらが目的を達成できたときのVICTORY(ビクトリー)画面です。リザルト画面。罠を避けて、ジェムを拾い、コードに問題がなかった、ということが左上に表示されています。クリアしたら次のステージへ行くこともできますし、これまでクリアしたステージをもう一度プレイすることもできます。

 

とまぁこのように「CodeCombat」はゲームを進めていきます。まだ2日しかプレイしていないので先は長いですけど、少しずつ進めていけたらいいかなと思います。

実は昨日、途中で詰みかけました。というのもヒーローの装備が貧弱すぎて、初期装備のままだと敵を倒せなくなるんですね。5ステージ目だったでしょうか。ショップやインベントリ画面で購入して装備させればよかったのですが、そもそも強化させる発想ができず、どうしていいのか分からずに詰みかけました。ジェムを使ってアイテムを購入することを思いついてからは結構すんなり行けています。

今のところ1マップ目がクリアしたところで先へ進むことはしていません。というのも、既にクリアしたステージでもより良いコードを書ける可能性がありそうだからです。理解をより深めるために、復習がてらもう1,2周しようかなと考えています。経験値やジェムはプレイする度に手に入るっぽいので、稼ぎのためにも。2度目以降は入らないかも……申し訳ありません。入った時があったような気がするので、もしかすると初回クリアとは異なるコードを書いてクリアすると改めて経験値などが手に入る、みたいなことがあるかもしれないです。

ちなみに、1マップ目の「キースガードのダンジョン」では、構文やメソッド、パラメータ、文字列、ループ、変数を使いました(学びました)。先のマップへ進むと新しい技術が必要になり、2マップ目の「辺境の森林」では、if/else(条件分岐)や関係演算子、オブジェクト・パラメータ、入力処理といったことを学ぶようです。

この「CodeCombat」をやっていて気持ち良かったことは、より簡潔なコードを自分で閃いたときです。例えば、ヒーローを右に2回動かすとき、私は始め下記のように「self.moveRight()」を2回書いていました。

 

self.moveRight()

self.moveRight() 

 

でも、実は「self.moveRight(2)」と書いてあげるだけで、2回右に動いてくれるんですよね。プログラムを経験している方にとってはそんなこと当たり前じゃないかと思われるかもしれませんけど、知らない私にとってはこの発見は驚きでしたし、喜びでした。1行減らせた!という。いや、今書いていて疑問を持ちましたけど、プログラムは0から始まるのではなかったでしょうか? 2回動かすのなら()の中を2とせず、1とした方が良いかも知れません。記事を書いたらやってみます。

「CodeCombat」をプレイしていったら、実務としてコードが書けるようになるかは私には分かりません。おそらくこれだけでは無理ではないでしょうか。でも、プログラムはこういうことなんだよ、というのがヒーローを動かすうちに感覚として掴めていけるので、私のようなプログラミング初心者の方がプログラムの世界を知る取っ掛かりとしてはアリと思います。楽しいですし。

 

追記

2回動かすときは「self.moveRight(2)」じゃないと2度動いてくれませんでした。「self.moveRight()」と「self.moveRight(1)」は同じです。たぶん。

 

JavaScript 第6版

JavaScript 第6版