HTML

<div class="box"><h3>你的鼠標有多快？</h3><p>游戲說明：點擊'開始游戲'，隨機掉下QQ表情，點中它，千萬別讓它掉下去！！</p><input type="button" name="" id="" value="開始游戲" /><div class="cont"><div class="fen"><span>得分：0分</span><span>失分：0分</span></div><div id="game"></div></div> </div> <script src="mTween.js" type="text/javascript" charset="utf-8"></script> <script src="tween.js" type="text/javascript" charset="utf-8"></script>

　　

CSS

body{background: #ccc; } *{margin: 0;padding: 0; }.box{width: 800px;margin: 20px auto;text-align: center; } .cont{width: 100%; } .cont:after{display: block;clear: both;content: ""; } p{line-height: 30px; } input{padding: 5px 10px;margin-bottom: 10px; } .fen{float: left;width: 150px;padding: 10px;border: 1px solid #000;border-right: 0;background: #EBB22B;text-align: left; } .fen span{display: block; } #game{width: 547px;height: 400px;border: 1px solid #000;float: left;background: #fff;position: relative;overflow: hidden;text-align: center;font-size: 30px;font-weight: bold;line-height: 400px; } #game i{position: absolute;top: 0px;left: 0;width: 20px;height: 20px;background: red;border-radius: 50%; }

JS

var game=document.getElementById("game"); var Btn=document.getElementsByTagName("input")[0]; var aIs=document.getElementsByTagName("i"); var aSpan=document.getElementsByTagName("span"); var num=0; var num1=0 var timer=null; var time1=3000; var time2=2000;Btn.οnclick=function(){//修改按鈕文字this.value="游戲進行中...";fn();timer=setInterval(function(){fn();},time1)}function fn(){//生成掉落的圓點game.innerHTML+="<i style='left: "+Math.round( Math.random()*520)+"px;'></i>";var len=aIs.length;for (var i=0;i<len;i++) {//圓點掉落mTween(aIs[i],"top",400,time2,"linear");mTween(aIs[i],"left",Math.round( Math.random()*530),time2,"linear",function(){//運動結(jié)束失分加1aSpan[1].innerHTML="失分:"+(aIs.length-num)+"分";//當(dāng)失分大于10之后，游戲結(jié)束，不在生成圓點if(aIs.length-num>9){clearInterval(timer);Btn.value="游戲結(jié)束";}});aIs[i].index=i;//鼠標移入清除運動aIs[i].οnmοuseοver=function(){clearInterval(this["top"]);clearInterval(this["left"]);}//鼠標點擊背景變?yōu)楹谏?#xff0c;左右抖動，透明度變?yōu)?，得分加1，失分保持原先的值aIs[i].οnclick=function(){var that=this.index;num++;this.style.background="#000";shake(this,"left",function(){aIs[that].style.opacity="0";aSpan[0].innerHTML="得分:"+num+"分";aSpan[1].innerHTML="失分:"+(aIs.length-num)+"分";});}}//每次點擊的圓點達到20個之后速度加快，都縮短100msif(num%20==0){time1-=100;time2-=100;//當(dāng)時間減為0，并且失分少于10個之后，游戲終止，并清除定時器，顯示恭喜if(time1<=0&&aIs.length-num<9){time1=0;time2=0;game.innerHTML="大神，恭喜您通關(guān)了！！"Btn.value="游戲結(jié)束";clearInterval(timer);}}}//抖動函數(shù) function shake(obj,attr,fn){var timer=null;var arr=[];for(var i=20;i>0;i-=2){arr.push(i,-i);}arr.push(0);var num=0;clearInterval(timer);timer=setInterval(function(){var seep=parseInt(getStyle(obj,attr))+arr[num];num++;obj.style[attr]=seep+"px";if(num===arr.length){clearInterval(timer);if(fn){fn();}}},30) } //獲取樣式 function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj)[attr];} }

　　

轉(zhuǎn)載于:https://www.cnblogs.com/yangxue72/p/7998810.html

總結(jié)

以上是生活随笔為你收集整理的你的鼠标有多快-小游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。