JavaScript-demo-方块射击

source code:<!DOCTYPE html><html><head><style>.bullet {width:10px;height:10px;background:green;background-size:100% 100%;position:absolute;border-radius : 5px;}.army {pos

coffee_cold

167人浏览 · 2021-03-09 16:55:31

coffee_cold · 2021-03-09 16:55:31 发布

source code:

<!DOCTYPE html>
<html>
	<head>
		<style>
			.bullet {
				width:10px; 
				height:10px;
				background:green;
				background-size:100% 100%;
				position:absolute;
				border-radius : 5px;
				
			}
			.army {
				position:absolute; 
				width:50px; 
				height:50px; 
				border-radius:25px; 
				background:red;
				background-size:100% 100%;
			}
		</style>
	</head>
	<body style='width:100%; height:100%; background:gray; overflow:hidden;' >
		<div id='spaceArea'>
			<div id='user' style=' background:green; background-size:100%; cursor: none; position:absolute; top:0px; left:0px; border-radius:20px; width:40px; height:40px; '></div>
		</div>
		<div id='gameOverPage' style='position:absolute; top:0px; left:0px; height:100%; width:100%; padding-top:300px; text-align:center; display:none; font-size:30px; color:red; '> 游戏结束 </div>
		<script>
			// 用户元素
			var userCell = document.getElementById('user');
			var spaceAreaCell = document.getElementById('spaceArea');
			// 当前所有的子弹元素
			var bulletCellList = [];
			// 当前所有的敌方飞机元素
			var armyCellList = [];
			// 每次释放的子弹数量
			var bulletNumber = 1; 
			// 设置每一秒诞生一架敌机
			setInterval(buildArmy, 1000);
			// 设置鼠标移动响应函数
			window.onmousemove = mouseMoveFunction;
			function mouseMoveFunction(event) {
				e = event || window.event;
				if (userCell != undefined) {
					userCell.style.top = e.clientY - 20 + 'px';
					userCell.style.left = e.clientX - 20 + 'px';
				}
			}
			// ------------------------------------------ 单发模式 start
			// 设置鼠标点击响应函数
			// window.onclick = mouseClickFunction; 
			// ------------------------------------------ end
			
			// ------------------------------------------ 自动模式 start
			var timer;
			var e;
			window.onmousedown = function () {
				e = event || window.event;
				timer = setInterval(mouseClickFunction, 100);
			};
			window.onmouseup = function () {
				clearInterval(timer);
				e = undefined;
			}
			// ------------------------------------------  end
			// 子弹发射调用
			function mouseClickFunction() {
				if (userCell == undefined) {
					return;
				}
				for (var i=0; i<bulletNumber; i++) {
					var newBulletCell = document.createElement('div');
					newBulletCell.setAttribute('class', 'bullet');
					newBulletCell.style.left = e.clientX + 13 - (i * 13) + 'px';
					newBulletCell.style.top = e.clientY - 21 + 'px';
					spaceAreaCell.appendChild(newBulletCell);
					bulletCellList.push(newBulletCell);
				}
			}
			// 敌方飞机生成调用
			function buildArmy() {
				var newArmyCell = document.createElement('div');
				newArmyCell.setAttribute('class', 'army');
				var randX = randNumber(document.body.clientWidth - 50);
				newArmyCell.style.left = randX + 'px';
				newArmyCell.style.top = 0 + 'px';
				spaceAreaCell.appendChild(newArmyCell);
				armyCellList.push(newArmyCell);
			}
			
			// 子弹轨迹维持调用
			setInterval(function() {
					for(var i=0; i<bulletCellList.length; i++) {
						var cell = bulletCellList[i];
						var currentCellTop = cell.style.top.substring(0, cell.style.top.length - 2);
						if (currentCellTop < 0) {
							bulletCellList.splice(i, 1);
							spaceAreaCell.removeChild(cell);
							i--;
							continue;
						}
						currentCellTop -= 1;
						cell.style.top = currentCellTop + 'px';
					}
				}, 1);
				
			// 敌方飞机飞行状态的维持调用
			setInterval(function() {
					for(var i=0; i<armyCellList.length; i++) {
						var cell = armyCellList[i];
						var currentCellTop = parseInt(cell.style.top.substring(0, cell.style.top.length - 2));
						currentCellTop += 2;
						// console.log(currentCellTop);
						if (currentCellTop > window.screen.height) {
							armyCellList.splice(i, 1);
							spaceAreaCell.removeChild(cell);
							i--;
							continue;
						}
						cell.style.top = currentCellTop + 'px';
						// 碰撞检测，检查是否撞到子弹
						for(var j=0; j<bulletCellList.length; j++) {
							if (checkBulletWithArmy(bulletCellList[j], cell)) {
								spaceAreaCell.removeChild(bulletCellList[j]);
								bulletCellList.splice(j, 1);
								spaceAreaCell.removeChild(cell);
								armyCellList.splice(i, 1);
								cell = undefined;
								i--;
								break;
							}
						}
						// 碰撞检测，检查是否撞到玩家
						if (cell != undefined && userCell != undefined && checkBulletWithArmy(userCell, cell) ) { 
							spaceAreaCell.removeChild(userCell);
							userCell = undefined;
							document.getElementById("gameOverPage").style.display = "";
						}
							
					}
				}, 10);
				
			// 检测子弹与飞机是否碰撞（碰撞检测）
			function checkBulletWithArmy(cellA, cellB) {
				// 转换两个元素左上角的坐标（将带px的字符串转换为整数值）
				cellA.currentLeft = parseInt(cellA.style.left.substring(0, cellA.style.left.length - 2));
				cellA.currentTop = parseInt(cellA.style.top.substring(0, cellA.style.top.length - 2));
				cellB.currentLeft = parseInt(cellB.style.left.substring(0, cellB.style.left.length - 2));
				cellB.currentTop = parseInt(cellB.style.top.substring(0, cellB.style.top.length - 2));
				if(cellA.currentLeft >= cellB.currentLeft && cellA.currentTop >= cellB.currentTop) {
					if (cellA.currentLeft <= (cellB.currentLeft + cellB.clientWidth) && cellA.currentTop <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if((cellA.currentLeft + cellA.clientWidth)>= cellB.currentLeft   && cellA.currentTop >= cellB.currentTop) {
					if ((cellA.currentLeft + cellA.clientWidth) <= (cellB.currentLeft + cellB.clientWidth) && cellA.currentTop <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if(cellA.currentLeft >= cellB.currentLeft && (cellA.currentTop + cellA.clientHeight) >= cellB.currentTop) {
					if (cellA.currentLeft <= (cellB.currentLeft + cellB.clientWidth) && (cellA.currentTop + cellA.clientHeight) <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if((cellA.currentLeft + cellA.clientWidth) >= cellB.currentLeft && (cellA.currentTop + cellA.clientHeight) >= cellB.currentTop) {
					if ((cellA.currentLeft + cellA.clientWidth) <= (cellB.currentLeft + cellB.clientWidth) && (cellA.currentTop + cellA.clientHeight) <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				// 将cellA 与 cellB进行交换
				var t = cellA;
				cellA = cellB;
				cellB = t;
				if(cellA.currentLeft >= cellB.currentLeft && cellA.currentTop >= cellB.currentTop) {
					if (cellA.currentLeft <= (cellB.currentLeft + cellB.clientWidth) && cellA.currentTop <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if((cellA.currentLeft + cellA.clientWidth)>= cellB.currentLeft   && cellA.currentTop >= cellB.currentTop) {
					if ((cellA.currentLeft + cellA.clientWidth) <= (cellB.currentLeft + cellB.clientWidth) && cellA.currentTop <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if(cellA.currentLeft >= cellB.currentLeft && (cellA.currentTop + cellA.clientHeight) >= cellB.currentTop) {
					if (cellA.currentLeft <= (cellB.currentLeft + cellB.clientWidth) && (cellA.currentTop + cellA.clientHeight) <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				if((cellA.currentLeft + cellA.clientWidth) >= cellB.currentLeft && (cellA.currentTop + cellA.clientHeight) >= cellB.currentTop) {
					if ((cellA.currentLeft + cellA.clientWidth) <= (cellB.currentLeft + cellB.clientWidth) && (cellA.currentTop + cellA.clientHeight) <= (cellB.currentTop + cellB.clientHeight)) {
							return true;
					}
				}
				return false;
			}
			// 随机生成0到n之间的一个整数
			function randNumber(n) {
				return Math.ceil(Math.random() * n);
			}
		</script>
	</body>
</html>