| /** * 初始化函数,这个函数只执行一次 * @param {object} opts * @return {[type]} [description] */ init: function (opts) { //设置opts var opts = Object.assign({}, opts, CONFIG);//合并所有参数 this.opts = opts; this.status = 'start'; //计算飞机对象初始坐标 this.planePosX = canvasWidth / 2 - opts.planeSize.width; this.planePosY = canvasHeight - opts.planeSize.height - opts.canvasPadding; //飞机极限坐标 this.planeMinX = opts.canvasPadding; this.planeMaxX = canvasWidth - opts.canvasPadding - opts.planeSize.width; //计算敌人移动区域 this.enemyMinX = opts.canvasPadding; this.enemyMaxX = canvasWidth - opts.canvasPadding - opts.enemySize; //分数设置为0 this.score = 0; this.enemies = []; this.keyBoard = new KeyBoard(); this.bindEvent(); this.renderLevel(); }, |
2、绑定按钮事件
因为几个游戏场景中包含开始游戏（playBtn）、重新开始（replayBtn）、下一关游戏（nextBtn）、暂停游戏继续（stopBtn）几个按钮。我们需要给不同按钮执行不同事件。
首先定义 var self = this; 的原因是 this 的用法。在 bindEvent 函数中， this 指向 GAME 对象，而在 playBtn.onclick = function () {}; 中 this 指向了 playBtn ，这显然不是我们希望的，因为 playBtn 没有 play() 事件，GAME 对象中才有。因此需要把GAME 对象赋值给一个变量 self ，然后才能在 playBtn.onclick = function () {}; 中调用 play() 事件。
需要注意的是 replayBtn 按钮在闯关失败和通关场景都有出现，因此获取的是所有 .js-replay 的集合。然后 forEach 遍历每个 replayBtn 按钮，重置关卡和分数，调用 play() 事件。
| bindEvent: function () { var self = this; var playBtn = document.querySelector('.js-play'); var replayBtn = document.querySelectorAll('.js-replay'); var nextBtn = document.querySelector('.js-next'); var stopBtn = document.querySelector('.js-stop'); // 开始游戏按钮绑定 playBtn.onclick = function () { self.play(); }; //重新开始游戏按钮绑定 replayBtn.forEach(function (e) { e.onclick = function () { self.opts.level = 1; self.play(); self.score = 0; totalScoreText.innerText = self.score; }; }); // 下一关游戏按钮绑定 nextBtn.onclick = function () { self.opts.level += 1; self.play(); }; // 暂停游戏继续按钮绑定 stopBtn.onclick = function () { self.setStatus('playing'); self.updateElement(); }; }, |
3、生成飞机
| createPlane: function () { var opts = this.opts; this.plane = new Plane({ x: this.planePosX, y: this.planePosY, width: opts.planeSize.width, height: opts.planeSize.height, minX: this.planeMinX, speed: opts.planeSpeed, maxX: this.planeMaxX, planeIcon: opts.planeIcon }); } |
