管理人がEnchant.jsでゼロからリズムゲームを作ってみる!(1週間経過) 

 時代に乗り損ねない為にはスマートフォンでゲームを作らねば、
そういき込んで管理人はEnchant.jsで作っていますが、
今の段階で見えてくるものが山ほど見つかりました。
ゲームシステム部分まで制作できたので、
忘れないうちに、ざっとまとめてしまおうと思います。
また、制作したゲームのソースの全解説もしてしまいます!
illust by Arenamontanus

・現況の発表(0から1週間目)・

 

  • 対応する色のボタンをちょうど良いタイミングで押すアレです。はい。
  • 白色のもののみ、敵にダメージが通ります。白はどのボタンでも大丈夫です。
  • 敵のHPが経れば減るほど速度が速くなり、白がなかなかやってこなくなります。
  • 管理人にはクリアできません。
  • アニメーション予定の中心部はまだ作っていません。
  • HPが0になってもゲームオーバー画面はまだ用意してません。

Enchant.jsについての現在の感想

8676072198_f1191441d1_z
Illust by Craig Sunter *Click-64*

・GOOD・

  •  やり方を理解できれば非常に簡単。感覚としては吉里吉里を扱うのど同じぐらい。
  • 応用性にも優れていますね。自分の作りたいものが作れるだけの内容はあります。
  • プラウザだけで動作・実行も可能なのは言うまでも無くGOODです。

・BAD・

  •  初心者でもプログラムが出来ると言う点に関して、間違ってはいないと思います。
    しかし、現状の説明だけだと作れるのはチュートリアルの範囲のものしか出来ないと思います。
  •  また、見本が少なすぎます。ぶっちゃけた話、コレと言った教科書が欲しいのですが、
    どれも薄い参考書程度のものしかありません。タグを一通り駆使した作品と
    その説明がくっ付いているものが欲しいです。

Html+Javascriptのプラウザゲームを制作していて気づいた感想

4457426729_20a0e14122_z
Illust by philcampbell

  •  スマートフォンが欲しい。僕、Androidアプリ作ってるけれどまだスマートフォン持ってません。
    実機で動かさないと正直本気で分かりませんね。エミュレーター探さなければ……。
  •  jsdo.it と 9leap.netの中のソースを元にゲームを作っていますが、この二つのサイトは
    コードをそのまま写しただけだ互換性が無いんですよね。jsdo.itに9leapのプラグインを入れても、
    書き方を統一しないといけません。当ゲームはjsdo.itの方で書いています。
  •  音ゲーの類は難しいですね。ネットの回線に強く依存しますし処理落ちが激しすぎます。
  •  複雑なゲームは向いてません。iPadならともかくタッチパネルの極小モニターの操作性は
    悪しとしか言いようがありません。出来るだけ簡単なものがいいようです。
    バーチャルパットの場合ゲームボーイレベルが限界です(十字キー+Aボタン+Bボタン)

ソースの説明!

6170448143_6e8386178c_z
Illust by toolmantim

 ココから先は、僕の制作したゲームの現在までのソース説明になります。
ソースコードは上記のゲームのJavascriptの部分に書いてあります。もしくはこちら⇒sousatu
どこか真似をしたいところや、疑問のある方は見ていただけると分かるかと思います。
もし、出来なかったら直接聞いてください。加筆します。Enchant.jsがどんなものか、
見に来た人はこの先を呼んでも面白くないです。

・ゲームの起動編・

// OpenGameSeeker’s “相殺(仮)”

enchant(); //enchant.js start

