paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

WebストラテジーゲームでJavaScriptが学べる「Empire of Code」の遊び方を大公開!

f:id:paiza:20170518164152j:plain
どうも、まさとらん(@0310lan)です。

今回は、基本的なプログラミングに慣れてきて、「次に何しようかな…?」と考えている人に最適なWebサービスをご紹介しようと思います!

ブラウザから遊べる「ストラテジーゲーム(戦略ゲーム)」なのですが、自軍の兵士たちを自分でプログラミングすることで、自由自在に操作することができるという異色のサービスになっています!

Empire of Code

f:id:paiza:20170518164238j:plain
プログラミング初心者向けではないのですが、PythonJavaScriptの基本的な文法を把握している人であれば誰でも楽しめますよ!

■「Empire of Code」の始め方!

それでは、実際に試しながら、どのようなサービスなのかを詳しく見ていきましょう!

まず最初に、サイトへアクセスして「START NEW GAME(ゲーム開始)」ボタンをクリックします。
f:id:paiza:20170518164257j:plain


すると、コミカルな漫画でストーリーが始まります。
f:id:paiza:20170518164307j:plain


そして、そのままゲームの「チュートリアル」に入ります。
f:id:paiza:20170518164319j:plain
初めての人でも、このチュートリアルを行うことで、一通りの基本的なゲームの遊び方が分かるようになっています。


チュートリアルの最後にチームの選択画面になり、「Python」か「JavaScript」どちらかのチームに入ることになります。
f:id:paiza:20170518164331j:plain
プログラムを作成する時に使う言語になるので、自分の得意なプログラミング言語を指定するといいでしょう。


チュートリアル終了後は、自軍の基地をパワーアップさせたり、敵軍に攻め込んだりしながら少しずつチームを強くしていくのが目的となります。
f:id:paiza:20170518164342j:plain


ちなみに、ゲームの進捗を保存するには無料の「ユーザー登録」が必要なので、画面上部のリンクから済ませておきましょう!
f:id:paiza:20170518164353j:plain

■兵士をプログラミングしよう!

それでは早速ですが、このゲーム最大の醍醐味である「兵士」たちをプログラミングしてバトルを始めてみましょう!

兵士をプログラミングするには、「Craft Pad」と呼ばれる施設を選択して、表示されるコードアイコンをクリックします。
f:id:paiza:20170518164414j:plain


すると、プログラム一覧が表示されるので、「Create new(新規作成)」を選択してファイル名を付けましょう。
f:id:paiza:20170518164424j:plain


こちらが、プログラムを作成するエディタになります!
f:id:paiza:20170518164435j:plain
基本的には、右側の「ドキュメント」を読みながら「コードエディタ」にプログラムを記述していき、「console.log()」などを使って画面下の「コンソールビュー」で確認していくという流れです。


今回は最初から作成していくので、上から3行目までは残してあとは削除しておきます。
f:id:paiza:20170518164447j:plain
この3行は、初期設定やゲーム情報を取得するためのインスタンスを作成している部分になるので、そのままにしておきましょう。


Empire of Code」のバトルにおいて、最終目標は相手の「コマンドセンター」を破壊することです。
f:id:paiza:20170518164459j:plain


そこでまずは、敵軍の「コマンドセンター」の情報を取得し、そこへ兵士たちを移動させて攻撃するというプログラムを作りましょう!

//コマンドセンターの情報を取得する
var center = client.askCenter();


//「ID」を取得し、兵士を攻撃に向かわせる
client.doAttack( center.id );

便利なメソッドがたくさん用意されているので、プログラム自体は簡単です。

敵軍のコマンドセンターの情報を取得するメソッドは「askCenter()」で、返り値としてオブジェクトを取得できます。

兵士を攻撃させるメソッドは「doAttack()」を使うのですが、引数に先ほど取得したオブジェクトにある「ID」を指定すればOKです!


そして、プログラムを記述したら、必ず「①Check」をクリックして「②Results」が成功するかどうかを確認しましょう!
f:id:paiza:20170518164538j:plain


注意が必要な点として、さきほど新規に作成したファイルが「Active」になっているかを確認しておきましょう!
f:id:paiza:20170518164549j:plain
これが「Active」になっていないと、自分の書いたコードは実行されないので要チェック!

そして、いざ敵軍に攻め込めば、プログラム通りに「コマンドセンター」を最初に攻撃してくれるわけです!
f:id:paiza:20170518164605g:plain
しかし、現状のプログラムだと、「コマンドセンターを攻撃する」という指示しか出していないので、敵の攻撃に対して無防備です。

そこで、もう少しプログラムを改良する必要があるでしょう。

■プログラムをバージョンアップしよう!

さて、現在のプログラムの問題点ですが、例えば敵側の「コマンドセンター」付近に防御設備の「銃器」があると、一方的に攻撃を受け続けてしまいます。
f:id:paiza:20170518164642j:plain
なぜなら、「コマンドセンターを攻撃する」というプログラムしか記述していないからですね。


このような場合、先に「防御設備(銃器)」を破壊してから「コマンドセンター」を攻撃するのが良いでしょう。

そこで、敵側の「防御設備」の情報を取得するメソッドが「askTowers()」です。

var enemy = client.askTowers();

このように記述すると、防御設備の情報が「配列のオブジェクト」として取得することができます。


そのため、次のように記述すれば防御設備を攻撃することができますね。

//敵側の防御設備の情報を取得する
var enemy = client.askTowers();


//1つ目の防御設備を攻撃する
client.doAttack( enemy[0].id );

しかし、ここで注意点が1つあります!


次のように記述すると、「防御設備」を破壊してから「コマンドセンター」を攻撃できるように思います。

