Beispielprozess für die Entwicklung eines Minispiels von createjs

Umsetzung der Gesamtidee des Spiels

1. Implementieren Sie ein nahtlos verbundenes Hintergrundbild, um den Zustand des beschleunigenden Autos zu simulieren

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);
    }          
}

2. Zeichne zufällig Hindernisse

Weil es so sein wird Es wird auf jeden Fall eine Landebahn sein. Es gibt viele Hindernisse, und wir müssen eine „Ressourcenwiederherstellung“ für Hindernisse durchführen, die über den Bildschirm hinausgehen, sonst wird das Spiel später immer langsamer.

// 删除越界的元素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;
        }
    }
}

Es können insgesamt 3 Spuren gleichzeitig auf der horizontalen Linie angezeigt werden, daher wählen wir zufällig 1 bis 2 Werte aus Hindernisse zeichnen. Wir sollten Parameter haben, um den Schwierigkeitsgrad aller Spiele zu steuern, sodass der Boss, wenn das Spiel online geht, das Gefühl hat, dass das Spiel zu schwierig ist, nachdem er es erlebt hat ... was sehr peinlich wäre. Daher legen wir das Verhältnis von Beschleunigungsobjekten, Verzögerungsobjekten und Bomben fest. Dieses Verhältnis kann später angepasst werden, um den Schwierigkeitsgrad des Spiels festzulegen.

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)) {//绘制减速道具        }
    }

Nachdem das erste Hindernis gezeichnet wurde, wird zu einem zufälligen Zeitpunkt das nächste Hindernis gezeichnet.

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

3. Kollisionserkennung

Wir verwenden ein Array zum Speichern von Autos Der vom Hindernis eingenommene rechteckige Bereich und der vom Hindernis eingenommene rechteckige Bereich werden bei jedem Tick durch das Array durchlaufen, um festzustellen, ob eine Überlappung vorliegt.

Einige kleine Kenntnisse über createjs:

1. Bühnenrendering anhalten und fortsetzen

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

2. Weil das Auto beschleunigt, abbremst und Blasen platzen lässt. Daher zeichnen wir diese Effekte im selben Container, um eine einheitliche Verwaltung zu ermöglichen. Wir legen das Namensattribut für diese Effekte fest und können dann getChildByName direkt verwenden, um das Objekt abzurufen.

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

3. Das Vorladen von createjs ist sehr praktisch.

Das habe ich zuerst selbst geschrieben Es gibt eine domänenübergreifende Verarbeitung von Bildern in createjs. Es ist schwieriger, domänenübergreifende Bilder selbst zu verarbeiten, daher verwende ich direkt das Vorladen von createjs.

//放置静态资源的数组
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
}

Wenn wir ein Spiel erstellen, erstellen wir im Allgemeinen eine Spielklasse, um es zu hosten. Das Folgende ist eine normale Schnittstelle für das Spiel:

;(function () {function CarGame(){}
    CarGame.prototype = {
        init:function(manifest) {this.preLoad(manifest);  //资源预加载//时间倒计时this.prepare(3, 3);  //倒计时3秒this.bindEvent(); 
        },
        render:function() {           this.drawBg(bg1);           this.drawRole(car, effbomb, effquick);           this.drawObstacle(obj);
        },//在游戏结束的时候批量销毁destroy:function(){//移除tick事件createjs.Ticker.removeEventListener("tick", this.tick);//暂停里程，倒计时clearInterval(this.changem);
            clearTimeout(this.gametime);
        }，//由于期间用户可能切出程序进行其他操作，因此都需要一个暂停的接口pause:function() {//暂停里程，倒计时clearInterval(this.changem);
            clearTimeout(this.gametime);//暂停页面滚动createjs.Ticker.paused = 1;
        },//重新开始游戏reStart:function(){           this.destroy();           this.init(manifest);
        },
        gameOver:function(){           //显示爆炸效果   var car = this.stage.getChildByName("role");
           car.getChildByName('bomb').visible = true;
           car.getChildByName('quick').visible = false;           this.destroy();
        }
    }
})()

Das obige ist der detaillierte Inhalt vonBeispielprozess für die Entwicklung eines Minispiels von createjs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!