年末年始は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 記事を毎朝メールでまとめ読み(登録無料)

ホワイトペーパー

新着

ランキング

  1. ビジネスアプリケーション

    改めて知っておきたい、生成AI活用が期待される業務と3つのリスク

  2. ビジネスアプリケーション

    Google が推奨する生成 AI のスタートアップガイド、 AI を活用して市場投入への時間を短縮

  3. セキュリティ

    「2024年版脅威ハンティングレポート」より—アジアでサイバー攻撃の標的になりやすい業界とは?

  4. セキュリティ

    まずは“交渉術”を磨くこと!情報セキュリティ担当者の使命を果たすための必須事項とは

  5. クラウドコンピューティング

    生成 AI リスクにも対応、調査から考察する Web ブラウザを主体としたゼロトラストセキュリティ

ZDNET Japan クイックポール

所属する組織のデータ活用状況はどの段階にありますか?

NEWSLETTERS

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

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

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