シェアしたくなる最新のWebサービス・ITニュース情報をチェック!
  • follow us in feedly

アプギガトップ > プログラミングしないと攻撃できないWebゲーム「CodeCombat」が、JS入門の神サイトになる!
注目記事ピックアップ
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
share0
GoogleドライブにTrello風タスク管理機能を拡張できる「Kanbanchi」を試してみた!
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
share0
Web上でプログラミングに特化したスクリーンキャストを無料で作れる「Scrimba」の革命的な機能がスゴイと話題に!
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
share0
データ可視化の最強ツール!Web上でスライド資料やインフォグラフィックを制作できる万能Webエディタ「Visme」を使ってみた!
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
share0
ブラウザから即起動!ゼロからSVG画像を作成できるWebエディタ「Vectr」が完全無料で公開中!
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
share0
わずか1行のコードで、Web制作が劇的に捗るサービスと連携し放題になる「StackPile」を使ってみた!
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
share0
ググる前にチェックすべき「Web開発系」サービスをまとめた至高の情報サイト8個+α!
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
share0
こんなAR技術が欲しかった!スマホをかざすだけでプロ並みのスケッチを描ける「SketchAR」アプリを使ってみた!
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
share0
実はゲーム機として優秀なスマホ「Galaxy S7 edge」でポケモンGOを遊び倒してみた!<PR>
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
share0
JavaScriptの学習にオススメなWebコードエディタ「Carbide」の万能すぎる可視化ウィジェットがヤバイ!
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
share0
エアフォースワンの内部もVR空間に!Web上であらゆる場所を歩き回れる「Matterport 3D Gallery」の没入感がスゴイ!
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
share0
有名WebサービスのAPIをすべて同じ書き方でプログラミング可能な「RapidAPI」は、検索・テストもブラウザ上で実行可能!
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
share0
英語で「VR空間作って」と書くだけで、本当にWeb上でVR体験が実現する「GuriVR」を使ってみた!
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
share0
まだ進化を続けるGoogle検索の特殊機能12選をまとめてみた!
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
share0
筆跡がリアルに変化する「自作Webフォント」を生成可能な「Calligraphr」で自分用フォントを手書きしてみた!
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
share0
「アプギガ!!」2016年の総まとめ!もう一度読みたくなる人気のバズ記事をまとめてみた!
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
share0
Webサイトに訪れたユーザーの行動を「映像化」してトラッキングできる「Jaco」を使ってみた!
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
share0
天才的な猛者が開発した究極の「HTML5ゲーム」16選が思わず熱くなり過ぎる件!
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
share0
ブログ感覚でオンラインのプログラミング講座を作成・公開できる「educative」は課金機能も無料で利用可能!
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
share0
登録不要!匿名で記事も公開できる究極にシンプルなWebエディタ「IO」が最高の使い心地だった!
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
share0
指先1本でミニゲームを開発してシェアし合う新型SNSアプリ「Hopscotch」で遊んでみた!
プログラミング
ad 今の年収で満足ですか?
typeで転職した71%が年収アップ!
2014/03/21 21:50

プログラミングしないと攻撃できないWebゲーム「CodeCombat」が、JS入門の神サイトになる!


どうも、まさとらん(@0310lan)です!

みなさんは、「JavaScript言語」を勉強していますか?

動きのあるWebサイトやゲームなどを作る際に、最近よく利用されるようになっているので、これから勉強しようと考える人も多いのではないでしょうか?

そこで今回は、ゲームを楽しみながらJavaScript言語を効率よく学習できるWebサービスをご紹介しようと思います!

CodeCombat」です!


海外を中心に話題となっているこちらのサービス…。一体、どのようなサービスなのか詳しく見ていきましょう!

 

攻撃や移動は「プログラミング」で!?
まずは、「CodeCombat」のトップ画面下段にある「CAMPAIGN」モードをクリックします。


 

すると、これから使用する自キャラのカスタマイズ画面になります。


カラーの変更や、キャラクター名などをサクッと決定します。

 

ゲームが始まると、RPG風のストーリーが展開していきます。


驚いたことに、完全フルボイスでストーリーが進んでいきます。

どうやら、仲間を助けに行く必要があるとのこと…。

 

ゲームを進めると、一人の仲間を発見します。


出口が分からずに、迷っている様子…。

