年末年始はPaaSで遊ぼう!親子で作る簡単・無料のスマホゲーム(後編) - (page 5)

中條将典 羽野三千世 (編集部)

2015-12-27 07:00

ステップ4:ソースコードを編集してゲームアプリを完成させよう

 先ほどのアプリケーション実行中の画面を見た人はだれも、「あれ?これのどれがゲームなの??」と思われたことでしょう。実は、このアプリケーションのソースコードでは、ゲームのキャラクターを表示させたり、カーソルキー(矢印キー)を操作してキャラクターを動かしたりする部分をコメントアウト(後述)して、実行しないようにしているのです。

 「public」フォルダの下の「game.js」ファイルがゲームのソースコードを格納したファイルです。「EDIT CODE」画面の左側でgame.jsを選ぶと、JavaScriptで記述したソースコードを表示できます(図26)。このソースコードを編集して、ゲームアプリを完成させましょう。


図26:game.jsに格納してあるJavaScriptのソースコード

 まず、ソースコードの最後の方にある、「(1)ステージを表示させる ここから」と書いてあるところを探してください。次に、「var stage = new Group();」の行から「});」の行までをすぐ下にコピー&ペーストして、行頭の「//」を削除します(図27)。


図27:ソースコードを編集する

 コピーして「//」を削除したソースコードは、ゲームのステージ(背景)を表示する処理を表しています。JavaScriptのソースコードで行頭に「//」が付いていると、その行は実行しません。これをコメントアウトと言います。そこで、「//」を削除してステージを表示させるように編集します。

 編集を終えたら、画面上部の三角ボタンをクリックしてアプリケーションを再デプロイしましょう(図28)。


図28:ソースコードを編集したアプリケーションを再デプロイする

 デプロイが完了してアプリケーションが動作したら、「右上に向かう矢印」のアイコン(「アプリケーションサーバのURLにジャンプ」)をクリックしてみましょう。画面にステージが表示されているはずです(図29)。


図29:ステージが表示されたゲーム画面

ZDNET Japan 記事を毎朝メールでまとめ読み(登録無料)

NEWSLETTERS

エンタープライズ・コンピューティングの最前線を配信

ZDNET Japanは、CIOとITマネージャーを対象に、ビジネス課題の解決とITを活用した新たな価値創造を支援します。
ITビジネス全般については、CNET Japanをご覧ください。

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]