// 新建棒类
var Stick = function() {
// 飞机对应的dom元素
this.dom = null;
// 是否移动中
this.isMove = false;
// 移动的ID
this.moveId = null;
// 是否弹球中
this.isSend = false;
// 变大标记
this.bigCount = 0;
// 变小标记
this.smallCount = 0;
// 接棒的宽度变大变小时做存储
this.width = 0;
this.init();
}
Stick.prototype = {
// 游戏背景Dom
gamePanel : null,
// 游戏背景宽度
gameWidth : 0,
// 游戏背景高度
gameHeight : 0,
// 魔法棒移动速度
movepx : 10,
// 魔法棒移动频率
movesp : 30,
// 方向键值对应
keyCodeAndDirection : {
37 : "left",
39 : "right"
},
// 初始化
init : function() {
this.dom = document.createElement("div");
this.dom.className = "stick";
},
// 设置位置
setPosition : function(gamePanel, width, height) {
// 将魔法棒添加进游戏背景中
this.gamePanel = gamePanel;
this.gamePanel.appendChild(this.dom);
// 设置飞机的初始位置
this.dom.style.left = (width - this.dom.clientWidth)/2 + "px";
this.dom.style.top = height - this.dom.clientHeight + "px";
// 获取到游戏背景的宽和高
this.gameWidth = width;
this.gameHeight = height;
},
// 键盘按下事件
keydown : function(e) {
var keyCode = e.keyCode;
if (!this.isMove) {
this.move(keyCode);
}
},
// 键盘释放事件
keyup : function(e) {
// 判断是否为键盘释放
if (this.keyCodeAndDirection[e.keyCode]) {
// 停止移动
this.stopMove();
} else if (e.keyCode == 32) {
// 设置为非发弹中
this.isSend = false;
}
},
// 移动
move : function(keyCode) {
// 设置为移动中
this.isMove = true;
var _this = this;
// 判断移动方向
switch(this.keyCodeAndDirection[keyCode]) {
case "left" : {
this.moveId = setInterval(function() {_this.moveLeft();}, _this.movesp);
break;
}
case "right" : {
this.moveId = setInterval(function() {_this.moveRight();}, _this.movesp);
break;
}
default : break;
}
},
// 向左移动
moveLeft : function() {
var left = this.dom["offsetLeft"];
left = left - this.movepx >= 0 ? left - this.movepx : 0;
this.dom.style["left"] = left + "px";
if (left == 0) {
this.stopMove();
}
},
// 向右移动
moveRight : function() {
var left = this.dom["offsetLeft"];
var maxDistance = this.gameWidth - this.dom.clientWidth;
left = left + this.movepx <= maxDistance ? left + this.movepx: maxDistance;
this.dom.style["left"] = left + "px";
if (left == maxDistance) {
this.stopMove();
}
},
// 变小
changeSmall : function() {
if (this.smallCount >= 1) {
return;
} else {
this.dom.style.width = 80 + "px";
this.smallCount ++;
this.bigCount >= 1 ? this.bigCount -- : this.bigCount + 0;
}
this.dom.style.left = parseInt(this.dom.style.left, 10) + 20 + "px";
this.dom.style.width = 40 + "px";
},
// 变大
changeBig : function() {
if (this.bigCount >= 1) {
return;
} else {
this.dom.style.width = 80 + "px";
this.bigCount ++;
this.smallCount >= 1 ? this.smallCount -- : this.smallCount + 0;
}
if (parseInt(this.dom.style.left, 10) <= 75 ) {
this.dom.style.width = parseInt(this.dom.style.width, 10) + 75 + parseInt(this.dom.style.left, 10)+ "px";
this.dom.style.left = 0 + "px";
return;
} else if (this.dom.style.width + 150 + parseInt(this.dom.style.left, 10) >= this.gamePanel.clientWidth) {
this.dom.style.left = parseInt(this.dom.style.left, 10) - 150 + "px";
this.dom.style.width = this.dom.style.width + 150 + "px";
return;
} else {
this.dom.style.left = parseInt(this.dom.style.left, 10) - 75 + "px";
this.dom.style.width = 150 + "px";
}
},
// 停止移动
stopMove : function() {
this.isMove = false;
clearInterval(this.moveId);
},
// 发射弹球,外部接口，
onSendBall : function() {},
// 改分数外部接口
onChangeScore : function() {}
}
部分难点技术实现
通过键盘左右方向键移动挡板的代码实现：
复制代码 代码如下: