首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS打砖块,童年的回忆

JS打砖块,童年的回忆

作者头像
我不是费圆
发布2020-09-21 16:45:07
1.2K0
发布2020-09-21 16:45:07
举报
文章被收录于专栏:鲸鱼动画鲸鱼动画

打砖块 —— 敲碎屏幕奖励一百块

睿智的程序员,你有想过自己写一个H5小游戏吗? 打砖块大家都不陌生吧,写一个给孩子玩吧!

在这里插入图片描述
在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width:800px;
				height: 600px;
				margin:0 auto;
				background-color:#999;
				overflow: hidden;
			}
			#game{
				width:550px;
				height: 500px;
				margin:20px auto;
				background-color:#f1f1f1;
				position: relative;
			}
			.btn{
				width:500px;
				margin: 0 auto;
			}
			.btn button{
				width:150px;
				height: 40px;
				font-size:18px;
			}
			.brick{
				width:50px;
				height: 20px;
				/*background-color:#f00;*/
				position: absolute;
			}
			#ball{
				width:20px;
				height: 20px;
				background-color:#0f0;
				border-radius: 50%;
				position: absolute;
				bottom:10px;
				left: 0;
				box-shadow: 2px 2px 9px #ccc;
			}
			#guard{
				width:100px;
				height: 10px;
				background-color:palevioletred;
				position: absolute;
				left: 0;
				bottom: 0;
				border-radius: 6px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div id="game"> <!--游戏区域-->
				<!--<div class="brick"></div>  <!-- 砖块 -->
				<!--<div id="ball"></div>  <!--小球-->
				<!--<div id="guard"></div>  <!--挡板-->
			</div>
			<div class="btn">
				<button id="start">开始游戏</button>
				<button id="reset">重置游戏</button>
			</div>
		</div>
	</body>
	<script>
		var gm = document.getElementById("game");//获取游戏区域
		var cols = 11;//排11列砖块
		var rows = 5;//排5行砖块
		var brick,bl,gd;//砖块,小球 挡板
		var b_width = 50;//砖块的宽度
		var b_height = 20;//砖块的高度
		var st = document.getElementById("start");
		var rt = document.getElementById("reset");
		var timer;
		var bricks = [];//盛放砖块的数组
		var speedX = 5;//小球的水平速度
		var speedY = -5;//小球的垂直速度
