js打砖块游戏

最新推荐文章于 2024-05-23 09:52:31 发布

蒲小若

最新推荐文章于 2024-05-23 09:52:31 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/qq_39585562/article/details/77967914

版权

前端开发经验总结录专栏收录该内容

40 篇文章 1 订阅

订阅专栏

html+css部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>打砖块</title>
		<link rel="stylesheet" type="text/css" href="css/break.css"/>
		<script type="text/javascript" src="js/break.js"></script>
			
		
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.content{
				position: relative;
				width: 800px;
				height: 600px;
				background-color: #999;
				margin: 0 auto;
				overflow: hidden;
			}
			.game{
				position: relative;
				width: 550px;
				height: 500px;
				background-color: pink;
				margin: 20px auto 0;
			}
			.brick{
				position: absolute;
				width: 50px;
				height: 20px;
				background-color: blueviolet;
			}
			.flap{
				position: absolute;
				width: 120px;
				height: 30px;
				bottom: 0;
				left: 0;
				background-color: blue;
			}
			.ball{
				position: absolute;
				width: 30px;
				height: 30px;
				bottom: 30px;
				left: 0;
				border-radius: 50%;
				background-color: greenyellow;
			}
			.btn{
				position: absolute;
				width: 550px;
				height: 50px;
				bottom: 0;
				left: 125px;
			}
			.btn button{
				width: 120px;
				height: 40px;
			}
			#score{
				position: absolute;
				width: 80px;
				height: 30px;
				right: 0;
				top: 10%;
				background-color: #fff;
				/*border: 1px solid red;*/
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="game">
				<!--<div class="brick"></div>-->
				<!--<div class="flap"></div>
				<div class="ball"></div>-->
			</div>
			<div class="btn">
				<button id="start">开始</button>
				<button id="reset">重置</button>
			</div>
			<div id="score">
				
			</div>
		</div>
	</body>
</html>

js部分

window.onload = init;

function init(){
	var gameArea = document.getElementsByClassName("game")[0];
	var rows = 5;
	var cols = 11;
	var b_width = 50;
	var b_height = 20;
	var bricks = [];
	var speedX = 5;
	var speedY = -5;
	var interId = null;
	var lf = 0;
	var tp = 0;
	var flap
	var ball;
	var n = 0;
	
	var st = document.getElementById("start");
	var rt = document.getElementById("reset");
	var score = document.getElementById("score");
	score.innerHTML = "得分:" + n;
	
	renderDom();
	bindDom();

	function renderDom(){
		getBrick();
		//得到五彩砖块
		function getBrick(){
			for (var i = 0; i < rows; i++) {
				var tp = i * b_height;
				var brick = null;
				for (var j = 0; j < cols; j++) {
					var lf = j * b_width;
					brick = document.createElement("div");
					brick.className = "brick";
					brick.setAttribute("style","top:" + tp + "px;left:" + lf + "px;");
					brick.style.backgroundColor = getColor();
					bricks.push(brick);
					gameArea.appendChild(brick);
				}
			}
		}
		
		//添加挡板
		var flap = document.createElement("div");
		flap.className = "flap";
		gameArea.appendChild(flap);
		//添加挡板小球
		var ball = document.createElement("div");
		ball.className = "ball";
		gameArea.appendChild(ball);
	}
	
	function bindDom(){
		flap = document.getElementsByClassName("flap")[0];
		
		window.onkeydown = function(e){
			var ev = e || window.event;
			var lf = null;
			if (e.keyCode == 37) {  //左键往左走
				lf = flap.offsetLeft - 10;
				if (lf < 0) {   
					lf = 0;
				}
				flap.style.left = lf + "px";
				
			}else if (e.keyCode == 39) { //右键往右走
				lf = flap.offsetLeft + 10;
				if (lf >= gameArea.offsetWidth - flap.offsetWidth) {
					lf = gameArea.offsetWidth - flap.offsetWidth
				}
				flap.style.left = lf + "px";
			}
		}
		
		st.onclick = function(){
			ballMove();
			st.onclick = null;
		}
		
		rt.onclick = function(){
			window.location.reload();
		}
		
	}
	
	//得到砖块的随即颜色
	function getColor(){
		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 ballMove(){
		ball = document.getElementsByClassName("ball")[0];
		
		interId = setInterval(function(){
			lf = ball.offsetLeft + speedX;
			tp = ball.offsetTop + speedY;
			//实现砖块消失的效果
			for (var i = 0; i < bricks.length; i++) {
				var bk = bricks[i];
				if ((lf + ball.offsetWidth/2) >= bk.offsetLeft
					&& (lf + ball.offsetWidth/2) <= (bk.offsetLeft + bk.offsetWidth)
					&& (bk.offsetTop + bk.offsetHeight) >= ball.offsetTop
				) {
					bk.style.display = "none";
					speedY = 5;
					n++;
					score.innerHTML = "得分:"+n;
				}
			}
			
			if (lf < 0) {
				speedX = -speedX;
			}
			if (lf >= (gameArea.offsetWidth - ball.offsetWidth)){ 
				speedX = -speedX;
			}
			if (tp <= 0) {
				speedY = 5;
			}else if((ball.offsetTop + ball.offsetHeight) >= flap.offsetTop
					&& (ball.offsetLeft + ball.offsetWidth/2) >= flap.offsetLeft
					&& (ball.offsetLeft + ball.offsetWidth/2)  <= (flap.offsetLeft + flap.offsetWidth)
			){
				speedY = -5;
			}else if(ball.offsetTop  >= flap.offsetTop){
				gameOver();
			}
			ball.style.left = lf + 'px';
			ball.style.top = tp + "px";
		},20)
	}
	
	//判断游戏是否结束
	function gameOver(){
		alert("game over" + "\n" + "您的得分是" + score.innerHTML);
		clearInterval(interId);
	}

}

蒲小若

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
js打砖块游戏

html+css部分打砖块 *{ padding: 0; margin: 0; } .content{ position: relative; width: 800px; height: 600px; background-color: #999; margin: 0 a
复制链接

扫一扫

专栏目录