createjs 미니게임 개발 프로세스 예시

게임의 전반적인 아이디어가 구현되었습니다

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

총 3개의 트랙이 있습니다. 가로선에 동시에 3개의 소품이 나타날 수 없으므로 무작위로 1~2개의 값을 선택하여 장애물을 그립니다. 우리는 모든 게임의 난이도를 제어할 수 있는 매개 변수를 가져야 합니다. 그래야 게임이 온라인에 출시될 때 상사가 게임을 경험한 후 게임이 너무 어렵다고 느낄 것입니다. 이는 매우 당혹스러울 것입니다. 따라서 가속 개체, 감속 개체, 폭탄의 비율을 설정하겠습니다. 이 비율은 나중에 조정하여 게임의 난이도를 설정할 수 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!