createjsミニゲーム開発プロセス例

ゲームの全体的なアイデアが実装されています

1. 車の加速状態をシミュレートするシームレスな背景画像を実現します

2. 障害物をランダムに描画します

滑走路には間違いなく多くの障害物があるため、画面を超える障害物に対しては「リソース回復」を実行する必要があります。そうしないと、ゲームは後ほどラグくなります。

this.backdrop = new createjs.Bitmap(bg);this.backdrop.x = 0;this.backdrop.y = 0;this.stage.addChild(that.backdrop);this.w = bg.width;this.h = bg.height;//创建一个背景副本，无缝连接var copyy = -bg.height;this.copy = new createjs.Bitmap(bg);this.copy.x = 0;this.copy.y = copyy;  //在画布上y轴的坐标为负的背景图长//使用createjs的tick函数，逐帧刷新舞台createjs.Ticker.addEventListener("tick", tick);function tick(e) {   if (e.paused !== 1) {//舞台逐帧逻辑处理函数that.backdrop.y = that.speed + that.backdrop.y;
        that.copy.y = that.speed + that.copy.y;if (that.copy.y > -40) {
              that.backdrop.y = that.copy.y + copyy;
        }if (that.copy.y > -copyy - 100) {
              that.copy.y = copyy + that.backdrop.y;
        }
        that.stage.update(e);
    }          
}

合計 3 つのトラックがあり、水平線上に同時に 3 つのプロップを表示することはできないため、障害物を描画するために 1 ～ 2 つの値をランダムに選択します。すべてのゲームの難易度を制御するパラメータを用意する必要があります。そうすれば、ゲームをオンラインに移行しようとしたときに、ボスがそのゲームを体験した後にそのゲームは難しすぎると感じるでしょう...それは非常に恥ずかしいことです。 したがって、加速オブジェクト、減速オブジェクト、爆弾の割合を設定します。この割合は、後でゲームの難易度を設定するために調整できます。

// 删除越界的元素for (var i = 0, flag = true, len = that.props.length; i < len; flag ? i++ : i) {if (that.props[i]) {if (that.props[i].y > height + 300) {
            that.stage.removeChild(that.props[i]);
            that.props.splice(i, 1);
            flag = false;
        } else {
            flag = true;
        }
    }
}

初めて障害物を描画した後、ランダムなタイミングで次の障害物が描画されます。

var num = parseInt(2 * Math.random()) + 1, i;for (i = 0; i < num; i++) {var type = parseInt(10 * Math.random()) + 1;// 设置道具出现比例if (type == 1) {/绘制炸弹
        } else if ((type >= 2) && (type <= 5)) {//绘制加速道具} else if ((type >= 6) && (type <= 10)) {//绘制减速道具        }
    }

3. 衝突検出

車が占める長方形の領域と障害物が占める長方形の領域を格納するために配列を使用します。各ティックで配列をループします。重複があります。重複がある場合は、衝突が発生しています。

createjs についての豆知識:

1. ステージレンダリングを一時停止して再開する

var time = (parseInt(3 * Math.random()) + 1);  //随机取1～3整数// 随机时间绘制障碍物setTimeout(function () {
    that.propsTmp = [];  //清空    that.drawObstacle(obj);
}, time * 400);  //400ms ~ 1200ms

2. 車には加速、減速、泡の破裂の効果があるためです。したがって、これらのエフェクトを同じコンテナ内に描画して、統一管理を容易にし、getChildByName を使用して直接オブジェクトを取得できるようにします。

createjs.Ticker.addEventListener(“tick”, tick); 
function tick(e) { if (e.paused === 1) { //处理     }
}     
createjs.Ticker.paused = 1; //在函数任何地方调用这个，则会暂停tick里面的处理 createjs.Ticker.paused = 0; //恢复游戏

3. プリロード preload (createjs のプリロードは非常に実用的です)

最初はプリロードを自分で書きましたが、後で createjs に画像のクロスドメイン処理があることに気づき、クロスドメイン img を処理します自分で 面倒なので直接createjsのプリロードを使います。

container.name = ‘role’; //设置name值car = this.stage.getChildByName(“role”);  //使用name值方便获取到该对象

一般的にゲームを作るときは、それをホストするゲームクラスを構築します。 以下はゲームの通常のインターフェイスです:

//放置静态资源的数组
var manifest = [
    {src: __uri('./images/car_prop2_tyre@2x.png'), id: 'tyre'}
];
var queue = new createjs.LoadQueue();
queue.on('complete', handleComplete, this);
queue.loadManifest(manifest);
//资源加载成功后,进行处理
function handleComplete() {
   var tyre = queue.getResult('tyre');  //拿到加载成功后的img
}

以上がcreatejsミニゲーム開発プロセス例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。