ここからは、彼を操作しながら敵を倒しつつ、他の仲間を救出しながら出口を進む事になります。

 

そして、ここから「CodeCombat」の醍醐味が始まります。

メイン画面は以下のように、「ゲーム画面」と「エディタ」に分かれます。


簡単に説明すると、「ゲーム画面」を見ながらストーリーを進めつつ、キャラクターのすべての操作を「エディタ」へ直接プログラミングしながらコントロールするという仕組みになっています。

 

ちなみに、エディタへ入力する際には「設定」から、キャストを「手動」にしておくことをオススメします。


キャストは、入力したプログラミングを実行させるボタンのようなモノですが、初期設定では自動実行になっているのでちょっと扱いにくいです…。

 

そして、エディタ下段の「利用できる呪文」に書かれているコードを使って、直接プログラミングしていきます。


まずは、敵のところまでキャラクターを移動させる必要があるので、エディタの上から順番に「上方向へ進め」とか「右方向へ進め」などを入力してキャストボタンをクリックします。

 

敵に近づいたら、攻撃をするためのコードを入力して、再度キャストボタンをクリックします。


 

すると、見事に敵をやっつけてくれます!


 

そして、「救出ミッション」がクリアとなります!


このまま、さらに奥へと進んで行きながら、仲間を見つけてどんどん敵を倒していくわけです。

 

このように、RPGのようなゲームを進めながら、ごく自然とJavaScript言語を扱えるように少しずつ学習していけるようになっています。ゲームが進むに連れて、ミッションも複雑になっていき、それと比例して扱うプログラミングスキルもアップしていくという上手い手法がとられているのが特徴的です。

 
ゲームは自作も可能!
「CAMPAIGN」モードだけでも、かなりボリューム感のあるストーリーが楽しめるのですが、なんと自分だけのオリジナルゲームを作ることも可能になっています。

方法は簡単で、トップ画面のメニューから「EDITOR」をクリックします。


 

次に、「LEVEL EDITOR」をクリックします。


 

新規作成を選択すると、ゲームの舞台となる画面を作成することができるようになります。


搭載されている素材を、ドラッグ&ドロップしながら好きなようにマップ画面をつくることが出来ます。

 

また、クリア条件やストーリーなど、細かいゲームの構成も作り込めるようになっていますよ。


本編を最後まで楽しんだ人や、もっと自分のスキルを上達させたいような人が中心となって、現在も数多くの自作ゲームがラインナップされているので、こちらを友達とプレイしてみるのも面白いかと思います!

 
おまけ
最後に、今回ご紹介したような「ゲーム要素」が多く取り入れられたWebサービスも合わせてご紹介しておきます!

 

Check.io


過去に、アプギガでご紹介して好評を頂いたサービスが「Check.iO」です。

現時点ではPythonの学習サービスとなっており、様々なクエストをクリアしながら、レベルアップやバッジなどを獲得できる開発者コミュニティサービスとなっています。

 

Code.org


子供向けに、様々なプログラミング学習コースを提供しているのが「Code.org」です。

なかでも、アングリーバードのキャラクターやゾンビなどを操作して、ブロックを使ったプログラミング学習ができるこちらのサービスがオススメです。途中で、ビル・ゲイツやザッカーバーグなどの著名人からアドバイスもありますよ。

 
まとめ
プログラミングを勉強できるWebサービスというのは、急速に増加しているように感じます。

CodeCademy」「Dash」「ドットインストール」などは、良質なプログラミング学習サービスとして知られており、どちらかと言うと「正統派」のサービスと言えるでしょう。

逆に、今回ご紹介したような少し「息抜き」も兼ねた、学習サービスというのはプログラミングを学ぶ人にとっては、意外に重要なサービスになるのでは?と感じました。

やはり…毎日、国語や算数などの勉強よりも、たまには体育や音楽の授業がないと息苦しくなりますよね…。

 

参考:「CodeCombat」公式サイト

 

written by まさとらん

 

 

 


 

まさとらん

国内外問わず「良いモノ」だけひたすら集めて情報共有してます。
厳選ネタはアプギガ内で分かりやすく情報発信中!
その他の旬なネタは、twitterにて発信してますので、お気軽にどうぞ!

twitter:0310lan

この記事を読んでいる人は、他にこんな記事も読んでいます。
Related Posts Plugin for WordPress, Blogger...

ページトップへ戻る