简介：游戏运用了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>
由于本人也是在校学生，做出来的可能不够完善，
特意分享出来，希望能和各位大佬多多交流，共同提高。
需要图片或其他资料可以给我留言