javascript的继承,一个简单的乒乓球游戏

$(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();
});

1 Reply to “javascript的继承,一个简单的乒乓球游戏”

发表评论