HTML5气球大战小游戏代码
1、新建html文档。
2、书写hmtl代码。<div id="gameinfo" style="transform: translateZ(360px);"> <p> 最高连击：<span id='maxDoubleHit'>0</span> </p> <p> 本次游戏：<span id='currentDoubleHit'>0</span> </p> <p id="gamemsg" style="display:none;"> <span style="color:red;font-weight:bold;"> Game Over </span> <button onclick="javscript:location.reload();"> 重新开始 </button> </p></div><div id="ballDiv"></div>
3、书写css代码。<style>body{margin:0;padding:0}#ballD足毂忍珩iv{position:fixed;top:0;left:0}.balloon{width:150px;height:150px;position:absolute;left:0;top:0;background-color:#f3778d;border-radius:50% 50% 10% 50%;transform:rotate(45deg);box-shadow:1px 1px 20px 20px pink inset;z-index:10}.balloon:after{width:20px;height:20px;content:"";display:block;background:0 0;position:absolute;right:-15px;bottom:-15px;border-left:5px solid pink;border-top:5px solid pink}.balloon:before{width:2px;height:50px;content:"";display:block;background:pink;position:absolute;right:-10px;top:100%;margin-top:-16px;transform:rotate(-45deg)}</style>
4、书写并添加js代码。<script> var maxDoubleHit=localStorage.getItem('eliminateCount&#泌驾台佐39;)||0 var currentDoubleHit=0var bnElements=[];//存放所有气球 var random=Math.random;//随机函数 var wW=window.innerWidth;//窗口宽度 var wH=window.innerHeight;//窗口高度 var ballW=160;//气球的宽度 var ballH=300;//气球的宽度 var minSpeed=3;//最小速度，每次向上移动至少3px var speedNum=8;//速度的定量 var defBnNumber=8;//初始化气球 var moveTimer; var isEnd=false; var jindex=1; var ballDiv=document.getElementById('ballDiv'); //初始化 init(defBnNumber); //移动 move(); //绑定单击事件 bindClick(); //游戏信息 document.getElementById('maxDoubleHit').innerText=maxDoubleHit function record(){ if(isEnd){ clearTimeout(moveTimer); bnElements=[]; document.getElementById('gamemsg').style.display='block'; document.getElementById('gameinfo').style='transform: translateZ(360px);position: fixed;top:0;left:0;z-index:999'; } else{ init(1); document.getElementById('currentDoubleHit').innerText=++currentDoubleHit; if(currentDoubleHit>maxDoubleHit){ document.getElementById('maxDoubleHit').innerText=currentDoubleHit; localStorage.setItem('eliminateCount',currentDoubleHit) } } }//初始化气球 function init(num){ //创建一个虚拟文档节点 var docFragment=document.createDocumentFragment(); for(var i=0;i<num;i++){ var bnElement=document.createElement('div'); bnElement.className='balloon'; //速度随机，限定最小值 var speed=Math.max(minSpeed,~~(random()*speedNum)); bnElement.setAttribute('speed',speed);//~~取整 移动速度 bnElement.setAttribute('id','ball-'+jindex++); //分散排列 var x=(~~(random()*wW))-ballW; x=Math.max(0,x); bnElement.style.left=x+'px'; bnElement.style.top=wH+'px';//露一点出来 //1.先将创建的气球放入创建的虚拟文档节点 docFragment.appendChild(bnElement); bnElements.push(bnElement); } //2.将虚拟文档节点添加到body中 ballDiv.appendChild(docFragment); } function move(){ var bl=bnElements.length for(var i=0;i<bl;i++){ var currentElement=bnElements[i] if(currentElement==null){ continue; } var offsetTop=currentElement.offsetTop; if(offsetTop>0){//窗口中 var speed=currentElement.getAttribute('speed'); currentElement.style.top=offsetTop-speed+'px' } else{ //移除dom节点 //ballDiv.removeChild(currentElement); //移除数组中 //bnElements.splice(i,1); //init(1); isEnd=true; record(); } } moveTimer=setTimeout(move,1000/30); } function bindClick(){ ballDiv.addEventListener('click',clickFunc,false); function clickFunc(e){ if(!isEnd && e.target.className=='balloon'){ boom.call(e.target,function(){ record(); }); } } } function boom(callback){ //var that=this; //替换了上下文，但是没有使用this的意义. var speed=this.getAttribute('speed'); this.timer=setInterval(function(){ this.style.opacity=0.1*(speed--) if(speed<1){ if(this.parentNode){ this.parentNode.removeChild(this); bnElements.splice(bnElements.lastIndexOf(this),1); callback&&callback(); } clearInterval(this.timer); } }.bind(this),30); } </script>
5、代码整体结构。
6、查看效果。
