js游戏与运动开发,打砖块全部代码实现

1 篇文章 0 订阅
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		#box{
			height:600px;
			width:600px;
			border:1px solid #ccc;
			margin:0 auto;
			position:relative;
		}
		#ball{
			width:20px;
			height:20px;
			border:1px solid #ccc;
			border-radius:50%;
			background:red;
			position:absolute;
			bottom:30px;
			left:300px;
		}
		#bat{
			width:100px;
			height:20px;
			background:hotpink;
			position:absolute;
			bottom:0;
			left:250px;
		}
		#brick div{
			width:98px;
			height:18px;
			border:1px solid #ccc;
			float:left
		}
	</style>
	<body>
		<div id="box">
			<div id="ball"></div>
			<div id="bat"></div>
			<div id="brick"></div>
		</div>
	</body>
	<script type="text/javascript">
		window.onload = function(){
			var oBox = document.getElementById("box");
			var oBall = document.getElementById("ball");
			var oBat = document.getElementById("bat");
			var oBrick = document.getElementById("brick")
			var oBricks = oBrick.getElementsByTagName("div")
			dragX(oBat)
			createBrick(60);
			// 小球运动的随机速度
			var speedx = parseInt(Math.random() * 4) + 3;
			var speedy = -(parseInt(Math.random() * 3) + 5);
			
			setInterval(function Fn(){
				oBall.style.left = oBall.offsetLeft + speedx + "px";
				oBall.style.top = oBall.offsetTop + speedy + "px";
				if(oBall.offsetLeft >= 580 || oBall.offsetLeft<= 0){
					speedx *= -1;
				}
				if( oBall.offsetTop<= 0){
					speedy *= -1;
				}
				if(oBall.offsetTop >= 580){
					alert("GAME OVER")
					window.location.reload()
				}
				
				// 在此发生碰撞,小球与拍子发生碰撞
				if(Konck(oBall,oBat)){
					speedy *= -1;
				}
				// 小球与砖发生碰撞
				for(var i = 0;i<oBricks.length;i++){
					if(Konck(oBricks[i],oBall)){
						speedy *= -1;
						oBrick.removeChild(oBricks[i]);
						break;
					}
				}
				
				
			},30);
			function dragX(node){
				node.onmousedown = function(ev){
					var e = ev || window.event
					var offsetX = e.clientX - node.offsetLeft
				
				document.onmousemove = function(ev){
					var e = ev || window.event;
					var l = e.clientX - offsetX;
					if(l<=0){
						l = 0
					}
					if(l>=500){
						l = 500
					}
					node.style.left = l + "px"
				}
				document.onmouseup = function(){
					document.onmousemove = null
				}
			}
			}
			function createBrick(n){
				var oBrick = document.getElementById("brick")
				for(var i = 0; i<n;i++){
					var node = document.createElement("div")	
					node.style.background = RndomColor()
					oBrick.appendChild(node);
				}
				var oBricks = oBrick.getElementsByTagName("div")
				for(var i = 0;i<oBricks.length;i++){
					oBricks[i].style.left = oBricks[i].offsetLeft + "px";
					oBricks[i].style.top = oBricks[i].offsetTop + "px"
				}
				for(var i = 0;i<oBricks.length;i++){
					oBricks[i].style.position = "absolute"
				}
			}
			function RndomColor(){
				 var r = Math.floor(Math.random()*256);
				 var g = Math.floor(Math.random()*256);
				 var b = Math.floor(Math.random()*256);
				 return "rgb("+r+","+g+","+b+")";
			}
			function Konck(node1,node2){
				var l1 = node1.offsetLeft;
				var r1 = node1.offsetLeft + node1.offsetWidth;
				var t1 = node1.offsetTop;
				var b1 = node1.offsetTop + node1.offsetHeight;
				
				var l2 = node2.offsetLeft;
				var r2 = node2.offsetLeft + node2.offsetWidth;
				var t2 = node2.offsetTop;
				var b2 = node2.offsetTop + node2.offsetHeight; 
				if(l2>r1 || r2 < l1 || t2 > b1 || b2 < t1){
					return false;
				}else{
					return true;
				}
			}
		}
	</script>
</html>

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值