/*Date Read*/
window.onload = function() {

/*number*/
    var stage_width   =640;
    var stage_height  =520;
    var center_x = stage_width/2;
    var center_y = stage_height/2;
    
/*Game Window*/
    var game = new Game(stage_width,stage_height);
    
/*Date:set and read*/
    var system_back   =’http://jsrun.it/assets/n/g/M/E/ngMEw.jpg’;
    var system_title  =’http://jsrun.it/assets/k/h/A/M/khAME.png’;
    var system_credit =’http://jsrun.it/assets/k/E/J/i/kEJi1.png’;
    var system_start  =’http://jsrun.it/assets/s/M/c/p/sMcpI.png’;
    var system_bar    =’http://jsrun.it/assets/s/u/b/4/sub46.png’;
    var scene_credit  =’http://jsrun.it/assets/g/X/h/3/gXh3J.png’;
    var system_gr     =’http://jsrun.it/assets/k/Y/4/I/kY4Ig.png’;
    var system_ye     =’http://jsrun.it/assets/m/E/m/U/mEmUy.png’;
    var system_re     =’http://jsrun.it/assets/p/r/a/s/prasE.png’;
    var system_bl     =’http://jsrun.it/assets/7/J/Q/n/7JQnq.png’;
    var system_wh     =’http://jsrun.it/assets/9/w/N/q/9wNqS.png’;
    var green_b       =’http://jsrun.it/assets/5/z/1/X/5z1Xd.png’;
    var red_b         =’http://jsrun.it/assets/e/R/4/Y/eR4Yg.png’;
    var yellow_b      =’http://jsrun.it/assets/2/u/4/U/2u4Uu.png’;
    var blue_b        =’http://jsrun.it/assets/j/Y/c/e/jYce7.png’;
    var hp_player     =’http://jsrun.it/assets/k/Q/9/f/kQ9fY.png’;
    var hp_enemy      =’http://jsrun.it/assets/3/H/A/x/3HAxm.png’;
    
        game.fps = 30;//fps=30
        game.preload (system_back,system_title,system_start,system_back,system_credit,
                      system_bar,scene_credit,system_wh,system_gr,system_ye,system_re,
                      system_bl,green_b,red_b,yellow_b,blue_b,hp_player,hp_enemy);

/*enchant.js*/

 enchant()は、同ファイルに入っているenchant.jsを読み込むのに利用します。
jsdo.itの場合、初期状態でenchant.jsが入っていませんのでライブラリから同ファイルに追加する必要があります。
なお、/**/もしくは//と書くとコメントとなり、コード中に好きに補足を書けます。プログラムに影響はないです。

1_1

 

/*Date Read*/

 window.onload = function() {};
 ゲームのウインドウを開くのに必要です。ウインドウをロードしてるわけですね。
当然ながらゲームの内容は全て ’かぎかっこ{}’ の中に書く必要があります。
functionの()の中に変数を宣言することも可能ですが、window.onloadには不必要です。

/*Number*/

var stage_width =640;
var stage_height =520;
var center_x = stage_width/2;
var center_y = stage_height/2;

 varと言うものが出てきました。これは変数のことです。最初にvarを付けることで、
数字からデータまで、宣言と情報の保存をすることが出来ます。
stage_widthはゲームの横幅、stage_heightはゲームの縦幅を取っています。
プログラム言語では足し算は’+’、引き算は’-’、掛け算は’*’、割り算は’/’で表します。
また、改行の代わりに、セミコロン’;’を用います。

/*Game Window*/

var game = new Game(stage_width,stage_height);

 早速、全ての絵や文字のデータを入れる変数を宣言します。
new Game()はEnchant.jsにおけるプロジェクトの宣言です。
かっこの中にはx軸の幅(横の長さ)とy軸の幅(縦の長さ)を宣言しましょう。

/*Date:set and read*/

var system_back ='http://jsrun.it/assets/n/g/M/E/ngMEw.jpg'; 
var system_title  ='http://jsrun.it/assets/k/h/A/M/khAME.png';
var system_credit ='http://jsrun.it/assets/k/E/J/i/kEJi1.png';
var system_start  ='http://jsrun.it/assets/s/M/c/p/sMcpI.png';
var system_bar    ='http://jsrun.it/assets/s/u/b/4/sub46.png';
var scene_credit  ='http://jsrun.it/assets/g/X/h/3/gXh3J.png';
var system_gr     ='http://jsrun.it/assets/k/Y/4/I/kY4Ig.png';
var system_ye     ='http://jsrun.it/assets/m/E/m/U/mEmUy.png';
var system_re     ='http://jsrun.it/assets/p/r/a/s/prasE.png';
var system_bl     ='http://jsrun.it/assets/7/J/Q/n/7JQnq.png';
var system_wh     ='http://jsrun.it/assets/9/w/N/q/9wNqS.png';
var green_b       ='http://jsrun.it/assets/5/z/1/X/5z1Xd.png';
var red_b         ='http://jsrun.it/assets/e/R/4/Y/eR4Yg.png';
var yellow_b      ='http://jsrun.it/assets/2/u/4/U/2u4Uu.png';
var blue_b        ='http://jsrun.it/assets/j/Y/c/e/jYce7.png';
var hp_player     ='http://jsrun.it/assets/k/Q/9/f/kQ9fY.png';
var hp_enemy      ='http://jsrun.it/assets/3/H/A/x/3HAxm.png';

 ここでは、jsdo.itのサイトにアップロードした画像を読み込んでいます。
素材をアップロードするごとに素材の保存先の場所を教えてくれますので、
それを書き込めば大丈夫です。var(変数)で宣言しない限り素材は使えませんのでご注意ください。

/*game fps*/  

game.fps = 30;

  宣言した変数’game’のfpsの設定です。この設定の場合1秒間に30フレーム流れます。
1秒に30枚描写されていると考えください。

/*preload*/

game.preload (system_back,system_title,system_start,system_back,system_credit,system_bar,scene_credit,
          system_wh,system_gr,system_ye,system_re, system_bl,green_b,red_b,yellow_b,blue_b,hp_player,hp_enemy);

 宣言した変数、’game’の内部で使用する素材を読み込みます。
gameの中で使おうと思っている素材の変数は全てここで宣言してください。
1つでも抜けていると、その素材を使おうとしたときバグが発生します。(読み込みエラー・フリーズ)

タイトル画面編

conter1

 ここから先のコードは上記のタイトル画面を作る為に使われています。

・ソースコード・

/*Game onload*/
    game.onload= function(){
        var s_title =function(){
            
            var scene = new Scene();            
            scene.backgroundColor = ‘#000000′;
            
            /*Open title*/
            var img_start = new Sprite(stage_width,stage_height);
            img_start.image = game.assets[system_title];
            img_start.x = center_x – img_start.width/2;
            img_start.y = center_y – img_start.height/2;
            scene.addChild(img_start);
            
            /*Go to Start*/
            var system_s = new Sprite(258,60);
            system_s.image = game.assets[system_start];
            system_s.x = img_start.width *1/7;
            system_s.y = img_start.height*4/5;
            scene.addChild(system_s);

            /*Go to Credit*/
            var system_c = new Sprite(258,60);
            system_c.image = game.assets[system_credit];
            system_c.x = img_start.width *4/7;
            system_c.y = img_start.height*4/5;
            scene.addChild(system_c);
                         
            system_s.addEventListener(“touchstart”,function(){
            game.replaceScene(s_game());
            });
            system_c.addEventListener(“touchstart”,function(){
            game.replaceScene(s_credit());
            });
            return scene;   
        };

/*game onload*/

game.onload= function(){};

 ○○.onloadはこれをロードしろという、命令です。
今回の場合、宣言した変数gameのfunctionの中身を読み込んでいきます。

/*Create title*/

var s_title =function(){};

 タイトル画面’s_title’を宣言します。
タイトル画面に物を入れるためにfunction(){}で内容を書けるようにします。

var scene = new Scene();

 new Sceneはタイトル画面の土台となるレイヤーを制作します。
このレイヤーの上に見える素材を置いていく形になります。

scene.backgroundColor = '#000000';

 宣言した’scene ’に背景色を付けます。
#000000は黒色ですね。詳しくはこちら⇒16進数でのカラーコード
反対に#ffffffは白色になります。

 /*Open title*/

 var img_start = new Sprite(stage_width,stage_height);

 new Spriteは(x幅、y幅)を持ったオブジェクト(物)を作ることが出来ます。
newのつくものは次の単語の頭文字が大文字になるので注意ください。
忘れてるとエラーではじかれます。

 img_start.image = game.assets[system_title];

 □□.imageは宣言した変数の画像を変更します。
game.assets[△△]は△の部分に画像の変数を入れることで、
その画像を表示することが出来ます。今回の場合、
画像のxがstage_width、yがstage_height分読み込みます。
画像よりも大きいサイズをSprite()で宣言していた場合、画像はループして表示されます。

img_start.x = center_x - img_start.width/2;//0でも問題ないです
img_start.y = center_y - img_start.height/2;//0でも問題ないです

□□.xは□□のx座標を変更します。初期は0です。(画面の一番左)
□□.yは□□のy座標を変更します。初期は0です。(画面の一番上)

scene.addChild(img_start);

 △△.addChild(○○)は△△の変数に○○を付加することを言います。
この場合、img_startをsceneに追加します。
用は、○○のレイヤーを一番手前にもってきて、表示させるのだと思ってください。
全ての変数の初期状態は非表示ですので、これを書かないとimg_startは表示されません。
/*go to start*/、/*go to credit*/は同様にstartボタン、creditボタンを作っているだけです。

 

/*addEventListener*/

system_s.addEventListener("touchstart",function(){
game.replaceScene(s_game());
});

 非常に重要な部分です。system_sはタイトルのスタートボタンの変数です。
’ ○○.addEventListener(“△△”,function()){}); ’ はクリックなど外部からの入力を可能にします。
今回は”△△”の部分にtouchstartを入れています。touchstartは変数にクリックとタッチによる反応を加えるものです。
 system_sをクリックするとaddEventListenerのfunction()内部が実行されることになります。

 ○○.replaceScene(“△△”,function(){});は○○から△△へシーンを変更します。
今回の場合、s_titleのfunction内部からs_gameのfunctionへと移行します。
s_gameはゲーム部分です。(あのボタンクリックゲームの部分)、
よって、system_sの変数(タイトルのstartのボタン)をクリックするとs_gameのファンクションへ飛べます。

system_c.addEventListener(“touchstart”,function(){
game.replaceScene(s_credit());
});

 system_cも同様の事を行っています。Creditボタンを押すとa_creditのファンクションへ飛ぶことになります。

/*return*/

 return scene;  

 ファンクション内部の変数 sceneを宣言した場所まで飛びます。
returnがあることでfunction内は常にループすることになります。

ソースの説明!(ゲームシステム設定編①)

            var s_game = function(){

                var enemy_hp =10;
                var enemy_hp_count=enemy_hp;
                var player_hp=10;
                var player_hp_count=player_hp;
                var speed=5;
                var speed_white=10;
                var scene = new Scene();
                scene.backgroundColor = “#000000″;
                                
                /*Player HP by canvas*/

                var system_hp_player =new Sprite(220,50);
                system_hp_player.image=game.assets[hp_player];
                system_hp_player.x    =100;
                system_hp_player.y    =0;
                
                var player_hp_bar = new Sprite(220,50);
                var surface1= new Surface(220,50);
                player_hp_bar.x     = 100;
                player_hp_bar.y     = 0;
                surface1.context.beginPath();
                surface1.context.fillStyle = “blue”;
                surface1.context.rect(0,0,player_hp*22,50);
                surface1.context.fill();
                surface1.context.closePath();
                surface1.context.stroke();     
                player_hp_bar.image = surface1;
                scene.addChild(player_hp_bar);
                scene.addChild(system_hp_player);
                
                player_hp_bar.addEventListener(‘enterframe’, function() {

                    if(player_hp_count>player_hp){   
                       surface1.context.beginPath();
                       surface1.context.fillStyle = “rgb(0, 0, 0)”;
                       surface1.context.fillRect(0, 0, 220, 50);
                       surface1.context.rect(0,0,player_hp*22,50);
                       surface1.context.fillStyle = “blue”;
                       surface1.context.fill();
                       surface1.context.closePath();
                       surface1.context.stroke();     
                       scene.addChild(player_hp_bar);
                       player_hp_count–;
                       scene.addChild(system_hp_player);
                    }
                });
                

                
                /*Enemy HP by canvas*/
                
                var system_hp_enemy =new Sprite(220,50);
                system_hp_enemy.image=game.assets[hp_enemy];
                system_hp_enemy.x    =320;
                system_hp_enemy.y    =0;

                
                var enemy_hp_bar = new Sprite(220,50);
                var surface2= new Surface(220,50);
                enemy_hp_bar.x     = 320;
                enemy_hp_bar.y     = 0;
                surface2.context = surface2.context;
                surface2.context.beginPath();
                surface2.context.fillStyle = “red”;
                surface2.context.rect(0,0,enemy_hp*22,50);
                surface2.context.fill();
                surface2.context.closePath();
                surface2.context.stroke();     
                scene.addChild(enemy_hp_bar);
                scene.addChild(system_hp_enemy);
                enemy_hp_bar.image = surface2;
                enemy_hp_bar.addEventListener(‘enterframe’, function() {
                    if(enemy_hp_count>enemy_hp){
                       surface2.context.beginPath();
                       surface2.context.fillStyle = “rgb(0, 0, 0)”;
                       surface2.context.fillRect(0, 0, 220, 50);
                       surface2.context.rect(22*(10-enemy_hp),0,22*(enemy_hp),50);
                       surface2.context.fillStyle = “red”;
                       surface2.context.fill();
                       surface2.context.closePath();
                       surface2.context.stroke();
                       scene.addChild(enemy_hp_bar);
                       enemy_hp_count–;
                       scene.addChild(system_hp_enemy);
                    }
                });
             

/*Player HP by canvas*/  

var system_hp_player =new Sprite(220,50);
system_hp_player.image=game.assets[hp_player];
system_hp_player.x    =100;
system_hp_player.y    =0;

 system_hp_playerを幅220、縦50ピクセルで宣言し、
hp_playerの絵を載せて、x座標100、y座標0に貼り付けろという命令です。
これは、プレイヤーのhpの画像になります。同じ変数の名前は使えないので、
絵を保存しているhp_playerと、その絵を利用する system_hp_playerは別物です。

               
var player_hp_bar = new Sprite(220,50);
var surface1= new Surface(220,50);

 new Surface(x,y)は線や図形を描写する為のキャンパスを作成します。
220×50の幅を確保しているわけです。

player_hp_bar.x     = 100;
player_hp_bar.y     = 0;
surface1.context.beginPath();

 ○○.contextは線や図形を書く際の描写のタグです。
○○.context.beginPath();は書いた線の記録を開始します。

surface1.context.fillStyle = "blue";

 ○○.fillstyleは塗りつぶしの設定を決めます。
現在は青色が指定されています。

surface1.context.rect(0,0,player_hp*22,50);

 ○○.context.rect(始まりのx、始まりのy、終わりのx、終わりのy)と範囲を指定します。

surface1.context.fill();

 ○○.context.fillは塗りつぶし命令です。

surface1.context.closePath();

 closePath();は描写の終了を宣言します。

surface1.context.stroke();

 ○○.context.stroke();は指定範囲の枠の線を塗る命令です。
今回の場合塗りつぶしているので実は要りません。

player_hp_bar.image = surface1;

 player_hp_bar.の絵に描いたsurface1を登録します。

scene.addChild(player_hp_bar);
scene.addChild(system_hp_player);

 canvasで書いたライフバー player_hp_bar とそのライフバーを装飾するsystem_hp_player を
レイヤーとして表示します。後のほうが前に来る仕様のため、system_hp_playerを後に書きます。
                

player_hp_bar.addEventListener('enterframe', function() {
  if(player_hp_count>player_hp){   
    surface1.context.beginPath();
        surface1.context.fillStyle = "rgb(0, 0, 0)";
        surface1.context.fillRect(0, 0, 220, 50);
        surface1.context.rect(0,0,player_hp*22,50);
        surface1.context.fillStyle = "blue";
        surface1.context.fill();
        surface1.context.closePath();
        surface1.context.stroke();     
        scene.addChild(player_hp_bar);
         player_hp_count--;
         scene.addChild(system_hp_player);
         }
 });

 addEventListener(‘enterframe’,funtion(){});は1フレームごとに動きます。
このケースではプレイヤーのhpが1フレーム前のhpよりも減っていた場合、
canvasで描いた図形の描写のx幅を22ピクセル減らしています。
ひとつ前に書いた図形はrgb(0,0,0)を用いて黒で塗りなおしています。
enemy_hp_by_canvasも同様のことを行っているので飛ばします。

ソースの説明!(ゲームシステム設定編②)

                /*White button*/              
                
                var system_white =new Sprite(64,170);
                system_white.image=game.assets[system_wh];
                system_white.x    =1100;
                system_white.y    =350;
                scene.addChild(system_white);
                
                var system_white_hit = new Sprite(32,170);
                system_white_hit.x    =system_white.x+32;
                system_white_hit.y    =system_white.y;
                scene.addChild(system_white_hit);
                
                var white_check =new Sprite(1,170);
                white_check.image=game.assets[system_gr];
                white_check.x =135;
                white_check.y =0;
                scene.addChild(white_check);
                             
                /*Picture system_bar*/
                var system_b = new Sprite(640,170);
                system_b.image=game.assets[system_bar];
                system_b.y    =350;
                scene.addChild(system_b);
                
                /*Green button*/

                var system_green = new Sprite(64,170);
                system_green.image=game.assets[system_gr];
                system_green.x    =700;
                system_green.y    =350;
                scene.addChild(system_green);
                
                var system_green_hit = new Sprite(32,170);
                system_green_hit.x    =system_green.x+32;
                system_green_hit.y    =system_green.y;
                scene.addChild(system_green_hit);
                
                var green_button = new Sprite(100,175);
                green_button.image=game.assets[green_b];
                green_button.x    =0;
                green_button.y    =0;
                scene.addChild(green_button);
                
                var green_check =new Sprite(1,170);
                green_check.image=game.assets[system_gr];
                green_check.x =135;
                green_check.y =0;
                scene.addChild(green_check);
                
                green_button.addEventListener(‘touchstart’, function() {
                green_check.tl.moveBy(0,210,0,enchant.Easing.CUBIC_EASEOUT)
                    .moveBy(0,-210,10,enchant.Easing.CUBIC_EASEIN);                    
                });

                /*Red button*/              
                
                var system_red =new Sprite(64,170);
                system_red.image=game.assets[system_re];
                system_red.x    =800;
                system_red.y    =350;
                scene.addChild(system_red);
                
                var system_red_hit = new Sprite(32,170);
                system_red_hit.x    =system_red.x+32;
                system_red_hit.y    =system_red.y;
                scene.addChild(system_red_hit);
                
                var red_button = new Sprite(100,175);
                red_button.image=game.assets[red_b];
                red_button.x    =0;
                red_button.y    =175;
                scene.addChild(red_button);
                
                var red_check =new Sprite(1,170);
                red_check.image=game.assets[system_gr];
                red_check.x =135;
                red_check.y =0;
                scene.addChild(red_check);
                
                red_button.addEventListener(‘touchstart’, function() {
                red_check.tl.moveBy(0,210,0,enchant.Easing.CUBIC_EASEOUT)
                    .moveBy(0,-210,10,enchant.Easing.CUBIC_EASEIN);                    
                });
                
                
                /*Blue button*/
                
                var system_blue =new Sprite(64,170);
                system_blue.image=game.assets[system_bl];
                system_blue.x    =900;
                system_blue.y    =350;
                scene.addChild(system_blue);
                                                
                var system_blue_hit = new Sprite(32,170);
                system_blue_hit.x    =system_blue.x+32;
                system_blue_hit.y    =system_blue.y;
                scene.addChild(system_blue_hit);
                
                var blue_button = new Sprite(100,175);
                blue_button.image=game.assets[blue_b];
                blue_button.x    =540;
                blue_button.y    =0;
                scene.addChild(blue_button);
                
                var blue_check=new Sprite(1,170);
                blue_check.image=game.assets[system_gr];
                blue_check.x =135;
                blue_check.y =0;
                scene.addChild(blue_check);
                
                blue_button.addEventListener(‘touchstart’, function() {
                blue_check.tl.moveBy(0,210,0,enchant.Easing.CUBIC_EASEOUT)
                    .moveBy(0,-210,10,enchant.Easing.CUBIC_EASEIN);                    
                });

                /*Yellow Button*/
                
                var system_yellow =new Sprite(64,170);
                system_yellow.image=game.assets[system_ye];
                system_yellow.x    =1000;
                system_yellow.y    =350;
                scene.addChild(system_yellow);
                
                var system_yellow_hit = new Sprite(32,170);
                system_yellow_hit.x    =system_yellow.x+32;
                system_yellow_hit.y    =system_yellow.y;
                scene.addChild(system_yellow_hit);
                
                var yellow_button = new Sprite(100,175);
                yellow_button.image=game.assets[yellow_b];
                yellow_button.x    =540;
                yellow_button.y    =175;
                scene.addChild(yellow_button);

                var yellow_check=new Sprite(1,170);
                yellow_check.image=game.assets[system_gr];
                yellow_check.x =135;
                yellow_check.y =0;
                scene.addChild(yellow_check);
                
                yellow_button.addEventListener(‘touchstart’, function() {
                yellow_check.tl.moveBy(0,210,0,enchant.Easing.CUBIC_EASEOUT)
                    .moveBy(0,-210,10,enchant.Easing.CUBIC_EASEIN);                    
                });
                         
                /*miss line*/
                var miss=new Sprite(1,170);
                miss.image=game.assets[system_gr];
                miss.x=-50;
                miss.y=350;
                scene.addChild(miss);
                
                /*Debug Player Hp*/
                var label_score = new Label();
                label_score.x = 10;
                label_score.y = 10;
                label_score.color = “#ffffff”;
                label_score.font = “24px sans-serif”;
                scene.addChild(label_score);

                /*Debug Enemy Hp*/
                var enemy_score = new Label();
                enemy_score.x = 600;
                enemy_score.y = 10;
                enemy_score.color = “#ffffff”;
                enemy_score.font = “24px sans-serif”;
                scene.addChild(enemy_score);

/*Check.tl.moveBy*/

green_check.tl.moveBy(0,210,0,enchant.Easing.CUBIC_EASEOUT)
                       .moveBy(0,-210,10,enchant.Easing.CUBIC_EASEIN); 
                  

○○_check.tl.moveBy(xの座標、yの座標、フレームの時間、使用するタイプの設定)は何の要素を用いるかの関数名です。
CUBIC_EASEOUTもしくはEASEINの場合(移動するx,移動するy,フレーム数)を指定できます。
今回の場合、green_checkの変数をy座標に210追加し、10フレームかけてもとの位置に戻らせています。他の

/*Debug Player HP*/ 

var label_score = new Label();
label_score.x = 10;
label_score.y = 10;
label_score.color = "#ffffff";

label_score.font = “24px sans-serif”;
scene.addChild(label_score);

new Lavel()は変数に文字を記憶できるようにします。
○○.color=”#000000″は色の指定
○○.font = “24px sans-serif”; はサイズと書式の決定です。

ソースの説明!(ゲームシステム起動編)

                /*Game System Start*/
                scene.addEventListener(“enterframe”,function(){
                    label_score.text = player_hp;
                    enemy_score.text = enemy_hp;

                    system_green.x-=speed;
                    system_green_hit.x-=speed;
                    system_red.x-=speed;
                    system_red_hit.x-=speed;
                    system_blue.x-=speed;
                    system_blue_hit.x-=speed;
                    system_yellow.x-=speed;
                    system_yellow_hit.x-=speed;
                    system_white.x-=speed_white;
                    system_white_hit.x-=speed_white;
        
                    
                    //Miss Check//
                    
                    /*Miss Check -Green-*/
                    
                    if(system_green_hit.intersect(miss)){
                    player_hp–;
                    system_green.x=stage_width;
                    if(Math.abs(system_green.x)-Math.abs(system_red.x)<=64)system_green.x+=64;
                    if(Math.abs(system_green.x)-Math.abs(system_yellow.x)<=64)system_green.x+=64;                        
                    if(Math.abs(system_green.x)-Math.abs(system_blue.x)<=64)system_green.x+=64;
                    if(Math.abs(system_green.x)-Math.abs(system_white.x)<=64)system_green.x+=64;
                    system_green_hit.x=system_green.x;
                    }
                    
                    /*Miss Check -Red-*/
                    
                    if(system_red_hit.intersect(miss)){
                    player_hp–;
                    system_red.x=stage_width;
                    if(Math.abs(system_red.x)-Math.abs(system_green.x)<=64)system_red.x+=64;                    
                    if(Math.abs(system_red.x)-Math.abs(system_yellow.x)<=64)system_red.x+=64;                        
                    if(Math.abs(system_red.x)-Math.abs(system_blue.x)<=64)system_red.x+=64;
                    if(Math.abs(system_red.x)-Math.abs(system_white.x)<=64)system_red.x+=64;
                    system_red_hit.x=system_red.x;
                    }
                    
                    /*Miss Check -Blue-*/
                    
                    if(system_blue_hit.intersect(miss)){
                    player_hp–;
                    system_blue.x=stage_width;
                    if(Math.abs(system_blue.x)-Math.abs(system_green.x)<=64)system_blue.x+=64;                    
                    if(Math.abs(system_blue.x)-Math.abs(system_yellow.x)<=64)system_blue.x+=64;                        
                    if(Math.abs(system_blue.x)-Math.abs(system_red.x)<=64)system_blue.x+=64;
                    if(Math.abs(system_blue.x)-Math.abs(system_white.x)<=64)system_blue.x+=64;
                    system_blue_hit.x=system_blue.x;
                    }
                    
                    /*Miss Check -Yellow-*/
                    
                    if(system_yellow_hit.intersect(miss)){
                    player_hp–;
                    system_yellow.x=stage_width;
                    if(Math.abs(system_yellow.x)-Math.abs(system_green.x)<=64)system_yellow.x+=64;                    
                    if(Math.abs(system_yellow.x)-Math.abs(system_blue.x)<=64)system_yellow.x+=64;                        
                    if(Math.abs(system_yellow.x)-Math.abs(system_red.x)<=64)system_yellow.x+=64;                         
                    if(Math.abs(system_yellow.x)-Math.abs(system_white.x)<=64)system_yellow.x+=64;
                    system_yellow_hit.x=system_yellow.x;
                    }
                    
                    /*Miss Check -white-*/
                    if(system_white_hit.intersect(miss)){
                    system_white.x=stage_width;
                    if(Math.abs(system_white.x)-Math.abs(system_green.x)<=64)system_white.x+=64;                    
                    if(Math.abs(system_white.x)-Math.abs(system_blue.x)<=64)system_white.x+=64;                        
                    if(Math.abs(system_white.x)-Math.abs(system_red.x)<=64)system_white.x+=64;
                    if(Math.abs(system_white.x)-Math.abs(system_yellow.x)<=64)system_white.x+=64;                         
 
                    system_white_hit.x=system_white.x;
                    }
                    
                    //Counter Balance//
                    
                    /*Counter Balance -Green-*/
                    
                    if(system_green_hit.intersect(green_check)){
                    system_green.x=stage_width;
                    if(Math.abs(system_green.x)-Math.abs(system_red.x)<=64)system_green.x+=64;
                    if(Math.abs(system_green.x)-Math.abs(system_yellow.x)<=64)system_green.x+=74;                        
                    if(Math.abs(system_green.x)-Math.abs(system_blue.x)<=64)system_green.x+=84;
                    if(Math.abs(system_green.x)-Math.abs(system_white.x)<=64)system_green.x+=94;
                    system_green_hit.x=system_green.x+32;
                    }
                    
                    /*Counter Balance -Red-*/
                    if(system_red_hit.intersect(red_check)){
                    system_red.x=stage_width;
                    if(Math.abs(system_red.x)-Math.abs(system_green.x)<=64)system_red.x+=64;                    
                    if(Math.abs(system_red.x)-Math.abs(system_yellow.x)<=64)system_red.x+=74;                        
                    if(Math.abs(system_red.x)-Math.abs(system_blue.x)<=64)system_red.x+=84;
                    if(Math.abs(system_red.x)-Math.abs(system_white.x)<=64)system_red.x+=94;
                    system_red_hit.x=system_red.x+32;
                    }
                    
                    /*Counter Balance -Blue-*/
                    if(system_blue_hit.intersect(blue_check)){
                    system_blue.x=stage_width;
                    if(Math.abs(system_blue.x)-Math.abs(system_green.x)<=64)system_blue.x+=64;                    
                    if(Math.abs(system_blue.x)-Math.abs(system_yellow.x)<=64)system_blue.x+=74;                        
                    if(Math.abs(system_blue.x)-Math.abs(system_red.x)<=64)system_blue.x+=84;
                    if(Math.abs(system_blue.x)-Math.abs(system_white.x)<=64)system_blue.x+=94;
                    system_blue_hit.x=system_blue.x+32;
                    }
                    
                    /*Counter Balance -Yellow-*/
                    if(system_yellow_hit.intersect(yellow_check)){
                    system_yellow.x=stage_width;
                    if(Math.abs(system_yellow.x)-Math.abs(system_green.x)<=64)system_yellow.x+=64;                    
                    if(Math.abs(system_yellow.x)-Math.abs(system_blue.x)<=64)system_yellow.x+=74;                        
                    if(Math.abs(system_yellow.x)-Math.abs(system_red.x)<=64)system_yellow.x+=84;
                    if(Math.abs(system_yellow.x)-Math.abs(system_white.x)<=64)system_yellow.x+=94;
                    system_yellow_hit.x=system_yellow.x+32;
                    }
                    
                    /*Attack -White-*/
                    if(system_white_hit.intersect(green_check)||system_white_hit.intersect(red_check)||
                        system_white_hit.intersect(blue_check)||system_white_hit.intersect(yellow_check)){
                            enemy_hp–;
                            speed++;
                            speed_white–;
                            system_white.x=stage_width;
                            if(Math.abs(system_white.x)-Math.abs(system_red.x)<=64)system_white.x+=64;
                            if(Math.abs(system_white.x)-Math.abs(system_yellow.x)<=64)system_white.x+=74;                        
                            if(Math.abs(system_white.x)-Math.abs(system_blue.x)<=64)system_white.x+=84;    
                            if(Math.abs(system_white.x)-Math.abs(system_green.x)<=64)system_white.x+=94;  
                    system_white_hit.x=system_white.x+32;
                    }

                });
                
                return scene;                              
            };
        
            var s_credit = function(){
                var scene = new Scene();
                scene.backgroundColor = “#000000″;
                
                var credit = new Sprite(640,520);
                credit.image=game.assets[scene_credit];
                scene.addChild(credit);
                credit.addEventListener(“touchend”,function(){
                game.popScene();
                game.replaceScene(s_title());
            });

                return scene;                
            };
        /*全部読み込んでからゲームを起動*/
        game.replaceScene(s_title());
    };
    game.start();
};

