paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

20200204140738

ITエンジニア向け総合求人・学習サービス「paiza」の開発者が、プログラミングやITエンジニアの転職などについて書いています。

プログラミング動画学習 paizaラーニング

普通のコードエディタに見えて実は壮大なゲーム(MMORPG)画面の「CyberCode Online」で遊んでみた!

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

今回は、どこからどう見てもごく普通のコードエディタに見えて、実はマルチプレイ可能なMMORPGというジャンルのゲームが遊べるちょっと変わったWebサービスをご紹介します。

見た目はVisual Studio Code風の画面レイアウトなのですが、本格的なテキストベースのMMORPGになっていて、友人・知人と一緒に敵と戦いながらプレイヤーを成長させていくことができます。

第三者から見るとゲームで遊んでいるとは思われないのも1つの特徴になっています。

■「CyberCode Online」の遊び方

それでは、最初に「CyberCode Online」をどのように遊ぶのか詳しく見ていきましょう!

サイトにアクセスすると、ごく普通のコードエディタが表示されるのですが、プログラムをよく見るとsignUp()関数が記述されているのが分かります。

f:id:paiza:20200902112404j:plain


実はこの関数の中身が「ユーザー登録フォーム」になっているのです!

f:id:paiza:20200902112632j:plain

メールアドレス・パスワードを入力してから、signUp()の文字をクリックすると関数が実行されて登録ができるように作られています。


次にゲームで利用するユーザー名を設定しましょう。

f:id:paiza:20200902112652j:plain


変数の「displayName」に好きなユーザー名を定義することになります。

f:id:paiza:20200902112709j:plain

入力したら「save()」の文字をクリックしましょう。


ただし、すでに利用されているユーザー名は登録できないようになっており、エディタ下部にあるコンソール部分にエラーメッセージが表示されます。

f:id:paiza:20200902112732j:plain


無事に登録が完了するとゲームが始まります!

f:id:paiza:20200902112742j:plain

ゲーム画面といっても、知らない人が見たら普通のコードエディタが表示されているだけにしか見えません(それがこのゲームのミソなのですが…)

しかし、コードエディタ風のUIを操作しながら、テキストベースの本格的なマルチプレイオンラインRPGを楽しめる要素がギュッと詰まっているので、その詳細をご紹介していきます。

■ゲーム画面のレイアウトについて

「CyberCode Online」はかなり独特なゲーム画面のため、最初はどこをどのように見たらいいのか分からないかもしれません。そこで、基本的な画面の見方やレイアウトがどうなっているのかについてご紹介します。

まずは画面左側にあるファイルのディレクトリを見てください。

Locationフォルダに入っている「Surrounding.ts」ファイルが基本的なデフォルト画面になります。

f:id:paiza:20200902112809j:plain

ゲームで言えば「ホームタウン」のような場所であり、プレイヤーの装備品を作ったり武器屋で売買したりなどができます。また、他の町や敵がいるフィールドに移動するときもこのファイルから始めます。


今度は、Playerフォルダにある「Stats.ts」ファイルを見てください。

f:id:paiza:20200902112821j:plain

このファイルは、プレイヤーのレベル、装備品、所持品、お金…などの基本的なステータス情報が閲覧できるようになっています。


次に「Inventory.ts」ファイルを見てください。

f:id:paiza:20200902112903j:plain

このファイルは、装備品・所持品の詳細なリスト画面になります。

不要な所持品を処分したり、装備の付け替えやアップグレード用のアタッチメントを装着したりなどができるようになっています。


他にも、画面左側のメニューには最低限のステータス情報や、現在同時に参加している世界中のプレイヤーがリストで表示されています。

f:id:paiza:20200902112917j:plain

他のユーザー名をクリックすると、そのプレイヤーのステータス情報も閲覧できます。


また、エディタ下部のコンソール部分はログなどを表示する以外にも、実はグローバルチャット機能を搭載しています。

f:id:paiza:20200902112933j:plain

つまり、ゲームに参加している他のユーザーと手軽にチャットでコミュニケーションができるようになっているわけです。

