js之打砖块小游戏

最新推荐文章于 2022-02-27 20:18:43 发布

什么什么什么？

最新推荐文章于 2022-02-27 20:18:43 发布

阅读量183

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44748107/article/details/105097115

版权

<!DOCTYPE htm
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}


			#box {
				width: 600px;
				height: 600px;
				border: 1px solid black;
				position: relative;
				margin: 0 auto;
				background: url("./image/bg.jpg");
			}

			#board {
				width: 100px;
				height: 10px;
				background-color: lightgreen;
				border-radius: 2px;
				position: absolute;
				bottom: 0;
				left: 250px;
				opacity: 0.8;
			}

			#mark {
				color: black;
				position: absolute;
				left: 0;
				top: 0;
			}

			#ball {
				background-color: red;
				position: absolute;
				width: 20px;
				height: 20px;
				border-radius: 50%;
				left: 290px;
				bottom: 10px;
				opacity: 0.8;
			}

			#end {
				width: 100px;
				height: 100px;
				background-color: #90EE90;
				border-radius: 50%;
				color: #FF0000;
				text-align: center;
				line-height: 100px;
				position: absolute;
				left: 250px;
				top: 200px;
				display: none;
				font-size: 20px;
			}
			button {width: 100px; height: 20px; background-color: #90EE90; position: absolute;  left: 250px; top: 250px;}
		</style>
		<script>
			window.onload = function() {
				creatBrick(69);
				var but = document.querySelector('Button');
				but.onclick = function() {
					slibboard();
					ballmove();
					but.style.display = 'none';
					
				}
			}

			function $(id) {
				return document.getElementById(id);
			}

			function creatBrick(n){
				var ul = $('block');
				var index = 0;

				for (var i = 0; i <= n; i++) {
					var li = document.createElement("li");
					var r = Math.round(Math.random() * 255);
					var b = Math.round(Math.random() * 255);
					var g = Math.round(Math.random() * 255);

					li.style.position = "absolute";
					li.style.listStyle = "none";
					li.style.width = 60 + 'px';
					li.style.height = 20 + 'px';
					// li.style.display = "block";
					if (i % 10 == 0) {
						index = 0;
					}
					li.style.left = index * 60 + 'px';
					li.style.top = Math.floor(i / 10) * 20 + 'px';
					li.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
					// li.style.backgroundColor = "red";
					li.style.opacity = 0.8;
					index++;
					ul.appendChild(li);
					// console.log(ul.innerHTML);
				}
			}

			//木板滑动
			function slibboard() {
				var board = $('board');
				var box = $('box');


				document.onkeydown = function(e) {
					var e = e || window.event;
					var site = board.offsetLeft;
					// var site1 = parseInt(e.clientX);
					// console.log(board.onmouseover);
					if (e.keyCode == 37) {
						// console.log('ok');
						// console.log(board.offsetLeft);
						board.style.left = site - 20 + 'px';
						// console.log(board.offsetLeft);
						if (site <= 0) {
							board.style.left = 0;
						}
					}

					if (e.keyCode == 39) {
						board.style.left = site + 20 + 'px';
						if (site >= 500) {
							board.style.left = 500 + 'px';
						}
					}




				}
			}

			//小球运动
			function ballmove(timer) {
				var speedX = 3;
				var speedY = 2;
				var mark = 0;

				var ball = $('ball');
				var board = $('board');
				var ul = $('block');
				var lis = ul.getElementsByTagName('li');
				var end = $('end');
				var Mark = $('mark');
				var timer = null;
				var but = document.querySelector('Button');
				
	timer = setInterval(function() {
			// console.log(ball.offsetLeft, ball.offsetTop);
	
			var ballL = ball.offsetLeft;
			var ballT = ball.offsetTop;
			if (ballL <= 0 || ballL >= 580) {
				speedX = -speedX;
			}
			if (ballT <= 0) {
				speedY = -speedY;
				// speedX = speedX - 1;
			}
			if (ballT >= 580) //游戏结束
			{
				clearInterval(timer);
				end.style.display = 'block';
				setTimeout(function(){ location.reload();},3000);
				
			}
			if (ballL - board.offsetLeft >= -20 && ballL - board.offsetLeft <= 40 && ballT - board.offsetTop >= -20 ) {
				if (speedX > 0) {
					speedX = -speedX;
					speedY = -speedY;
				} else {
					speedY = -speedY;
				}
	
			} else if (ballL - board.offsetLeft > 40 && ballL - board.offsetLeft <= 100 && ballT - board.offsetTop >= -20) {
				if (speedX < 0) {
					speedX = -speedX;
					speedY = -speedY;
				} else {
					speedY = -speedY;
				}
			}
			for (var i = 0; i < lis.length; i++) {
				// console.log(ballL - lis[i].offsetLeft);
				if (ballL - lis[i].offsetLeft >= -20 && ballL - lis[i].offsetLeft <= 60 && ballT - lis[i].offsetTop >= -20 &&
					ballT - lis[i].offsetTop <= 20) {
	
					// ul.removeChild(lis[i]);
					lis[i].remove();
					mark++;
	
					Mark.innerHTML = '得分： ' + mark;
					speedX = -speedX;
					speedY = -speedY;
					continue;
				}
			}
	
			ball.style.left = ballL + speedX + 'px';
			ball.style.top = ballT + speedY + 'px';
		}, 30);
		
		
	}
				
		</script>
	</head>
	<body>
		<div id="box">
			<ul id="block"></ul>
			<div id="board"></div>
			<div id="ball"></div>
			<div id="mark">
				<p>得分： 0</p>
			</div>
			<div id="end">游戏结束</div>
			<button>开始游戏</button>
		</div>
	</body>
</html>