弹砖块js

最新推荐文章于 2023-02-20 19:03:00 发布

江淼11

最新推荐文章于 2023-02-20 19:03:00 发布

阅读量213

点赞数

分类专栏： js 文章标签： html css javascript

本文链接：https://blog.csdn.net/m0_69422950/article/details/124831757

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

	<!DOCTYPE html>
	<html lang="zh-CN">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>弹砖块</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	list-style: none;
	}

	body {
	height: 100vh;
	background-color: deepskyblue;
	display: flex;
	justify-content: center;
	align-items: center;
	background-image: url(../../img/bg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	}

	.container {
	width: 600px;
	height: 360px;
	background-color: white;
	border-radius: 4px;
	position: relative;
	background-image: url(../../img/tu.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;

	}

	.container div {
	background-color: deepskyblue;
	}

	.container .zhuan {
	position: absolute;
	width: 50px;
	height: 10px;



	}

	.container .ball {
	position: absolute;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	}

	.container .ban {
	width: 60px;
	height: 8px;
	bottom: 10px;
	left: 270px;
	position: absolute;
	}
	</style>
	</head>

	<body>

	<div class="container">
	<div id="zhuan">
	<!-- 只有管理权限，没有定位权限 -->
	<!-- <div class="zhuan"></div> -->
	</div>
	<div class="ball"></div>
	<div class="ban"></div>
	</div>
	</body>
	<script>

	var dContainer = document.querySelector('.container');
	var dBall = document.querySelector('.ball');
	var dBan = document.querySelector('.ban');
	var dZhuan = document.getElementById('zhuan');
	var timer = null;
	var isLeft = false;
	var isRight = false;

	//添加砖
	function setZhuan() {
	for (var i = 0; i < 6; i++) {
	for (var j = 0; j < 10; j++) {

	var d = document.createElement("div");
	d.className = "zhuan";
	d.style.left = 25 + j * 56 + 'px';
	d.style.top = 30 + i * 15 + 'px';
	dZhuan.appendChild(d);

	}
	}
	}

	//设置小球
	function setBall() {
	dBall.style.left = dBan.offsetLeft + (dBan.offsetWidth - dBall.offsetWidth) / 2 + 'px';
	dBall.style.top = dBan.offsetTop - dBall.offsetHeight + 'px';
	dBall.sx = Math.random() > 0.5 ? rand(3, 8) : -1 * rand(3, 8);
	dBall.sy = -1 * rand(3, 8);
	}
	//小球运动
	function ballMove () {
	dBall.style.left = dBall.offsetLeft + dBall.sx + 'px';
	dBall.style.top = dBall.offsetTop + dBall.sy + 'px';
	dBall.style.backgroundColor = randColor();
	if (dBall.offsetLeft <=0 \|\| dBall.offsetLeft >= 588) {
	dBall.sx *= -1;

	}
	if (dBall.offsetTop <=0) {
	dBall.sy *= -1;
	}
	if (dBall.offsetTop >= 348) {
	//停止游戏
	clearInterval(timer);
	//去掉转
	dZhuan.innerHTML = "";
	//重新开始
	start();

	}
	}

	//挡板状态
	window.onkeydown = function (e) {
	if (e.keyCode === 37) {
	isLeft = true;
	}
	if (e.keyCode === 39) {
	isRight = true;
	}

	}
	window.onkeyup = function (e) {
	if (e.keyCode === 37) {
	isLeft = false;
	}
	if (e.keyCode === 39) {
	isRight = false;
	}
	}
	function banMove() {
	var left = dBan.offsetLeft;
	if (isLeft) { left -= 12 }
	if (isRight) { left += 12 }
	left = left < 0 ? 0 : left;
	left = left > 540 ? 540 : left;
	dBan.style.left = left + 'px';
	}
	//碰撞检测
	function check () {
	//1. ban与ball
	if(isCrash(dBall,dBan)) {
	dBall.style.top = dBan.offsetTop - dBall.offsetHeight + 'px';
	dBall.sy *= -1;

	}
	//2.ball与砖
	var zs = dZhuan.children;
	for (var i=0; i<zs.length; i++) {
	if(isCrash(zs[i],dBall)) {
	//小球继续运动
	dBall.sy *= -1;
	// 删除砖
	dZhuan.removeChild(zs[i]);
	i --;

	}
	}
	}


	//开始
	function start() {
	setZhuan();
	setBall();
	//开启计时器
	timer = setInterval(function () {
	// 1.挡板运动
	banMove();
	// 2.小球运动
	ballMove();
	// 3.碰撞检测
	check();


	}, 30)
	}
	start();




	//随机函数
	function rand(min, max) {
	return Math.round(Math.random() * (max - min) + min);
	}
	//碰撞检测
	function isCrash (a,b) {
	var l1 = a.offsetLeft;
	var t1 = a.offsetTop;
	var r1 = l1 + a.offsetWidth;
	var b1 = t1 + a.offsetHeight;
	var l2 = b.offsetLeft;
	var t2 = b.offsetTop;
	var r2 = l2 + b.offsetWidth;
	var b2 = t2 + b.offsetHeight;
	if (r2<l1 \|\| r1<l2 \|\| b2<t1 \|\| b1<t2) {
	return false;
	}else {
	return true;
	}
	}

	//随机颜色
	function randColor() {
	return `rgb(${rand(0,255)},${rand(0,255)},${rand(0,255)})`;
	}
	</script>

	</html>

江淼11

关注

0
点赞
踩
0

收藏

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

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initia...
复制链接

扫一扫

专栏目录