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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值