HTML5气球大战小游戏代码
1、新建html文档。
2、书写hmtl代码。
<div id="gameinfo" style="transform: translateZ(360px);">
最高连击：<span id='maxDoubleHit'>0</span>
本次游戏：<span id='currentDoubleHit'>0</span>
<p id="gamemsg" style="display:none;">
<span style="color:red;font-weight:bold;">
Game Over
</span>
<button onclick="javscript:location.reload();">
重新开始
</button>
</div>
<div id="ballDiv"></div>
3、书写css代码。
<style>
body{margin:0;padding:0}
#ballDiv{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')||0
var currentDoubleHit=0
var 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、查看效果。
