$(document).ready(function() {
// 球的类
var Ball = function(x, y) {
this.X = x;
this.Y = y;
this.style = {
width : "5px",
height : "5px",
color : "#E00"
};
this.direction = "downright";
this.time;
};
Ball.prototype = function() {
var initBall = function() {
var balldiv = document.createElement('div');
$(balldiv).css({
"position" : "absolute",
"left" : this.X + "px";,
"top" : this.Y + "px",
"width" : this.style.width,
"height" : this.style.height,
"background-color" : this.style.color
});
balldiv = bindMove.call(this, balldiv);
$('body').append(balldiv);
};
var bindMove = function(div) {
this.time = setInterval($.proxy(function() {
moveBall.call(this, div);
//changeDirection.call(this, div);
}, this), 100);
return div;
};
var changeDirection = function(div) {
if (this.X < 10) { //撞到左边墙
if ("upleft" == this.direction) {
this.direction = "upright";
moveBall.call(this, div);
} else if ("downleft" == this.direction){
this.direction = "downright";
moveBall.call(this, div);
}
} else if (this.X > 803) { //撞到右边墙
if ("upright" == this.direction) {
this.direction = "upleft";
moveBall.call(this, div);
} else if ("downright" == this.direction) {
this.direction = "downleft";
moveBall.call(this, div);
}
}
if (this.Y < 10) { //撞到顶部
gameOver.call(this);
} else if (this.Y > 403) { //掉到底部
gameOver.call(this);
}
var bBatPos = blackBat.getBatPosition();
if (bBatPos.X_head < this.X && bBatPos.X_tail > this.X && bBatPos.Y - 5 <= this.Y) { //撞到黑拍子上
if ("downright" == this.direction) {
this.direction = "upright";
moveBall.call(this, div);
} else if ("downleft" == this.direction) {
this.direction = "upleft";
moveBall.call(this, div);
}
}
var gBatPos = greenBat.getBatPosition();
if(gBatPos.X_head < this.X && gBatPos.X_tail > this.X && gBatPos.Y + 5 >= this.Y) { //撞到绿拍子上
if ("upright" == this.direction) {
this.direction = "downright";
moveBall.call(this, div);
} else if ("upleft" == this.direction) {
this.direction = "downleft";
moveBall.call(this, div);
}
}
};
var moveBall = function(div) {
switch (this.direction) {
case "upright" :
moveUpRight.call(this, div);
break;
case "upleft" :
moveUpLeft.call(this, div);
break;
case "downright" :
moveDownRight.call(this, div);
break;
case "downleft" :
moveDownLeft.call(this, div);
break;
}
changeDirection.call(this, div);
}
var moveUpLeft = function(div) {
this.X = this.X - 3;
this.Y = this.Y - 3;
$(div).css({
"left" : this.X,
"top" : this.Y
});
};
var moveUpRight = function(div) {
this.X = this.X + 3;
this.Y = this.Y - 3;
$(div).css({
"left" : this.X,
"top" : this.Y
});
};
var moveDownLeft = function(div) {
this.X = this.X - 3;
this.Y = this.Y + 3;
$(div).css({
"left" : this.X,
"top" : this.Y
});
};
var moveDownRight = function(div) {
this.X = this.X + 3;
this.Y = this.Y + 3;
$(div).css({
"left" : this.X,
"top" : this.Y
});
};
var gameOver = function() {
alert("GAME OVER!");
clearInterval(this.time);
};
return {
initBall : initBall
};
}();
var Bat = function() {
};
//球拍的类,用作父类
Bat.prototype = function() {
var initBat = function() {
var batdiv = document.createElement('div');
$(batdiv).css({
"position" : "absolute",
"left" : this.X + "px",
"top" : this.Y + "px",
"width" : this.style.width,
"height" : this.style.height,
"background-color" : this.style.color
});
batdiv = bindMove.call(this, batdiv);
$('body').append(batdiv);
};
var bindMove = function(div) {
$('body').keydown($.proxy(function(e) {
//得到键盘对应的字母
var realkey = String.fromCharCode(e.which);
switch (realkey) {
case this.control.toleft :
moveLeft.call(this, div);
break;
case this.control.toright :
moveRight.call(this, div);
break;
};
}, this));
return div;
};
var moveLeft = function(div) {
if(this.X > 10) {
this.X = this.X - 3;
$(div).css("left", this.X + "px");
}
};
var moveRight = function(div) {
if (this.X < 728) {
this.X = this.X + 3;
$(div).css("left", this.X + "px");
}
};
var getBatPosition = function() {
return {
X_head : this.X,
X_tail : this.X + 80,
Y : this.Y
};
};
return {
initBat : initBat,
getBatPosition : getBatPosition
};
}();
var BlackBat = function(x) {
this.X = x;
this.Y = 400;
this.style = {
width : "80px",
height : "5px",
color : "#000"
};
this.control = {
toleft : 'A',
toright : 'D'
};
}
//继承父类Bat
BlackBat.prototype = new Bat();
var GreenBat = function(x) {
this.X = x;
this.Y = 10;
this.style = {
width : "80px",
height : "5px",
color : "#0EE"
};
this.control = {
toleft : 'J',
toright : 'L'
};
}
GreenBat.prototype = new Bat();
//实现
var blackBat = new BlackBat(300);
blackBat.initBat();
var greenBat = new GreenBat(300);
greenBat.initBat();
var ball = new Ball(50, 50);
ball.initBall();
});
好文章!666,学习了