javaScript打气球小游戏

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_41925438/article/details/84401989
简介:游戏运用了javaScript,css,html等知识编写的,当点击左右三角形时,气球的移动速度和产生速度都会发生变化,数字越大,速度越快,同时气球上面的金额越大,气球的移动速度就越快,通过计时器控制游戏的时长,点击气球会消失。
	游戏效果图片:

在这里插入图片描述
具体代码如下:

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<style type="text/css">
		body {
			background: url(img/bg.jpg) no-repeat;
			background-size: cover;
		}
		
		p {
			text-align: center;
			color: green;
			font-size: 24px;
		}
		
		span {
			color: red;
		}
		
		#dv {
			margin: auto;
			width: 1200px;
			height: 600px;
		}
		
		#max {
			width: 250px;
			height: 600px;
			position: fixed;
			right: 10px;
			top: 20px;
		}
		
		#num {
			position: absolute;
			margin-top: -150px;
			left: 65px;
		}
		
		.yx {
			width: 100px;
			height: 130px;
			line-height: 80px;
			text-align: center;
			color: #f00;
			bottom: 0px;
			position: absolute;
			font-wight: bolder;
			font-size: 40px;
		}
		
		#yy {
			font-size: 35px;
			font-weight: bold;
			color: green;
			position: absolute;
			bottom: 405px;
			left: 45px;
		}
	</style>
</head>

<body style="cursor:help;">
	<div id="dv">
		<div>
			<p>打气球游戏将在 <span id="mes">30</span> 秒钟后结束游戏!</p>
		</div>
		<div id="max">
			<img src="img/cj.png" id="cj" />
			<img src="img/ctrl.png" id="ctrl" />
			<div id="yy"></div>
			<div id="num">
				<img src="img/left.png" id="left" />
				<img src="img/gk0.png" id="figure" />
				<img src="img/right.png" id="right" />
			</div>
			<div style="position: absolute; margin-top: -100px;">
				<hr style="width: 250px;" />
				<hr style=" position:absolute; top:2px;width: 250px;" />
			</div>
			<div style="position: absolute; left: 105px; margin-top: -80px;" id="ss">
				<img src="img/start.png" id="start" />

			</div>
		</div>
	</div>

	<audio id="ok" src="audio/ok.mp3"></audio>
	<audio id="bg" src="audio/bg.mp3"></audio>
	<audio id="sz" src="audio/sz.mp3"></audio>
	<script type="text/javascript">
		var i = 30;
		var y;
		var x;
		var tid;
		var intervalid;
		var step = 0;
		var steps = 4;
		var arr = new Array();
		var index;
		var Speed = 200;
		var creatObject = 1;
		var correctNum = 0;
		var money = 0;
		var objCreateTime = 1000;
		var left = document.getElementById("left");
		var right = document.getElementById("right");
		var figure = document.getElementById("figure");
		var start = document.getElementById("start");
		var num = document.getElementById("num");
		var dv = document.getElementById("ss");
		var onOff = true;
		window.onload = function() {
			show();

			start.onmouseover = function() {
				start.style.cursor = "url(zz.cur),auto";
			}

			start.onclick = function() {
				if(onOff) {
					playMusic("sz");
					start.src = 'img/stop.png';
					star();
					fun();
					intervalid = setInterval("fun()", 1000);
					onOff = false;
				} else {
					start.src = 'img/start.png';
					stop();
					fun();

					onOff = true;
				}
			}
		}

		function show() {
			tid = setTimeout("show()", 1000);
		}

		function fun() {
			document.getElementById("mes").innerHTML = i;
			if(i > 0) {
				i--;
				if(onOff) {
					clearTimeout(intervalid);
					clearTimeout(intervalid);
					clearTimeout(intervalid);
					clearTimeout(intervalid);
					clearTimeout(intervalid);
					clearTimeout(intervalid);
				}
			}
			if(i <= 0) {

				start.src = 'img/start.png';

				clearTimeout(intervalid);
				clearTimeout(y);
				clearTimeout(x);

			}
		}

		function star() {

			x = setInterval("create()", objCreateTime);
			y = setInterval("move()", Speed);
			playMusic("bg");
			left.onclick = function() {
				step--;
				if(Speed > 300) {
					Speed = 300;
				}
				if(objCreateTime > 1000) {
					objCreateTime = 1000;
				}
				objCreateTime += 100;
				Speed += 50;
				clearInterval(x);
				clearInterval(y);
				x = setInterval("create()", objCreateTime);
				y = setInterval("move()", Speed);
				if(step <= 0) {
					step = 0;
				}
				figure.src = "img/gk" + step + ".png";
				Speed = step;
			}
			right.onclick = function() {
				step++;
				objCreateTime -= 100;
				if(Speed < 100) {
					Speed = 100;
				}
				if(objCreateTime < 50) {
					objCreateTime = 50;
				}
				//					objCreateTime+=100;
				Speed -= 30;
				clearInterval(x);
				clearInterval(y);
				x = setInterval("create()", objCreateTime);
				y = setInterval("move()", Speed);
				if(step > 9) {
					step = 9;
				}
				figure.src = "img/gk" + step + ".png";
				Speed = step;
			}
		}

		function stop() {
			clearInterval(x);
			clearInterval(y);

		}

		function move() {
			for(var i = 0; i < arr.length; i++) {
				var obj = arr[i];
				var bottom = parseInt(obj.style.bottom) || 3;
				var Height = document.documentElement.clientHeight - 100;
				if(bottom < Height && bottom > 0) {
					obj.style.bottom = bottom + parseInt(obj.innerText) / 3 + "px";
				} else {
					//						$(obj).remove();
					obj.remove();
					arr.splice(i, 1);
				}
			}
		}

		function playMusic(mid) {
			document.getElementById(mid).play();
		}

		function create() {
			for(var i = 0; i < creatObject; i++) {
				var num = Math.random() * 100 + 3;
				var obj = document.createElement("div");
				obj.className = "yx";
				obj.style.background = "url(img/" + Math.floor(Math.random() * 8 + 1) + ".png)";
				var index = parseInt(num);
				obj.innerHTML = index;
				var cWidth = document.documentElement.clientWidth;
				obj.style.left = Math.random() * (cWidth - 200) + "px";
				document.getElementById("dv").appendChild(obj);
				arr.push(obj);
			}

			obj.onmouseup = function() {
				for(var i = 0; i < arr.length; i++) {

					this.remove();
					correctNum++;
					money = index + money;

					arr.splice(i, 0);
					yy.innerText = "命中" + correctNum + "个\n" + "收获" + money + "元";
					break;
				}
				playMusic("ok");
			}
		}
	</script>
</body>

由于本人也是在校学生,做出来的可能不够完善,
特意分享出来,希望能和各位大佬多多交流,共同提高。
需要图片或其他资料可以给我留言

展开阅读全文

没有更多推荐了,返回首页