var center = client.askCenter();
var enemy = client.askTowers();




client.doAttack( enemy[0].id ); //防御設備を攻撃
client.doAttack( center.id ); //コマンドセンターを攻撃

しかし、兵士たちは「最後に指示された行動しかできない」…という設計になっているのです。

つまり、上記のプログラムだと、最後に指示されている「コマンドセンターを攻撃する」という行動しかできないわけです。


そこで、「○○をしたら○○をする」という行動を指示できるメソッドがいくつか用意されており、今回は「whenItemDestroyed()」を使うことで解決します。

これは施設を破壊した後に、何らかの指示を出すことができるメソッドなので、「防御設備を破壊したらコマンドセンターを攻撃せよ!」…というプログラムを作成することができるわけですね。


再帰処理を使って次のようなプログラムを作ることが出来るでしょう。

var center = client.askCenter();


//関数「attack」を作成
function attack() {
    var enemy = client.askTowers();
    
    //防御設備の数が「0」かどうかを確認
    if( enemy.length ) {
        client.doAttack( enemy[0].id );
    }
    else {
        client.doAttack( center.id );
    }
    
    //防御設備を破壊したら、再度「attack関数」を呼び出す
    client.whenItemDestroyed( enemy[0].id ).then( attack );
}


attack();

「askTowers()」で存在する防御設備をすべて取得すると、配列のオブジェクトで返してくれるので、「length」を使って「0」になるまで破壊を続けるようにしています。

そして、破壊する度に「then()」で同じ関数を再度呼び出し、防御設備が無くなったら「コマンドセンター」を攻撃するという流れです。

このように記述しておけば、敵側の基地に銃器があっても先に破壊してくれるようになります!
f:id:paiza:20170518164804g:plain
ただし、敵側の基地の状態によっては、銃器を無視して先に他の設備を破壊した方が良いケースもあるし、特定の銃器だけを先に攻撃する場合もあるでしょう。

そのため、敵の状況によってプログラムもそれに最適化しながら戦いに挑まなければいけないわけです。

これこそが、「Empire of Code」の最も面白い部分であり、プログラミングの学習におすすめする理由です。

■施設のアップグレードについて!

自軍の基地は、さまざまな施設を設置できるのですが、アップグレードすることで性能がどんどん向上するようになっています。

面白いのはそのアップグレード方法で、これもプログラムを作成することで実行できるようになっているのです!


まず、各施設をクリックして表示される「コードアイコン」をクリックします。
f:id:paiza:20170518164855j:plain


すると、さまざまなアルゴリズムの問題が表示されるので、現在プレイができる問題をクリックしましょう。
f:id:paiza:20170518164908j:plain


先ほど兵士をプログラミングしたエディタと同じ画面になります。
f:id:paiza:20170518164918j:plain
左側のコードエディタで、右側に表示されているアルゴリズムの問題を解決するプログラムを記述します。


今回は、「2つの数値の最大値を返す」という関数を作る問題だったので、次のような簡単なプログラムを作りました。

function myMax(a, b) {


    var result = Math.max( a, b );
    return result;


}


そして、プログラムを実行し問題が無ければ「成功」となり、施設がアップグレードされるわけです!
f:id:paiza:20170518164948j:plain
このように、どんどん問題を解決していき、自軍の基地をパワーアップしていくとさらにゲームが楽しくなるでしょう。

paizaでもプログラミング×異世界転生ファンタジーRPGロジックサマナー~閃光の召喚プログラマ』公開中!


突然迷い込んだ異世界。
そこではプログラミングコードが『詠唱魔法』だった――
コード詠唱で召喚獣を解放せよ!

ロジックサマナー~閃光の召喚プログラマ』は、さまざまな難易度の封印(※プログラミング問題)を解くことで進める異世界ファンタジーRPGです。

主人公はひょんなことから異世界に迷い込んだITエンジニア。異世界では、なんとプログラミングしたコードが召喚獣を呼び出すための詠唱魔法だった!?

召喚魔法(※プログラミング)が使える主人公は急に世界を救う伝説の召喚士として盛大に歓迎されてしまい……

あなたのプログラミングスキルを駆使しながら、世界に平和を取り戻しましょう!

ゲームはメインシナリオ以外にも、高難度問題の解答スコアを競うランキングモードがあり、世界中のプレイヤーとプログラミングスキル対決ができます。また、プレイスタイルに応じた称号システムやキャラクター・アイテムのコレクションなども可能!

ロジックサマナー~閃光の召喚プログラマ』のリリースを記念して、最大1万円分のAmazonギフト券が当たるリリース記念キャンペーンを実施します。
期間内にゲーム内のTweetボタンからハッシュタグ「#コード詠唱」を付けてツイートした方の中から、抽選で1名様に1万円分、50名様に500円分のAmazonギフト券をプレゼントいたします!

paiza.jp

■まとめ

今回ご紹介した「Empire of Code」で、兵士たちをプログラミングしていくコツとして「ask、do、when」の3つのキーワードを意識してみてください。

「ask〜」で情報を取得し、「do〜」で行動し、「when〜」で複数の行動を連結するような感じをイメージすると良いでしょう。

まだベータ版のサービスですが、フォーラムが用意されているので分からないことがあれば、ユーザー同士で解決するようなスタイルが利用できます。

プログラミングに興味ある方は、ぜひ一度トライしてみてください!

<参考>




paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数用意しております。

もちろん今回の記事で使用したJavaScriptやHTMLなど、言語ごとに基礎を学べる入門講座も好評公開中です!

↓詳しくはこちら
paiza.jp

そして、paizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。
paiza.jp
スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

ITプログラマ・エンジニア向け転職・就活・学習サービスのpaiza


プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編