HTML5气球大战小游戏代码

来源：互联网 2023-03-16 19:11:04 278

HTML5气球大战小游戏代码

工具/原料

adobe dreamweaver

方法/步骤

新建html文档。

HTML5气球大战小游戏代码

书写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>

HTML5气球大战小游戏代码

书写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>

HTML5气球大战小游戏代码

书写并添加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;inum;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;ibl;i ){

var currentElement=bnElements[i]

if(currentElement==null){

continue;

}

var offsetTop=currentElement.offsetTop;

if(offsetTo0){//窗口中

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(speed1){

if(this.parentNode){

this.parentNode.removeChild(this);

bnElements.splice(bnElements.lastIndexOf(this),1);

callback&&callback();

}

clearInterval(this.timer);

}

}.bind(this),30);

}

/script>

HTML5气球大战小游戏代码

4该信息未经授权抓取自百度经验

代码整体结构。

HTML5气球大战小游戏代码

查看效果。

HTML5气球大战小游戏代码

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： HTML

上一篇：html+css3实现电脑和手机传输动画下一篇：HTML/CSS自制导航页面做浏览器主页

HTML5气球大战小游戏代码

工具/原料

方法/步骤

热门文章

标签列表