js 躲避球游戏
js做的躲避球游戏
代码参见：
<!DOCTYPE html>
<html>
<head>
<meta charset="{CHARSET}">
<title></title>
<style>
* {
margin: 0,0,0,0;
}
.button-area {
margin-left: auto;
margin-right: auto;
width: 440px;
min-height: 20px;
z-index: 100;
}
.button-area div {
margin-top: 20px;
color: cornflowerblue;
width: 100%;
text-align: center;
font-size: 25px;
}
.button {
margin-top: 40px;
margin-left: 40px;
margin-right: 40px;
min-width: 60px;
background-color: burlywood;
height: 30px;
float: left;
z-index: 100;
}
#back {
margin-left: auto;
margin-right: auto;
width: 960px;
height: 450px;
outline-style: dashed;
overflow: hidden;
}
.back {
width: 960px;
height: 450px;
background-image: url(back.jpg);
float: left;
}
#tubaobao {
margin-left: 935px;
margin-top: 0px;
background-image: url("TBB.jpg");
width: 25px;
height: 30px;
position: absolute;
}
.mushrooms {
margin-left: 880px;
margin-top: 0px;
background-image: url("MR.jpg");
width: 20px;
height: 20px;
position: absolute;
z-index: 0;
}
#player {
margin-left: 0px;
margin-top: 0px;
background-image: url("PE.jpg");
width: 30px;
height: 30px;
position: absolute;
}
#GameOver {
margin-left: auto;
margin-right: auto;
width: 960px;
height: 450px;
background-color: rgb(114,66,46);
outline-style: double;
position: relative;
text-align: center;
display: none;
}
#GameOver h1 {
color: red;
width: 960px;
margin-top: 200px;
text-align: center;
z-index: 2;
font-size: 80px;
position: absolute;
}
#GameOver .tm {
background-image: url("TM.jpg");
width: 300px;
height: 340px;
z-index: 1;
margin-left: 330px;
margin-top: 60px;
position: absolute;
}
</style>
</head>
<body>
<div>
<div id="back" style="position:relative">
<div id="back_img" style="position:absolute;width:1920px">
<div class="back"></div>
<div class="back"></div>
</div>
<div style="position:absolute">
<div id="tubaobao"></div>
<div id="player"></div>
</div>
</div>
<div id="GameOver">
<div class="tm"></div>
<h1>Game Over</h1>
</div>
<div class="button-area">
<div>
分数:<span id="record">0</span>
</div>
<button class="button" onmousedown="keydown(0)" id="up-button">上</button>
<button class="button" onmousedown="keydown(1)" id="down-button">下</button>
<button class="button" onclick="location.reload()">重新开始</button>
</div>
</div>
<button style="margin-top:1000px" class="button" onclick="(function () { util.gameOver = function () { }})()" id="down-button">无敌</button>
</body>
</html>
<script>
var gameOver = document.getElementById("GameOver");
var back = document.getElementById("back");
var back_img = document.getElementById("back_img");
//player
var player = document.getElementById("player");
player.intervalObj = null;
player.runSize = 0;
player.move = function () {
util.move(player, 450);
}
var keydown = function (keyCode) {
if (keyCode == 0) {
//锁定当前按键
player.runSize = -5;
} else if (keyCode == 1) {
//锁定当前按键
player.runSize = 5;
}
player.intervalObj = setInterval(player.move, 10);
};
document.onmouseup = function () {
clearInterval(player.intervalObj);
}
var backTop = back.offsetTop;
var backLeft = back.offsetLeft;
var mushrooms = [];
mushrooms.time = 200;
mushrooms.record = 0;
mushrooms.interval = 700;
mushrooms.speed = 5;
mushrooms.pushMr = function () {
var mr = document.createElement('div');
mr.className = "mushrooms";
mr.style.top = tbb.offsetTop + tbb.offsetHeight / 2 + "px";
back.appendChild(mr);
mushrooms.push(mr);
}
mushrooms.move = function () {
mushrooms.forEach(function (value, index, array) {
value.style.marginLeft = value.offsetLeft - mushrooms.speed + "px";
if (value.offsetLeft <= -20) {
back.removeChild(value);
mushrooms.splice(index, 1);
mushrooms.record++;
document.getElementById('record').innerText = mushrooms.record;
} else if (value.offsetLeft >= -10 && value.offsetLeft <= 20) {
var pTop = player.offsetTop
if (value.offsetTop > pTop - 20 && value.offsetTop < pTop + 30) {
util.gameOver();
}
}
})
mushrooms.time--
if (mushrooms.time <= 0) {
mushrooms.time = 500;
mushrooms.interval = (mushrooms.interval - 100) > 50 ? (mushrooms.interval - 100) : 50;
mushrooms.speed = mushrooms.speed + 1;
clearInterval(pushM);
pushM = setInterval(mushrooms.pushMr, mushrooms.interval);
}
back_img.style.marginLeft = back_img.offsetLeft - mushrooms.speed + "px";
if (back_img.offsetLeft <= -960) {
back_img.style.marginLeft = 0 + "px";
}
}
//兔宝宝
var tbb = document.getElementById("tubaobao");
tbb.runTime = 20;
tbb.runSize = 0;
tbb.move = function () {
var arr = [-5, -5, -5, -5, 0, 0, 5, 5, 10, 10, 5];
if (tbb.runTime > 0) {
tbb.runTime--;
util.move(tbb, 450);
} else {
tbb.runTime = 2;
tbb.runSize = ((mushrooms.record > 50 ? mushrooms.record : 50) / 50) * arr[parseInt(Math.random() * arr.length)];
util.move(tbb, 450);
}
mushrooms.move();
}
//util
var util = {
gameOver: function () {
clearInterval(tbbM);
clearInterval(pushM);
back.remove();
gameOver.style.display = "block";
},
move: function (moveObj, size) {
var nowT = moveObj.offsetTop;
var targetT = moveObj.offsetTop + moveObj.runSize;
if (targetT < 0) {
targetT = size - moveObj.offsetHeight;
} else if (targetT > size - moveObj.offsetHeight) {
targetT = 0;
}
moveObj.style.top = (targetT) + "px";
}
};
//test
var tbbM = setInterval(tbb.move, 20);
var pushM = setInterval(mushrooms.pushMr, mushrooms.interval);
</script>
游戏压缩文件：https://pan.baidu.com/s/1cNXhCE
乐一乐：
1、“老板，这件夹克多少钱？”
“1000”
“卧槽，这么贵，那旁边这个呢？”
“那件新款，两个卧槽。”
2、“老板，这件衣服多少钱？”
“15块！”
“老板你会不会做生意啊？还让不让别人砍价了！”
3、到菜市场买菜，看到一个孩子在看摊，我问：“一只鸡多少钱？”
那孩子回答：“23。”
我又问：“两只鸡多少钱？”
孩子愣了一下，一时间没算过来，急中生智大吼一声：“一次只能买一只！”
4、网上买了双雪地靴，发现穿上不好看，抱怨道:看模特穿上挺好看的，自己穿上真难看。
老公：淘宝上的雪地靴模特都不穿裤子，穿起来当然好看了！