//		(function(){
//			
//		})();
		//游戏的初始化
		var init = function(){
			for(var i = 0;i < rows;i++){ //行
				for(var j = 0;j < cols;j++){ //列
					brick = document.createElement("div");
					brick.className = "brick";
					brick.style.left = j * b_width + "px";//设置每一个砖块的left值
					brick.style.top = i * b_height + "px";//设置每一个砖块的top值
					brick.style.backgroundColor = bgColor();
					bricks.push(brick);//把创建的砖块添加到一个数组里
					gm.appendChild(brick);
				}
			}
			bl = document.createElement("div");//创建小球
			bl.id = "ball";
			gm.appendChild(bl);
			gd = document.createElement("div");//创建挡板
			gd.id = "guard";
			gm.appendChild(gd);
		}
		init();
		//随机颜色
		function bgColor(){
			var r = Math.floor(Math.random() * 256);//0-255
			var g = Math.floor(Math.random() * 256);//0-255
			var b = Math.floor(Math.random() * 256);//0-255
			return "rgb(" + r + "," + g + "," + b + ")";
		}
		
		//点击开始游戏
		st.onclick = function(){
			
			keyFlow();//键盘移动
			ballMove();
			st.onclick = null;
		}
		//小球运动
		var ballMove = function(){
			timer = setInterval(function(){
				var lf = bl.offsetLeft + speedX;
				var tp = bl.offsetTop + speedY;
				
				//球碰撞 砖块消失 球回来
				for(var k = 0;k < bricks.length;k++){
					var bs = bricks[k];
					if(
						bs.offsetLeft <= (bl.offsetLeft + bl.offsetWidth/2)
						&& (bs.offsetLeft + bs.offsetWidth) >= (bl.offsetLeft + bl.offsetWidth/2)
						&& (bs.offsetTop + bs.offsetHeight) >= bl.offsetTop
					){
						bs.style.display = "none";
						speedY = 5;
					}
				}
				if(lf < 0){  //左边界
					speedX = 5;
				}else if(lf > gm.offsetWidth - bl.offsetWidth){  //右边界
					speedX = -5;
				}
				
				if(tp < 0){ //上边界
					speedY = 5;
				}else if(
					(bl.offsetLeft + bl.offsetWidth/2) >= gd.offsetLeft
					&& (bl.offsetLeft + bl.offsetWidth/2) <= (gd.offsetLeft + gd.offsetWidth)
					&& (bl.offsetTop + bl.offsetHeight) >= gd.offsetTop
				){
					speedY = -5;
				}else if(tp >= gm.offsetHeight - bl.offsetHeight){
					gameOver();
				}
				
				bl.style.left = lf + "px";
				bl.style.top = tp + "px";
			},20);
		}
		//游戏结束
		function gameOver(){
			clearInterval(timer);
//			alert("游戏结束");
		}
		//左右键  挡板运动
		function keyFlow(){
			document.onkeydown = function(ev){
				var e = ev || window.event;
//				keyCode //键码
//				alert(ev.keyCode)
				if(e.keyCode == 37){   //按左键
					var lf = gd.offsetLeft - 30;
					if(lf < 0){  //挡板左边界判断
						lf = 0;
					}
					gd.style.left = lf + "px";
				}else if(e.keyCode == 39){  //按右键
					var lf = gd.offsetLeft + 30;//挡板右边界判断
					if(lf > gm.offsetWidth - gd.offsetWidth){
						lf = gm.offsetWidth - gd.offsetWidth;
					}
					gd.style.left = lf + "px";
				}
			}
		}
		
		//重置游戏
		rt.onclick = function(){
			window.location.reload();
		}
	</script>
</html>

本文主题部分都已添加了注释,可自行修改游戏

修改前记得备份

在这里悄悄放一个破解版,送给有缘人。

在这里插入图片描述
在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width:800px;
				height: 700px;
				margin:0 auto;
				background-color:#999;
				overflow: hidden;
			}
			#game{
				width:550px;
				height: 600px;
				margin:20px auto;
				background-color:#f1f1f1;
				position: relative;
			}
			.btn{
				width:500px;
				margin: 0 auto;
			}
			.btn button{
				width:150px;
				height: 40px;
				font-size:18px;
			}
			.brick{
				width:50px;
				height: 20px;
				/*background-color:#f00;*/
				position: absolute;
			}
			#ball{
				width:200px;
				height: 200px;
				background-color:#0f0;
				border-radius: 50%;
				position: absolute;
				bottom:10px;
				left: 0;
				box-shadow: 2px 2px 9px #ccc;
			}
			#guard{
				width:450px;
				height: 10px;
				background-color:palevioletred;
				position: absolute;
				left: 0;
				bottom: 0;
				border-radius: 6px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div id="game"> <!--游戏区域-->
				<!--<div class="brick"></div>  <!-- 砖块 -->
				<!--<div id="ball"></div>  <!--小球-->
				<!--<div id="guard"></div>  <!--挡板-->
			</div>
			<div class="btn">
				<button id="start">开始游戏</button>
				<button id="reset">重置游戏</button>
			</div>
		</div>
	</body>
	<script>
		var gm = document.getElementById("game");//获取游戏区域
		var cols = 11;//排11列砖块
		var rows = 9;//排5行砖块
		var brick,bl,gd;//砖块,小球 挡板
		var b_width = 50;//砖块的宽度
		var b_height = 20;//砖块的高度
		var st = document.getElementById("start");
		var rt = document.getElementById("reset");
		var timer;
		var bricks = [];//盛放砖块的数组
		var speedX = 5;//小球的水平速度
		var speedY = -5;//小球的垂直速度
