年末年始は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. セキュリティ

    「デジタル・フォレンジック」から始まるセキュリティ災禍論--活用したいIT業界の防災マニュアル

  2. 運用管理

    「無線LANがつながらない」という問い合わせにAIで対応、トラブル解決の切り札とは

  3. 運用管理

    Oracle DatabaseのAzure移行時におけるポイント、移行前に確認しておきたい障害対策

  4. 運用管理

    Google Chrome ブラウザ がセキュリティを強化、ゼロトラスト移行で高まるブラウザの重要性

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

    技術進化でさらに発展するデータサイエンス/アナリティクス、最新の6大トレンドを解説

NEWSLETTERS

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

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

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