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

Liang_Sir_

于 2020-03-18 10:46:37 发布

阅读量176

点赞数 1

分类专栏： html5 js 文章标签： javascript css html

本文链接：https://blog.csdn.net/LIanG_SiR_/article/details/104939474

版权

html5 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

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>

Liang_Sir_

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
js游戏与运动开发,打砖块全部代码实现

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <style> #box{ height:600px; width:600px; border:1px solid...
复制链接

扫一扫

专栏目录