JS实现打砖块简单小游戏

最新推荐文章于 2023-11-26 17:37:18 发布

木塚_MZ

最新推荐文章于 2023-11-26 17:37:18 发布

阅读量361

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46514047/article/details/120119528

版权

运行效果：

代码如下：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>打砖块</title>
        <style>
			#div1{
				width: 600px;
				height: 600px;
				border: 1px solid black;
				position: relative;
				margin: 100px auto;
				position: relative;
				display: none;
			}
			#div2{
			 	width: 600px;
				height: 600px;
			 	border: 1px solid black;
			 	margin: 100px auto;
			 	position: relative;
			 	display: block;
			 	background-image: url(images/001.jpg);
			 	background-size: contain;
			 }
        	#div2 #title{
        		font-size: 100px;
        		margin: 50px;
        	}
        	#div2 #btn{
        		width: 200px;
        		height: 40px;
        		font-size: 25px;
        		position: absolute;
        		left: 200px;
        		top: 500px;
        	}
			#ball{
				width: 20px;
				height: 20px;
				background-color: red;
				border-radius: 50%;
				position: absolute;
				bottom: 30px;
				left: 290px;
			}
			#bat{
				width: 100px;
				height: 30px;
				background-color: blue;
				border-radius: 5%;
				position: absolute;
				bottom: 0px;
				left: 250px;
			}
			#brick div{
				width: 98px;
				height: 18px;
				border: 1px solid black;
				float: left;
			}
						
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oDiv1 = document.getElementById("div1");
				var oBall = document.getElementById("ball");	
				var oBat = document.getElementById("bat");
				var oBrick = document.getElementById("brick");
				var aBricks = oBrick.getElementsByTagName("div");
				var oDiv2 = document.getElementById("div2");
	            var btn = document.getElementById("btn");
	            var title = document.getElementById("title");
				
	            btn.onclick = function(){
	                oDiv2.style.display = "none";
	                oDiv1.style.display = "block";
	                ballMove(); //调用小球移动函数里面包含小球的碰撞检测
	                dragX(oBat);
	                createBrick(60);   
	            }
				
				function ballMove(){
					//让小球可以水平方向移动，随机一个水平方向的速度(3-6)
					var speedX = parseInt(Math.random() * 4) + 3;
					//让小球可以垂直方向移动，随机一个水平方向的速度(5-7)
					var speedY = -(parseInt(Math.random() * 3) + 5);
					
					setInterval(function(){
						oBall.style.left = oBall.offsetLeft + speedX + "px";
						oBall.style.top = oBall.offsetTop + speedY + "px";
						//使小球在div1内运动
						if(oBall.offsetLeft >= 579 || oBall.offsetLeft <= 1){
							speedX *= -1;

						}
						if(oBall.offsetTop <= 0){
							speedY *= -1;
						}
						//小球碰到底部结束游戏
						if(oBall.offsetTop >= 580){
							setTimeout(function(){
	                            window.location.reload();
	                            alert("游戏结束");
	                            oDiv2.style.display = "block";
	                            oDiv1.style.display = "none";    
	                        },100)

						}

						//进行碰撞
						//1.小球和滑块检测
						if(konck(oBall, oBat)){
							//改变小球的方向
							speedY *= -1;
						}
						//2.小球和砖块发生碰撞
						for(var i=0; i<aBricks.length; i++){
							if(konck(aBricks[i], oBall)){
								speedY *= -1;
								//砖块被销毁
								oBrick.removeChild(aBricks[i]);
								if(aBricks.length == 0){		                                
	                                window.location.reload();
	                                alert("恭喜你，游戏通关啦~~~");
	                            }
								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;
					
					}
				}	
				window.onkeydown = function(ev){
					var e = event || window.event;
					var which = e.which || e.keyCode;//获取键盘时间
					//键盘速度
					var speed = 50;
					switch(which){
						case 37://左
							if(node.offsetLeft <= 0){//左边界
								node.style.left = 0 +"px";
							}else{
								node.style.left = node.offsetLeft - speed + 'px';
							}
							// console.log(node.offsetLeft);
							break;
						case 39://右
							if(node.offsetLeft >= 500){//右边界
								node.style.left = 500 +"px";
							}else{
								node.style.left = node.offsetLeft + speed + 'px';
							}
							// console.log(node.offsetLeft);
							break;
						default:
							break;       
					}
				}
				window.onkeyup = function(){
					document.onkeydown = null;
				}          
			}
	
			//创建滑块 
			// 文档流的转换
			// 相对定位 转 绝对定位			
			function createBrick(n){
				var oBrick = document.getElementById("brick");				
				for(var i=0; i<n; i++){
					var node = document.createElement("div");
					node.style.backgroundColor = randomColor();
					oBrick.appendChild(node);
				}
				
				var aBricks = oBrick.getElementsByTagName("div");
				for(var i=0; i<aBricks.length; i++){
					aBricks[i].style.left = aBricks[i].offsetLeft + "px";
					aBricks[i].style.top = aBricks[i].offsetTop + "px";
				}
				for(var i=0; i<aBricks.length; i++){
					aBricks[i].style.position = "absolute";
				}
			}
			
			//随机颜色 
			function randomColor(){
				var str = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
				return str;
				
			}
			
			//检测碰撞	
			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>
	</head>
	<body>
		<div id="div2">
	        <div id="title">打砖块游戏</div>
	        <button id="btn">开始游戏</button>
    	</div>
    	<div id="div1">
        	<div id="ball"></div>
            <div id="bat"></div>
            <div id="brick">
				<!-- <div></div>
                <div></div> -->
            </div>
        </div>
    
	</body>
</html>

参考链接：

用原生js编写一个简单的打砖块游戏