게임의 전반적인 아이디어가 구현되었습니다
1. 자동차가 가속하는 상태를 시뮬레이션하기 위해 원활한 배경 이미지를 구현합니다
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. 활주로에는 장애물이 많을 것이기 때문에 화면을 넘어서는 장애물에 대해 '자원 회수'를 수행해야 합니다. 그렇지 않으면 나중에 게임이 점점 더 느려지게 됩니다.
// 删除越界的元素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)) {//绘制减速道具 } }
var time = (parseInt(3 * Math.random()) + 1); //随机取1~3整数// 随机时间绘制障碍物setTimeout(function () { that.propsTmp = []; //清空 that.drawObstacle(obj); }, time * 400); //400ms ~ 1200ms
3. 충돌 감지우리는 배열을 사용하여 자동차가 차지하는 직사각형 영역과 장애물이 차지하는 직사각형 영역을 저장합니다. 겹침이 있습니다. 겹침이 있으면 충돌이 발생한 것입니다.
createjs에 대한 약간의 지식: 1. 스테이지 렌더링 일시 중지 및 재개
createjs.Ticker.addEventListener(“tick”, tick); function tick(e) { if (e.paused === 1) { //处理 } } createjs.Ticker.paused = 1; //在函数任何地方调用这个,则会暂停tick里面的处理 createjs.Ticker.paused = 0; //恢复游戏
2. 왜냐하면 자동차는 가속, 감속 및 거품 터지는 효과를 갖기 때문입니다. 따라서 이러한 효과를 동일한 컨테이너에 그려서 통합 관리를 용이하게 합니다. 이러한 효과에 대한 name 속성을 설정한 다음 getChildByName을 직접 사용하여 개체를 얻을 수 있습니다.
container.name = ‘role’; //设置name值car = this.stage.getChildByName(“role”); //使用name值方便获取到该对象
3. 프리로드 프리로드(createjs 프리로드가 매우 실용적입니다)
처음에는 프리로드를 직접 작성했는데 나중에 createjs에 이미지에 대한 크로스 도메인 처리 기능이 있고 크로스 도메인 img를 처리한다는 것을 알게 되었습니다. 혼자서는 더 귀찮으니 createjs를 직접 preloading해서 사용하세요.
//放置静态资源的数组 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 }
일반적으로 게임을 만들 때 일반적으로 게임 클래스를 만들어 호스팅합니다. 다음은 게임의 일반적인 인터페이스입니다.
;(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(); } } })()
위 내용은 createjs 미니게임 개발 프로세스 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!