HTML 5ゲーム実戦(3):60行コードで水平クールゲームを実現

クールなゲームは間違いなく現在最も人気のあるゲームのタイプの一つで、3 Dクールなゲームは少し難しいかもしれませんが(これは分かりません)、2 Dクールなゲームはとても簡単で、美術資源さえあれば、「毎日クールに走る」という流行ゲームを作るのも難しいことではありません.ここでは、Gamebuilder+CanTKでゲームを開発する方法をリスがクールに走るゲームで紹介します.このゲームのホームシーンは60行のコードしか使われていません.
CanTK(Canvas ToolKit)はオープンソースのゲームエンジンとアプリフレームワークで、HTML 5ゲームとアプリを開発する利器です.もしあなたがそれが好きならgithubで星をつけてください.あなたのサポートは私たちの努力の原動力です.https://github.com/drawapp8/cantk
0.最終成果を先に表示:
オンライン実行:http://gamebuilder.duapp.com/apprun.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586
オンライン編集:http://gamebuilder.duapp.com/gamebuilder.php?appid=ZecSmA0UGRTh9juSEmu8RjkK-951412475814586
1、新しい項目を作って、シーンの中のボールと地面を削除して、携帯電話を横スクリーンに設定します
シーンの物理エンジンパラメータを設定し、Y方向の重力を50に設定し、ピクセルとメートルの割合を50に設定します.シーンの背景画像を設定します.シーンの仮想幅を設定します.
2、シーンに画像を入れてパスを作成します.コピーして貼り付け、異なる画像を使用して完全なパスを生成します(シーンをドラッグしてシーンのすべてのビューを表示できます).
3,前面に配置された画像経路は,純粋に視覚的効果を達成するために,物理的効果は剛体を配置して実現する必要がある.実行時にリジッドボディを非表示にする:弾性や摩擦力のないリジッドボディの物理的なプロパティを設定します.効果は次のとおりです.
4、シーンの中で1つのピクチャーの文字を置いて、点数を表すために使います.
5.シーン内に、榛子を表すフレームアニメーションを配置します.物理パラメータの設定:コピーペーストによって一連の榛子を生成します.
6.リスを表すフレームアニメーションをシーンに入れます.このフレームアニメーションにポリゴンを配置して、実行時に表示されないようにします.
物理パラメータを設定します.
7、シーンにいくつかの静的リジッドボディを置いて、リスが落ちたかどうかを検出します.
8、シーンに静的リジッドボディを置いて、リスが家に着いたかどうかを検出します.
インタフェースの仕事とほぼOKです.プログラマーとしてゲームインタフェースを調整するのは単調かもしれませんが、このときはプロダクトマネージャやUIデザイナーとして想像してみてください.
9、今プログラムを書きます.
シーンのonOpenイベントで:

//     
this.initGame = function() {
    for(var i = 0; i < this.children.length; i++) {
        var iter= this.children[i];
        if(iter.name === "ui-acorn") {
            iter.setFrameRate(30).play("normal", 100000);
        }
    }
//        ,   jumpdown，   run
    var squirrel = this.find("ui-squirrel", true);
    squirrel.nutBonus = 0;
    squirrel.setV(10, 20);
    squirrel.play("jumpdown", 1, function() {
        squirrel.play("run", 1000);
    });
}
//            。
this.onDialogClose = function(retInfo) {
    this.replay();
    this.initGame();
}
this.initGame();

シーンのonPointerUpイベントでは、リスに上向きの速度を与え、jumpupアニメーションを再生します.

var squirrel = this.find("ui-squirrel", true);
var vy = squirrel.jumpingUp ? -6 : -22;
squirrel.setV(4, vy).play("jumpup", 2, function() { squirrel.play("run", 10000); });  
squirrel.jumpingUp = true;

リスのonBeginContact(衝突)イベント:

var win = this.getWindow();
var element = body.element;
function onDialogClose(retInfo) { win.onDialogClose(retInfo);}

switch(element.name) {
    case "ui-acorn": {//      ，    ，        ，      。
        this.nutBonus++;
        element.play("dispear", 1, function() {win.removeChild(element);});
        break;
    }
    case "ui-target": {//       ，       。           。
        var info = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100};
        win.openWindow("win-success", onDialogClose, false, info);
        this.setEnable(false);
        break;
    }
    case "ui-failed": {//    ，       。           。
        var info = {levelScore:Math.round(this.x/100) * 100, nutBonus:this.nutBonus*100};
        win.openWindow("win-failed", onDialogClose, false, info);
        this.setEnable(false);
        break;
    }
    default: {//   ，       。
        this.jumpingUp = false;
        this.setV(8);
        break;
    }
}

リスのonMovedイベントでは、シーンのビューを移動し、合計スコアを表示します.

var win = this.getWindow();
win.setOffset(this.x - 200, this.y - 200);
var score = win.find("ui-score");
var distance = Math.round((this.x / 100)) * 100;
var totalScore = distance + this.nutBonus * 100;
score.setText(totalScore);

ゲームにはいくつかのダイアログボックスがあります.それらは簡単です.コピーして貼り付けて生成し、インタフェースを調整すればいいです.文章が長くならないようにします.ダイアログの使用については、個別の記事でご紹介しましょう.
読んでくれてありがとう.アドバイスとフィードバックを歓迎します.
参考資料:
https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3