js打砖块（更正网上流传的bug版本）

网上流传版本的球与砖块碰撞bug图
因球与砖块的位置关系写错，只考虑小球与砖块下面碰撞的情况，因此出错

更改后代码

增加了小球与砖块其他三面碰撞的情况

<script>
function $(id){
	return document.getElementById(id);
}
function rand(min,max){
	return Math.floor(Math.random()*(max-min+1))+min;
}
function BlockBreak(){
	this.box = $("box");//打砖块的容器
	this.list = document.getElementsByTagName("li");//砖块
	this.board = $("board");//挡板
	this.ball = $("ball");//球
	this.fx = 1;//球x方向速度
	this.fy = -1;//球y方向速度
	this.leftInit = 0;//砖块left初始值
	this.rightInit = 0;//砖块right初始值
}
	//初始化功能，砖块位置
	BlockBreak.prototype.init = function(){
		for(var i = 0;i<this.list.length;i++){
			this.list[i].style.backgroundColor = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
			var x = this.leftInit * this.list[0].offsetWidth;
			var y = this.topInit;
			this.list[i].style.left = x + "px";
			this.list[i].style.top = y + "px";
			this.leftInit++;
			//换行
			if((i+1)%10 == 0){
				this.leftInit = 0;
				this.topInit += this.list[0].offsetHeight;
			}
		}
	}
	//挡板运动
	BlockBreak.prototype.keydown = function(){
		var that = this;
		document.onkeydown = function(e){
		var e=e || event;
		if(e.keyCode=37){
		   that.board.style.left = that.board.offsetLeft - 15+"px";
			if(that.board.style.left <= 0){
			   that.board.style.left = 0;
			   }
		   }
			if(e.keyCode=39){
		   that.board.style.left = that.board.offsetLeft + 15+"px";
			if(that.board.style.left >=(that.box.offsetWidth - that.board.offsetWidth)){
			   that.board.style.left = that.box.offsetWidth - that.board.offsetWidth+"px";
			   }
		   }
	  }
	}
	var times = 0;
	var score = 0;
	//小球运动
    BlockBreak.prototype.move = function(){
		var timer = null;
		timer = setInterval(function(){
			that.ball.style.left = that.ball.offsetLeft + that.fx + "px";
			that.ball.style.top = that.ball.offsetTop + that.fy + "px";
			
		},10)
		//小球4个方向的反弹
		if(that.ball.offsetTop<=0){
			that.fy*-1;
		}
		 if(that.ball.offsetLeft<=0){
         that.fx*=-1;
        }
        if(that.ball.offsetLeft>=(that.box.offsetWidth-that.ball.offsetWidth)){
        that.fx*=-1;
		}
		if(that.ball.offsetTop >= (that.box.offsetHeight - that.ball.offsetHeight)){
			//游戏结束
		that.box.appendChild(document.createTextNode("Game Over"));
		clearInterval(timer);
		$("res").innerHTML = "游戏结束"	
		}
		//小球和挡板的反弹
		if(that.ball.offsetTop + that.ball.offsetHeight >= that.board.offsetTop){
		   if(that.ball.offsetLeft + that.ball.offsetWidth >= that.board.offsetLeft){
			if(that.board.offsetLeft + that.board.offsetWidth >= that.ball.offsetLeft){
			   that.fy*=-1;
			   times++;
			   $("times").innerHTML="挡板打球"+times+"次";
			   }
		}
		   }
		//小球和砖块的反弹
		//击中砖块，隐藏砖块
		for(var i = 0;i<that.list.length;i++){
			if(that.ball.offsetTop <= that.list[i].offsetTop + that.list[i].offsetHeight){
			   if(that.ball.offsetLeft + that.ball.offsetWidth >= that.list[i].offsetLeft){
				if(that.ball.offsetLeft <= that.board.offsetLeft+that.board.offsetWidth){
                that.fy*=-1;
                that.list[i].style.display = "none";
					score++;
					$("score").innerHTML="得分为:"+score;
				   }
			   }
			}
			if(that.ball.offsetTop + that.ball.offsetHeight >= that.list[i].offsetTop){
			   if(that.ball.offsetLeft + that.ball.offsetWidth >= that.list[i].offsetLeft){
				if(that.ball.offsetLeft <= that.board.offsetLeft + that.board.offsetWidth){
                that.fy*=-1;
                that.list[i].style.display = "none";
					score++;
					$("score").innerHTML="得分为:"+score;
				   }
			   }
			}
			if(that.ball.offsetLeft + that.ball.offsetWidth >= that.list[i].offsetLeft){
			   if(that.ball.offsetTop + that.ball.offsetHeight >= that.list[i].offsetTop){
				if(that.ball.offsetTop <= that.list[i].offsetTop + that.list[i].offsetHeight){
                that.fx*=-1;
                that.list[i].style.display = "none";
					score++;
					$("score").innerHTML="得分为:"+score;
				   }
			   }
			}
			if(that.ball.offsetLeft <= that.list[i].offsetWidth + that.list[i].offsetLeft){
			   if(that.ball.offsetTop + that.ball.offsetHeight >= that.list[i].offsetTop){
				if(that.ball.offsetTop <= that.list[i].offsetTop + that.list[i].offsetHeight){
                that.fx*=-1;
                that.list[i].style.display = "none";
					score++;
					$("score").innerHTML="得分为:"+score;
				   }
			   }
			}
		}
	}
	var bb = new BlockBreak();
	bb.keydown();
	bb.move();
</script>