■冒険に出てみよう!

画面レイアウトの基本が分かったところで、ゲームを実際にプレイしてみましょう。

まずはデフォルト画面の「Surrounding.ts」ファイルを開きます。

f:id:paiza:20200902112957j:plain

ファイルを下の方にスクロールすると「goToHyperTrainCentralStation()」と記述された関数があるのでクリックしましょう。この関数が冒険に出る最初の一歩になるのです。


次にプレイヤーのレベルに合わせたいくつかのスポットが表示されます。

f:id:paiza:20200902113008j:plain

最初は「Level 1 to 10」とコメントされている関数をクリックしてみましょう。


さらに細かいレベル別のステージが用意されているので、「Level 1 to 4」とコメントされている関数をクリックしてフィールドに出ます。

f:id:paiza:20200902113023j:plain


するとさまざまなタイプの敵が出てくるので、まずはレベル1の敵をクリックしましょう。

f:id:paiza:20200902113050j:plain


戦闘画面もコードエディタの中で繰り広げられます!

f:id:paiza:20200902113103j:plain

プレイヤーと敵の体力が表示されているのが分かりますね。


攻撃方法として、もっとも標準的な戦い方が「primaryAttack()」と記述された関数をクリックすることです。

f:id:paiza:20200902113113j:plain

すると敵へダメージを与えられるので、倒すまで繰り返し関数を実行していきます。装備を整えると、特別な攻撃が可能になるスペシャルウェポンなども使えます。


敵を倒すと、たまにアイテムを落とすので必ず拾っておきましょう。

f:id:paiza:20200902113129j:plain

(※ takeAll()をクリックするとすべてのアイテムを拾えます)

戦闘が終わると、また敵が出現するフィールドに戻ります。そして、また任意の敵と戦いながらアイテムを拾っていくわけです。ちなみに戦闘が終わるとプレイヤーの体力は自動回復するようになっています。


ある程度、アイテムが揃ったらホームタウンに戻りましょう。

戦闘フィールドの画面下部に「backToCityCenter()」と記述された関数があるので、これをクリックすれば最初のデフォルト画面に戻ることができます。

f:id:paiza:20200902113159j:plain


拾ったアイテムにはキャッシュと呼ばれるレシピのようなものがあり、これはゲーム内の3Dプリンタで武器や防具などを作成できるようになっています。

そこで、デフォルト画面から「molecular3dPrinter」と記述された箇所をクリックしてみてください。

f:id:paiza:20200902113218j:plain


取得したキャッシュが表示されているのが分かります。

f:id:paiza:20200902113233j:plain


このキャッシュにマウスカーソルを重ねると、詳細情報がポップアップ表示されます。

f:id:paiza:20200902113248j:plain

「Molecular Print」と記述された箇所をクリックすると、このキャッシュをもとにして3Dプリンタで装備品を作成できるのです。


作成された装備品は「Inventory.ts」ファイルから確認できます。

f:id:paiza:20200902113300j:plain


装備品にマウスカーソルを重ねると、詳細情報がポップアップで表示されます。

f:id:paiza:20200902113312j:plain

「Equip」と記述された箇所をクリックすると装備することができます。


装備済み品を確認すると、しっかりとプレイヤーが身につけていることが分かりますね。

f:id:paiza:20200902114023j:plain

このようにして、敵と戦いながらキャッシュを装備品に変えつつプレイヤーをどんどん強くしていくのが基本的なゲームの流れになります。


ちなみに、この時点で画面左側にある「QUESTS(クエスト)」を達成していると思うので、「claim」と書かれた部分をクリックして経験値やお金を取得しておきましょう。

f:id:paiza:20200902114220j:plain

クエストにはさまざまな種類が常に表示されており、たとえば以下のようなものがあります。

  • 敵に一定のダメージを与える
  • 3Dプリンタで装備品を作成する
  • 一定数の経験値を獲得する
  • 指定した金額までお金を貯める

…など

