js打砖块游戏

2017-09-13 20:38:07来源:CSDN作者:qq_39585562人点击

分享

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);	}}




最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台