/*Game System Start*/ 

system_green.x-=speed;
system_green_hit.x-=speed;
system_red.x-=speed;
system_red_hit.x-=speed;
system_blue.x-=speed;
system_blue_hit.x-=speed;
system_yellow.x-=speed;
system_yellow_hit.x-=speed;
system_white.x-=speed_white;
system_white_hit.x-=speed_white;

○○ -= は引き算をしろという形です。
a+=2;の場合2を足せと言う意味になります。
今回の場合speed分xを減らせと言う形になります。

/*Miss Check -Green-*/                   

if(system_green_hit.intersect(miss)){
player_hp--;
system_green.x=stage_width;
if(Math.abs(system_green.x)-Math.abs(system_red.x)<=64)system_green.x+=64;
if(Math.abs(system_green.x)-Math.abs(system_yellow.x)<=64)system_green.x+=64;                        
if(Math.abs(system_green.x)-Math.abs(system_blue.x)<=64)system_green.x+=64;
if(Math.abs(system_green.x)-Math.abs(system_white.x)<=64)system_green.x+=64;
system_green_hit.x=system_green.x;
}

○○.intersect(△△)は○○が△△と一部分でもくっついているかどうかの判定をします。
ifはもしそうならば、と言う意味なので、くっついていた場合下記の内容を読み込みます。
Math.abs(○○)は数字の絶対値を取得します。ここでやっているのはボタンのバーが重なるのを
防ぐ処理をしていますが、上手くいってませんね(涙)

/*全部読み込んでからゲームを起動*/

    game.start();
};

 ○○.start();は実行を意味します。
コレを最後に持ってくることで、全てのデータをロードし終えた状態でゲームを開始することが出来ます。
コレがないと一生始まりません。データを読み込んで終わりです。
       

最後に

 管理人がEnchant.jsでゼロからリズムゲームを作ってみる!(1週間経過)でした。今週はゼミ合宿があるためいったん離れる予定です。それにしても、説明を書くのも一苦労だな……。
分からないこと、聞きたいことがありましたら総合スレの方に好きに書き込んでくださいね!




コメントを残す

Return to Top ▲Return to Top ▲