2012年12月13日木曜日

enchant.jsでプログラミング!

enchant.jsとは?

HTML5とJavaScriptで簡単にゲームが作れるライブラリです! 以上.

ハッカソンでぼくが作ったくまのゲームをベースに説明していきます.

・どんなゲームか?

 画面中央にいるひらめに,くまが当たるとくまが消えます.それを回避しゴールまでくまを導くのがゲームの趣旨です.



・操作方法
 ゲームで下のくま達は基本的に右側に走ります.くまをクリックしてやることによりランダムでくまを動かすことが出来ます.

因みに,ひらめもPCの十字キーを使い操作できます.


HTMLはbodyの中に何も書きません.headに準備くらいですね.
ぼくはこんな感じでで書きました.

 






↑<body>の中身を書かないのはきれい好きです.

続いて,javascript

enchant();
window.onload = function(){
    var i;
    var game = new Game(320, 320);
    var directx =1;
    var directy =1;
    

    game.fps = 10;
    game.preload("chara1.png");
    game.preload("hirame.gif");
    game.onload = function(){
    
        //hirame
        hirame = new Sprite(32, 32);
        hirame.image = game.assets["hirame.gif"];
        hirame.x = 280;
        hirame.y = 60;
       
        hirame.frame = 5;
        game.rootScene.addChild(hirame);
        //kuma
        newbear = new Array();
        for(i =0; i <= 40; i++){
            newbear[i] = new Sprite(32, 32);
            newbear[i].image = game.assets["chara1.png"];
            newbear[i].x = 0;
            newbear[i].y = i*32;
            newbear[i].frame = 5;
            game.rootScene.addChild(newbear[i]);
        
        
            newbear[i].addEventListener("enterframe", function(){
                this.x += 1;
                this.frame = this.age % 2 + 6;
                if(this.x > 320){
                    var uho ="
クリア!
"; $("body").append(uho); $("div#kuria").css("color","blue"); game.stop(); } if(this.within(hirame, 40)) { game.rootScene.removeChild(this); } }); newbear[i].addEventListener("touchstart", function(){ this.x += Math.random()*10; this.y += Math.random()*10; this.frame = this.age % 2 + 6; }); } hirame.addEventListener("enterframe", function(){ hirame.x -=15*directx; hirame.y -=15*directy; }); hirame.addEventListener(Event.ENTER_FRAME, function(){ if (game.input.left && (hirame.x > 0)){ hirame.x = hirame.x - 30; } if (game.input.right && (hirame.x < game.width-hirame.width)){ hirame.x = hirame.x + 30; } if (game.input.down && (hirame.y > 0)){ hirame.y = hirame.y + 30; } if (game.input.up && (hirame.y < game.width-hirame.width)){ hirame.y = hirame.y - 30; } }); hirame.addEventListener(Event.ENTER_FRAME, function(){ // 画面外かどうか調べる if ((hirame.x < 0) || (hirame.x > (game.width-hirame.width))){ directx = directx * -1; } if ((hirame.y < 0) || (hirame.y > (game.height-hirame.height))){ directy = directy * -1; } }); }; game.start(); };


説明
1行目ではenchant.jsの呼び出しです.
3~6行目は変数宣言です.4行目は画面の大きさ設定でブラウザの左上からx軸y軸ともどもに320px設定しました.
9行目は1秒間に何回画面が更新されるかです.10回に設定してます.
10,11行目はくまとひらめ(キャラクター)の画像の先読み込みです.
15行目はひらめの大きさ指定です.4行目と同じ形で指定してます.
16行目は11行目でpreloadした画像を指定しています.
17,18行目はひらめの初期ポジションです.17行目はx軸,18行目はy軸を設定してます.
21行目のrootSceneとはgameオブジェクトにはデフォルトであたえられている1つの Scene オブジェクトです.
今回はSceneという機能を使わなかったのですが,RPG等でいうとバトル前→バトル→バトル後みたいに画面がかわりますよね.そういうことができる機能です.
33行目は"enterframe"というイベントが起きたときの処理を書いています.
36~43行目はクリアになった時の処理です.
42行目はゲームが終わりになる処理です.
44行目はひらめとくまが当たったときの処理です.
45行目のremoveChildでくまが消えます.
48行目はマウスでクリックしたときの処理です.
61~74行目はボタンイベントです.game.input.○○で○○のボタンを押したときの処理がかけます.
75行目~83行目はひらめが画面外に消えそうになったら方向を帰る処理です.
85行目はgameスタートの処理です.

以上です!
簡単なので是非やってみてください!





1 件のコメント:

  1. Mohon ijin berpromosi. service Ac segala jenis merk. kami service Ac mencakup wilayah coverage seluruh Surabaya, Gresik, Sidoarjo. kami juga menerima jasa service perbaikan AC bongkar dan pasang AC. pekerjaan kami cepat, tepat, profesional, harga kompetitif di banding harga jasa luaran.
    service ac split sidoarjo
    tukang service ac sidoarjo
    service ac surabaya sidoarjo
    service ac surabaya selatan
    service ac surabaya timur
    service ac surabaya barat
    service ac surabaya utara
    service ac kota surabaya

    SPLIT-TYPE AIR CONDITIONERS
    MULTI-SPLIT AIR CONDITIONERS
    CHILLED WATER FAN COIL UNITS
    VRF AIR CONDITIONERS
    CHILLERS
    WINDOW-TYPE AIR CONDITIONERS

    http://jualjasaacsurabaya.blogspot.com
    Segera hubungi kami, dan kami akan datang kerumah Anda 24 Jam Non Stop.
    (Hari Sabtu / Minggu / Hari Libur buka)
    PIN BBM : 54BE0B4B / 5474CD93 / TELP : 085645475574

    返信削除