欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

javascript+css3开发打气球小游戏完整代码

程序员文章站 2022-04-09 20:43:35
效果知识点: css3画气球, 自定义属性运用,随机阵列, dom元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,css3新增样式等。 css代码...

javascript+css3开发打气球小游戏完整代码

效果知识点:

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;
圆角: 左上 右上 右下 左下 
/
css3旋转 顺时针旋转45度 
/
background:#faf9f9;
x轴的位置 y轴的位置 影子扩散程度 模糊度 颜色 
/
}
.balloon:after{
伪元素的内容 
/
display:block;
position:absolute;

因为气球是旋转的 现在的正下方其实是右下角*/

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>

总结

以上所述是小编给大家介绍的javascript+css3开发打气球小游戏完整代码,希望对大家有所帮助