年末年始は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 を活用した革新的な事例 56 選 課題と解決方法を一挙紹介

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

    生成 AI の可能性を最大限に引き出すためにできること—AI インフラストラクチャの戦略ガイド

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

    業務マニュアル作成の課題を一気に解決へ─AIが実現する確認と修正だけで完了する新たなアプローチ

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

    調査結果が示す「生成 AI 」活用によるソフトウェア開発の現状、ツール選定のポイントも解説

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

    ITSMに取り組むすべての人へ、概要からツールによる実践まで解説、「ITSMクイックスタートガイド」

ZDNET Japan クイックポール

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

NEWSLETTERS

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

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

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