javascript开发打气球小游戏

web前端群，189394454，有视频、源码、学习方法等大量干货分享

效果知识点：css3画气球, 自定义属性运用，随机阵列, DOM元素操作，高级回调函数与参数复传，动态布局，鼠标事件，定时器运用，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;
        border-radius:160px 160px 64px 160px;/*圆角: 左上 右上 右下 左下*/
        transform:rotate(45deg);  /*css3旋转 顺时针旋转45度*/
        background:#faf9f9;
        box-shadow:-8px -8px 80px -8px pink inset,48px 48px 24px rgba(220,150,150,0.2);  /*x轴的位置 y轴的位置 影子扩散程度 模糊度 颜色*/
    }
    .balloon:after{
        content:''; /*伪元素的内容*/
        display:block;
        position:absolute;
        bottom:0px;   /*因为气球是旋转的 现在的正下方其实是右下角*/
        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的数量
        //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;            //初始化定时器变量
        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('div'); //用js生成标签
                balloon.className='balloon'; //给创建的div元素设置类名
                balloon.style.left=randomL+'px'; //改变元素的样式中的left的值
                balloon.style.top=wH+'px';
                balloon.speed=Math.random()*5+1;  //自定义属性 创建元素的时候添加
                oBody.appendChild(balloon); //body中添加 元素对象
            }
        }
        timer=setInterval(function(){
            var oBall=document.querySelectorAll('.balloon');//获取页面所有的气球
            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(){ //谁 触发了什么 谁做了什么事情
                    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+'px'; //加速逃离
                ele.style.width=ele.offsetWidth-10+'px';  //宽度减少
                ele.style.height=ele.offsetHeight-10+'px';  //高度减少
            },30)
        }
    </script>