//		(function(){
//			
//		})();
		//游戏的初始化
		var init = function(){
			for(var i = 0;i < rows;i++){ //行
				for(var j = 0;j < cols;j++){ //列
					brick = document.createElement("div");
					brick.className = "brick";
					brick.style.left = j * b_width + "px";//设置每一个砖块的left值
					brick.style.top = i * b_height + "px";//设置每一个砖块的top值
					brick.style.backgroundColor = bgColor();
					bricks.push(brick);//把创建的砖块添加到一个数组里
					gm.appendChild(brick);
				}
			}
			bl = document.createElement("div");//创建小球
			bl.id = "ball";
			gm.appendChild(bl);
			gd = document.createElement("div");//创建挡板
			gd.id = "guard";
			gm.appendChild(gd);
		}
		init();
		//随机颜色
		function bgColor(){
			var r = Math.floor(Math.random() * 256);//0-255
			var g = Math.floor(Math.random() * 256);//0-255
			var b = Math.floor(Math.random() * 256);//0-255
			return "rgb(" + r + "," + g + "," + b + ")";
		}
		
		//点击开始游戏
		st.onclick = function(){
			
			keyFlow();//键盘移动
			ballMove();
			st.onclick = null;
		}
		//小球运动
		var ballMove = function(){
			timer = setInterval(function(){
				var lf = bl.offsetLeft + speedX;
				var tp = bl.offsetTop + speedY;
				
				//球碰撞 砖块消失 球回来
				for(var k = 0;k < bricks.length;k++){
					var bs = bricks[k];
					if(
						bs.offsetLeft <= (bl.offsetLeft + bl.offsetWidth/2)
						&& (bs.offsetLeft + bs.offsetWidth) >= (bl.offsetLeft + bl.offsetWidth/2)
						&& (bs.offsetTop + bs.offsetHeight) >= bl.offsetTop
					){
						bs.style.display = "none";
						speedY = 5;
					}
				}
				if(lf < 0){  //左边界
					speedX = 5;
				}else if(lf > gm.offsetWidth - bl.offsetWidth){  //右边界
					speedX = -5;
				}
				
				if(tp < 0){ //上边界
					speedY = 5;
				}else if(
					(bl.offsetLeft + bl.offsetWidth/2) >= gd.offsetLeft
					&& (bl.offsetLeft + bl.offsetWidth/2) <= (gd.offsetLeft + gd.offsetWidth)
					&& (bl.offsetTop + bl.offsetHeight) >= gd.offsetTop
				){
					speedY = -5;
				}else if(tp >= gm.offsetHeight - bl.offsetHeight){
					gameOver();
				}
				
				bl.style.left = lf + "px";
				bl.style.top = tp + "px";
			},0);
		}
		//游戏结束
		function gameOver(){
			clearInterval(timer);
//			alert("游戏结束");
		}
		//左右键  挡板运动
		function keyFlow(){
			document.onkeydown = function(ev){
				var e = ev || window.event;
//				keyCode //键码
//				alert(ev.keyCode)
				if(e.keyCode == 37){   //按左键
					var lf = gd.offsetLeft - 30;
					if(lf < 0){  //挡板左边界判断
						lf = 0;
					}
					gd.style.left = lf + "px";
				}else if(e.keyCode == 39){  //按右键
					var lf = gd.offsetLeft + 30;//挡板右边界判断
					if(lf > gm.offsetWidth - gd.offsetWidth){
						lf = gm.offsetWidth - gd.offsetWidth;
					}
					gd.style.left = lf + "px";
				}
			}
		}
		
		//重置游戏
		rt.onclick = function(){
			window.location.reload();
		}
	</script>
</html>

如果游戏难度让你略微不爽,那就复制上面这串代码,体验一把无敌是多么寂寞!

博主不求大家关注,只求能够稍稍浏览一下别的贴子,相信不会让你失望的,你的每一个赞,每一句鼓励,都将成为我源源不断的活力,都是我快乐的点滴。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-08-25 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档