【32】css跟js实现打气球的游戏

这几天由于时间紧的原因就不多说话了看效果吧
想看效果的点击鑫大大的小屋

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>index</title>
    <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>
</head>
<body>

<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>
</body>
</html>
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值