enchant.jsでスマホ向けゲームを作り始めるための基礎知識enchant.jsでHTML5+JavaScriptゲーム開発入門(2)(2/4 ページ)

» 2013年02月06日 18時00分 公開
[佐藤浩昭, 大関隆介,ゆめみ]

ecahnt.jsを使うJavaScriptのコードを実際に書いてみる

まずは、画像の表示

 main.jsをテキストエディタで開き、次のプログラムを書き写して保存してください。

  1. enchant(); // おまじない
  2. window.onload = function() {
  3. // 行の終わりには、;(セミコロン)を付けます。
  4. var game = new Game(320, 320); // ゲーム本体を準備すると同時に、表示される領域の大きさを設定しています。
  5. game.fps = 24; // frames(フレーム)per(毎)second(秒):ゲームの進行スピードを設定しています。
  6. game.preload('./img/chara1.png'); // pre(前)-load(読み込み):ゲームに使う素材をあらかじめ読み込んでおきます。
  7. game.onload = function() { // ゲームの準備が整ったらメインの処理を実行します。
  8. var kuma = new Sprite(32, 32); // くまというスプライト(操作可能な画像)を準備すると同時に、スプライトの表示される領域の大きさを設定しています。
  9. kuma.image = game.assets['./img/chara1.png']; // くまにあらかじめロードしておいた画像を適用します。
  10. kuma.x = 100; // くまの横位置を設定します。
  11. kuma.y = 120; // くまの縦位置を設定します。
  12. game.rootScene.addChild(kuma); // ゲームのシーンにくまを表示させます。
  13. game.rootScene.backgroundColor = '#7ecef4'; // ゲームの動作部分の背景色を設定しています。
  14. }
  15. game.start(); // ゲームをスタートさせます
  16. // このようにスラッシュ2つで書き始めた行は「コメント」扱いとなります。
  17. // プログラム中のメモとして活用しましょう。
  18. /* また、このようにスラッシュと米印を使うと、
  19. 複数行に渡ってコメントを書くことができます。 */
  20. };
main.js

 終わったら適当なWebブラウザで開いて見ましょう(サンプル画像はiPadのSafariで開いていますが、開発中はPCのWebブラウザで開いてOKです)。

くまがポツンとしてる画像

 このように、くまがポツンと表示されたら成功です!

 細かい解説は後述するとして、ただくまが立っているだけではつまらないので、右にスーッと動かして見ましょう。

画像を右に移動させる

 次の部分のプログラムを先ほどのソースコードの19行目に追加してみてください。

        // シーンに「毎フレーム実行イベント」を追加します。
        game.rootScene.addEventListener(Event.ENTER_FRAME, function() {
            kuma.x += 1; // 毎フレーム、くまの座標を右に1pxずつずらす
        });

 追加したら保存して、Webブラウザで開きます。

くまがスーッと横移動画像

 どうでしょうか。くまは動きましたか? ですが、動くだけでもつまらないですね。

画像を画面をタッチ(クリック)した方向に進ませる

 そこで、画面をタッチ(クリック)した方向に進むようにしてみましょう。さらにプログラムを追加して、以下のコードにしてみてください。

  1. enchant(); // おまじない
  2. window.onload = function() {
  3. // 行の終わりには、;(セミコロン)を付けます。
  4. var game = new Game(320, 320); // ゲーム本体を準備すると同時に、表示される領域の大きさを設定しています。
  5. game.fps = 24; // frames(フレーム)per(毎)second(秒):ゲームの進行スピードを設定しています。
  6. game.preload('./img/chara1.png'); // pre(前)-load(読み込み):ゲームに使う素材をあらかじめ読み込んでおきます。
  7. game.onload = function() { // ゲームの準備が整ったらメインの処理を実行します。
  8. var kuma = new Sprite(32, 32); // くまというスプライト(操作可能な画像)を準備すると同時に、スプライトの表示される領域の大きさを設定しています。
  9. kuma.image = game.assets['./img/chara1.png']; // くまにあらかじめロードしておいた画像を適用します。
  10. kuma.x = 100; // くまの横位置を設定します。
  11. kuma.y = 120; // くまの縦位置を設定します。
  12. game.rootScene.addChild(kuma); // ゲームのシーンにくまを表示させます。
  13. game.rootScene.backgroundColor = '#7ecef4'; // ゲームの動作部分の背景色を設定しています。
  14. var speed = 1;// くまのスピードを表す変数(箱)を用意しておきます。
  15. // シーンに「毎フレーム実行イベント」を追加します。
  16. game.rootScene.addEventListener(Event.ENTER_FRAME, function() {
  17. kuma.x += speed; // 毎フレーム、くまの座標をspeed分ずらす
  18. });
  19. // シーンに「タッチイベント」を追加します。
  20. game.rootScene.addEventListener(Event.TOUCH_START, function(e) {
  21. // タッチイベントは、タッチした座標をe.x , e.y として取ることができます。
  22. // なお、eという変数の名前は自由に変更できます。 例:function(好きな名前) { ?
  23. if (e.x > kuma.x) { // if (もしも) タッチした横位置が、くまの横位置よりも右側(座標の値として大きい)だったら
  24. speed = 1; // くまのスピードを1にする
  25. } else { // それ以外のときは
  26. speed = -1; // くまのスピードを-1にする
  27. }
  28. });
  29. }
  30. game.start(); // ゲームをスタートさせます
  31. // このようにスラッシュ2つで書き始めた行は「コメント」扱いとなります。
  32. // プログラム中のメモとして活用しましょう。
  33. /* また、このようにスラッシュと米印を使うと、
  34. 複数行に渡ってコメントを書くことができます。 */
  35. };
main.js(19・22・24~35行目が、さらに追加したコード)

くまがタッチした方向に移動(左右)

 くまは左右に動いたでしょうか? ここまでで何となく、ゲームを作る最低限の操作をできるようになったと思います。ここからは、内容の解説に移ります。

Copyright © ITmedia, Inc. All Rights Reserved.

スポンサーからのお知らせPR

Smart & Social 鬯ョ�ォ�ス�ェ髯区サゑスソ�ス�ス�ス�ス�コ髣包スオ隴∵コキ�ク�キ�ス�ケ隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ュ鬩幢ス「隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ー

鬮ォ�エ陝キ�「�ス�ス�ス�ャ鬮ォ�エ鬲�シ夲スス�ス�ス�・鬮ォ�エ陝カ�キ�ス�」�ス�ッ髣厄スォ�ス�」

注目のテーマ

4AI by @IT - AIを作り、動かし、守り、生かす
Microsoft & Windows最前線2025
AI for エンジニアリング
ローコード/ノーコード セントラル by @IT - ITエンジニアがビジネスの中心で活躍する組織へ
Cloud Native Central by @IT - スケーラブルな能力を組織に
システム開発ノウハウ 【発注ナビ】PR
あなたにおすすめの記事PR

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。