So implementieren Sie ein Ballonspiel in Javascript+CSS3

Dies ist ein einfaches, aber beeindruckendes kleines Spiel, das hauptsächlich auf js und css3 basiert. Den spezifischen Implementierungscode finden Sie in diesem Artikel 🎜>

Effektwissenspunkte:

CSS3-Ballonzeichnung, benutzerdefinierte Attributanwendung, Zufallsarray, DOM-Elementoperation, erweiterte Rückruffunktion und Parameterneuübertragung, dynamisch Layout, Mausereignisse, Timer-Anwendung, neue CSS3-Stile usw.

Der CSS-Code lautet wie folgt:

<style>
{margin:0;padding:0;}
body{background:#434343;overflow:hidden}
.balloon{
position:absolute;
left:0;
top:0;
margin:auto;
width:160px;
height:160px;
圆角: 左上 右上 右下 左下 
/
css3旋转 顺时针旋转45度 
/
background:#faf9f9;
x轴的位置 y轴的位置 影子扩散程度 模糊度 颜色 
/
}
.balloon:after{
伪元素的内容 
/
display:block;
position:absolute;

Da sich der Ballon dreht, ist die rechte Unterseite tatsächlich die untere rechte Ecke*/

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>

Der Javascript-Code lautet wie folgt:

<script>
  var num = 10; // 声明遍历num 为p的数量
  //var oBody = document.querySelector(&#39;body&#39;); //h5 api 获取元素的方法
  var oBody=document.documentElement || document.body; //body获取兼容性写法
  var wW=window.innerWidth; //获取浏览器窗口的宽度
  var wH=window.innerHeight; //获取浏览器窗口高度
  var timer=null;      //初始化定时器变量
  init(num);
  function init(num){
    for(var i=0;i<num;i++){ //for循环 循环加工厂
      var randomL=Math.random()*wW;    // 随机left范围
        randomL=Math.min(wW-160,randomL); //规范left位置
      var balloon = document.createElement(&#39;p&#39;); //用js生成标签
      balloon.className=&#39;balloon&#39;; //给创建的p元素设置类名
      balloon.style.left=randomL+&#39;px&#39;; //改变元素的样式中的left的值
      balloon.style.top=wH+&#39;px&#39;;
      balloon.speed=Math.random()*5+1; //自定义属性 创建元素的时候添加
      oBody.appendChild(balloon); //body中添加 元素对象
    }
  }
  timer=setInterval(function(){
    var oBall=document.querySelectorAll(&#39;.balloon&#39;);//获取页面所有的气球
    for(var i=0,len=oBall.length;i<len;i++){
      oBall[i].style.top = oBall[i].offsetTop-oBall[i].speed+&#39;px&#39;;
      oBall[i].onclick=function(){ //谁 触发了什么 谁做了什么事情
        crash(this,function(xxx){
          clearInterval(xxx.timer); //清除动画定时器
          xxx.parentNode.removeChild(xxx);
        });
        //this.parentNode.removeChild(this);  
        init(1);
      }
    }
  },30);
  function crash(ele,cb){  //被点击之后撒气效果
    ele.timeouter=setTimeout(function(){
        cb&&cb(ele);
    },500)
    ele.timer=setInterval(function(){
      ele.speed++; //加速度自增
      ele.style.top=ele.offsetTop-ele.speed+&#39;px&#39;; //加速逃离
      ele.style.width=ele.offsetWidth-10+&#39;px&#39;; //宽度减少
      ele.style.height=ele.offsetHeight-10+&#39;px&#39;; //高度减少
    },30)
  }
</script>

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So implementieren Sie interaktive Tabs in zTree

Erklären Sie ausführlich die Verwendung von Bauchmuskeln in EasyUI

So verwenden Sie Akkordeon in EasyUI

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein Ballonspiel in Javascript+CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!