ステップ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:ステージが表示されたゲーム画面