それぞれのクエストを達成すると、経験値やお金を効率よく取得できるので必ずチェックしておきましょう。

■ダンジョンに挑戦してみよう!

ゲームは敵のいるフィールドへ移動するだけでなく、より強力な敵とバトルができるダンジョンも提供されているのでご紹介しておきます。

デフォルト画面から「Dungeons」とコメントされている箇所の関数をクリックしてみましょう。

f:id:paiza:20200902114303j:plain


ダンジョンは「map」に定義された配列で構成されており、敵のアイコン部分をクリックすると戦闘となります。

f:id:paiza:20200902114313j:plain


敵はかなり強力で、プレイヤーの何倍もの体力と攻撃力を持っています。

f:id:paiza:20200902114408j:plain

レベルや装備品が弱いと一瞬で倒されてしまうので、プレイヤーをしっかりと成長させてから挑戦する必要があります。

しかし、マルチプレイゲームと言うだけあって、実はダンジョンを複数人で攻略できるように設計されているのです。


ダンジョンの上部には固有のIDが生成されているのが分かります。

f:id:paiza:20200902114444j:plain

このIDを友人・知人に教えてあげることで、同じダンジョンを一緒に攻略できるようになるわけです。


IDを教えてもらった側は、「joinDungeonById()」と記述された関数内の変数「id」に入力することで同じダンジョンに入れます。

f:id:paiza:20200902114509j:plain

複数人で戦えば効率よくダンジョンが攻略できて、経験値も通常より多く取得できるのですばやくプレイヤーを強くしていくことができるでしょう。

■「CyberCode Online」はまだまだこれから!

「CyberCode Online」はまだ正式なメジャーバージョンではないため、ほぼ毎日のように新機能や改善が実施されています。

そのため、エディタ画面にある「Updates.md」ファイルには常に新しい情報が公開されています。

f:id:paiza:20200902114526j:plain

たとえば、最近のアップデートにより装備品を自分でクラフトできるようになったり、ショップを開いてプレイヤー同士でアイテムを売買できたりなどの機能が提供され始めています。

もちろん、今後も新機能が展開していく予定なので、ゲームのクオリティはどんどん向上していくわけです。


また、Discordで専用のコミュニティが公開されており、分からないことや機能の要望など活発な意見交換もおこなわれています。

CyberCode Onlineコミュニティ

f:id:paiza:20200902114729j:plain

ブラウザから手軽に遊べるWebゲームなので、常に最新バージョンを遊べるのも大きなポイントでしょう。また、現段階においてすべて無料で遊べるので、ご興味ある方はぜひプレイしてみてください!

■動画&ゲームでプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

Python入門編」「C#入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。

ただいま2020年9月27日(日)までの期間限定で「Python×AI・機械学習入門編」講座を無料公開中です。

また、paizaでは『推しと学べるプログラミング』をはじめゲームで楽しくプログラミングを学べるコンテンツもご用意しています。ぜひプレイしてみてください!


■まとめ

今回はブラウザから遊べるコードエディタ風のUIをしたMMORPGを紹介しました!

斬新なアイデアとゲーム性を兼ね備えた珍しいWebゲームであり、エンジニア以外の方でも楽しめる手軽な操作感が印象的なゲームと言えるでしょう。海外では少しずつ人気が出ており、コードエディタ風の画面なのでオフィスでの息抜きでも気兼ねなく遊べるのも魅力です。

マルチプレイゲームやRPGが好きな方はもちろん、ちょっとした息抜きにも最適なのでぜひみなさんも一度プレイしてみてはいかがでしょうか。


<参考リンク>




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

詳しくはこちら
paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら
paizaのスキルチェック

paizaのおすすめコンテンツ

Webセキュリティ入門 ハッカー入門 Webセキュリティ講座がスタート!CVは内田真礼さん! Python✕AI 機械学習入門講座 CVに上坂すみれさんを起用!人気の機械学習講座を公開中!
paiza転職 paiza新卒 EN:TRY paizaラーニング Copyright Paiza, Inc, All rights reserved.