[聚合文章] javascript开发打气球小游戏

效果知识点：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>

web前端群：524262608，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。