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


Posted in Javascript onNovember 28, 2017

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开发打气球小游戏完整代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript来实现动画导航效果的代码
Dec 16 Javascript
Jquery乱码的一次解决过程 图解教程
Feb 20 Javascript
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
Ext JS添加子组件的误区探讨
Jun 28 Javascript
JavaScript实现彩虹文字效果的方法
Apr 16 Javascript
充分发挥Node.js程序性能的一些方法介绍
Jun 23 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
Aug 11 Javascript
微信小程序 网络请求(GET请求)详解
Nov 16 Javascript
Bootstrap table使用方法详细介绍
Dec 09 Javascript
Javascript表单序列化原理及实现代码详解
Oct 30 Javascript
vue如何使用rem适配
Feb 06 Vue.js
9种改善AngularJS性能的方法
Nov 28 #Javascript
JS异步函数队列功能实例分析
Nov 28 #Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 #Javascript
JS+HTML+CSS实现轮播效果
Nov 28 #Javascript
vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法
Nov 28 #Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 #Javascript
vue-music关于Player播放器组件详解
Nov 28 #Javascript
You might like
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
Laravel实现ApiToken认证请求
2019/10/14 PHP
Yii框架应用组件用法实例分析
2020/05/15 PHP
javascript(jquery)利用函数修改全局变量的代码
2009/11/02 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
JQuery实现表格动态增加行并对新行添加事件
2014/07/30 Javascript
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
使用BootStrap进行轮播图的制作
2017/01/06 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
2018/08/24 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
使用vue实现通过变量动态拼接url
2020/07/22 Javascript
[04:48]DOTA2上海特锦赛小组赛第三日 TOP10精彩集锦
2016/02/28 DOTA
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python读写csv文件实例代码
2019/07/05 Python
HTML5 window/iframe跨域传递消息 API介绍
2013/08/26 HTML / CSS
Html5移动端div固定到底部实现底部导航条的几种方式
2021/03/09 HTML / CSS
美国钻石商店:Zales
2016/11/20 全球购物
美国修容界大佬创建的个人美妆品牌:Kevyn Aucoin Beauty
2018/12/12 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
无工作经验者个人求职信范文
2013/12/22 职场文书
机械制造专业个人的自我评价
2013/12/28 职场文书
会计专业毕业自荐书范文
2014/02/08 职场文书
建材投资建议书
2014/05/16 职场文书
超市七夕促销活动方案
2014/08/28 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
锅炉工岗位职责
2015/02/13 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
话题作文之自信作文
2019/11/15 职场文书
Nebula Graph解决风控业务实践
2022/03/31 MySQL