快捷導(dǎo)航

javascript+css3開發(fā)打氣球小游戲完整代碼

更新時(shí)間：2017年11月28日 15:18:13 作者：急速奔跑中的蝸牛

這是一個(gè)簡(jiǎn)單但是印象深刻的小游戲，打氣球小游戲的實(shí)現(xiàn)代碼，主要基于js和css3，基于css3畫氣球，具體實(shí)現(xiàn)代碼大家參考下本文

效果知識(shí)點(diǎn)：

css3畫氣球, 自定義屬性運(yùn)用，隨機(jī)陣列, DOM元素操作，高級(jí)回調(diào)函數(shù)與參數(shù)復(fù)傳，動(dòng)態(tài)布局，鼠標(biāo)事件，定時(shí)器運(yùn)用，CSS3新增樣式等。

css代碼如下：

<style>
{margin:0;padding:0;}
body{background:#434343;overflow:hidden}
.balloon{
position:absolute;
left:0;
top:0;
margin:auto;
width:160px;
height:160px;
圓角: 左上 右上 右下 左下 
/
css3旋轉(zhuǎn) 順時(shí)針旋轉(zhuǎn)45度 
/
background:#faf9f9;
x軸的位置 y軸的位置 影子擴(kuò)散程度 模糊度 顏色 
/
}
.balloon:after{
偽元素的內(nèi)容 
/
display:block;
position:absolute;

因?yàn)闅馇蚴切D(zhuǎn)的現(xiàn)在的正下方其實(shí)是右下角*/

right:0px;
width:0px;
height:0px;
border:8px solid #dbbdbd;
border-top-color:transparent;
border-bottom-color:transparent;
border-left-color:transparent;
transform:rotate(45deg);
border-radius:16px;
}
#wrap{
width:200px;
height:200px;
background:red;
}
</style>

javascript代碼如下：

<script>
  var num = 10; // 聲明遍歷num 為div的數(shù)量
  //var oBody = document.querySelector('body'); //h5 api 獲取元素的方法
  var oBody=document.documentElement || document.body; //body獲取兼容性寫法
  var wW=window.innerWidth; //獲取瀏覽器窗口的寬度
  var wH=window.innerHeight; //獲取瀏覽器窗口高度
  var timer=null;      //初始化定時(shí)器變量
  init(num);
  function init(num){
    for(var i=0;i<num;i++){ //for循環(huán) 循環(huán)加工廠
      var randomL=Math.random()*wW;    // 隨機(jī)left范圍
        randomL=Math.min(wW-160,randomL); //規(guī)范left位置
      var balloon = document.createElement('div'); //用js生成標(biāo)簽
      balloon.className='balloon'; //給創(chuàng)建的div元素設(shè)置類名
      balloon.style.left=randomL+'px'; //改變?cè)氐臉邮街械膌eft的值
      balloon.style.top=wH+'px';
      balloon.speed=Math.random()*5+1; //自定義屬性 創(chuàng)建元素的時(shí)候添加
      oBody.appendChild(balloon); //body中添加 元素對(duì)象
    }
  }
  timer=setInterval(function(){
    var oBall=document.querySelectorAll('.balloon');//獲取頁(yè)面所有的氣球
    for(var i=0,len=oBall.length;i<len;i++){
      oBall[i].style.top = oBall[i].offsetTop-oBall[i].speed+'px';
      oBall[i].onclick=function(){ //誰(shuí) 觸發(fā)了什么 誰(shuí)做了什么事情
        crash(this,function(xxx){
          clearInterval(xxx.timer); //清除動(dòng)畫定時(shí)器
          xxx.parentNode.removeChild(xxx);
        });
        //this.parentNode.removeChild(this);  
        init(1);
      }
    }
  },30);
  function crash(ele,cb){  //被點(diǎn)擊之后撒氣效果
    ele.timeouter=setTimeout(function(){
        cb&&cb(ele);
    },500)
    ele.timer=setInterval(function(){
      ele.speed++; //加速度自增
      ele.style.top=ele.offsetTop-ele.speed+'px'; //加速逃離
      ele.style.width=ele.offsetWidth-10+'px'; //寬度減少
      ele.style.height=ele.offsetHeight-10+'px'; //高度減少
    },30)
  }
</script>

總結(jié)

以上所述是小編給大家介紹的javascript+css3開發(fā)打氣球小游戲完整代碼，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: