main.jsをテキストエディタで開き、次のプログラムを書き写して保存してください。
- enchant(); // おまじない
- window.onload = function() {
- // 行の終わりには、;(セミコロン)を付けます。
- var game = new Game(320, 320); // ゲーム本体を準備すると同時に、表示される領域の大きさを設定しています。
- game.fps = 24; // frames(フレーム)per(毎)second(秒):ゲームの進行スピードを設定しています。
- game.preload('./img/chara1.png'); // pre(前)-load(読み込み):ゲームに使う素材をあらかじめ読み込んでおきます。
- game.onload = function() { // ゲームの準備が整ったらメインの処理を実行します。
- var kuma = new Sprite(32, 32); // くまというスプライト(操作可能な画像)を準備すると同時に、スプライトの表示される領域の大きさを設定しています。
- kuma.image = game.assets['./img/chara1.png']; // くまにあらかじめロードしておいた画像を適用します。
- kuma.x = 100; // くまの横位置を設定します。
- kuma.y = 120; // くまの縦位置を設定します。
- game.rootScene.addChild(kuma); // ゲームのシーンにくまを表示させます。
- game.rootScene.backgroundColor = '#7ecef4'; // ゲームの動作部分の背景色を設定しています。
- }
- game.start(); // ゲームをスタートさせます
- // このようにスラッシュ2つで書き始めた行は「コメント」扱いとなります。
- // プログラム中のメモとして活用しましょう。
- /* また、このようにスラッシュと米印を使うと、
- 複数行に渡ってコメントを書くことができます。 */
- };
終わったら適当なWebブラウザで開いて見ましょう(サンプル画像はiPadのSafariで開いていますが、開発中はPCのWebブラウザで開いてOKです)。
このように、くまがポツンと表示されたら成功です!
細かい解説は後述するとして、ただくまが立っているだけではつまらないので、右にスーッと動かして見ましょう。
次の部分のプログラムを先ほどのソースコードの19行目に追加してみてください。
// シーンに「毎フレーム実行イベント」を追加します。 game.rootScene.addEventListener(Event.ENTER_FRAME, function() { kuma.x += 1; // 毎フレーム、くまの座標を右に1pxずつずらす });
追加したら保存して、Webブラウザで開きます。
どうでしょうか。くまは動きましたか? ですが、動くだけでもつまらないですね。
そこで、画面をタッチ(クリック)した方向に進むようにしてみましょう。さらにプログラムを追加して、以下のコードにしてみてください。
- enchant(); // おまじない
- window.onload = function() {
- // 行の終わりには、;(セミコロン)を付けます。
- var game = new Game(320, 320); // ゲーム本体を準備すると同時に、表示される領域の大きさを設定しています。
- game.fps = 24; // frames(フレーム)per(毎)second(秒):ゲームの進行スピードを設定しています。
- game.preload('./img/chara1.png'); // pre(前)-load(読み込み):ゲームに使う素材をあらかじめ読み込んでおきます。
- game.onload = function() { // ゲームの準備が整ったらメインの処理を実行します。
- var kuma = new Sprite(32, 32); // くまというスプライト(操作可能な画像)を準備すると同時に、スプライトの表示される領域の大きさを設定しています。
- kuma.image = game.assets['./img/chara1.png']; // くまにあらかじめロードしておいた画像を適用します。
- kuma.x = 100; // くまの横位置を設定します。
- kuma.y = 120; // くまの縦位置を設定します。
- game.rootScene.addChild(kuma); // ゲームのシーンにくまを表示させます。
- game.rootScene.backgroundColor = '#7ecef4'; // ゲームの動作部分の背景色を設定しています。
- var speed = 1;// くまのスピードを表す変数(箱)を用意しておきます。
- // シーンに「毎フレーム実行イベント」を追加します。
- game.rootScene.addEventListener(Event.ENTER_FRAME, function() {
- kuma.x += speed; // 毎フレーム、くまの座標をspeed分ずらす
- });
- // シーンに「タッチイベント」を追加します。
- game.rootScene.addEventListener(Event.TOUCH_START, function(e) {
- // タッチイベントは、タッチした座標をe.x , e.y として取ることができます。
- // なお、eという変数の名前は自由に変更できます。 例:function(好きな名前) { ?
- if (e.x > kuma.x) { // if (もしも) タッチした横位置が、くまの横位置よりも右側(座標の値として大きい)だったら
- speed = 1; // くまのスピードを1にする
- } else { // それ以外のときは
- speed = -1; // くまのスピードを-1にする
- }
- });
- }
- game.start(); // ゲームをスタートさせます
- // このようにスラッシュ2つで書き始めた行は「コメント」扱いとなります。
- // プログラム中のメモとして活用しましょう。
- /* また、このようにスラッシュと米印を使うと、
- 複数行に渡ってコメントを書くことができます。 */
- };
くまは左右に動いたでしょうか? ここまでで何となく、ゲームを作る最低限の操作をできるようになったと思います。ここからは、内容の解説に移ります。
Copyright © ITmedia, Inc. All Rights Reserved.
Smart & Social 鬯ョ�ォ�ス�ェ髯区サゑスソ�ス�ス�ス�ス�コ髣包スオ隴∵コキ�ク�キ�ス�ケ隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ュ鬩幢ス「隴趣ス「�ス�ス�ス�ウ鬩幢ス「�ス�ァ�ス�ス�ス�ー