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、网上买了双雪地靴，发现穿上不好看，抱怨道:看模特穿上挺好看的，自己穿上真难看。
老公：淘宝上的雪地靴模特都不穿裤子，穿起来当然好看了！
js 躲避球游戏
原文地址：https://www.cnblogs.com/zwcai/p/8426721.html