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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
js控制表单奇偶行样式的简单方法
Jul 31 Javascript
jquery 获取dom固定元素 添加样式的简单实例
Feb 04 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
AngularJS的表单使用详解
Jun 17 Javascript
JavaScript检测字符串中是否含有html标签实现方法
Jul 01 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
Nov 20 Javascript
vue源码入口文件分析(推荐)
Jan 30 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
JS中getElementsByClassName与classList兼容性问题解决方案分析
Aug 07 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
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 文本文件的读取效率
2012/02/10 PHP
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
PHP删除数组中特定元素的两种方法
2013/07/02 PHP
通过PHP自带的服务器来查看正则匹配结果的方法
2015/12/24 PHP
javascript中巧用“闭包”实现程序的暂停执行功能
2007/04/04 Javascript
Java 正则表达式学习总结和一些小例子
2012/09/13 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
javascript得到当前页的来路即前一页地址的方法
2014/02/18 Javascript
JS使用getComputedStyle()方法获取CSS属性值
2014/04/23 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
javascript用函数实现对象的方法
2015/05/14 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
js制作带有遮罩弹出层实现登录注册表单特效代码分享
2015/09/05 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
2017/03/24 jQuery
Angular2开发环境搭建教程之VS Code
2017/12/15 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[00:32]2018DOTA2亚洲邀请赛iG出场
2018/04/03 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
用Python写一段用户登录的程序代码
2018/04/22 Python
Python进程池Pool应用实例分析
2019/11/27 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
html5本地存储 localStorage操作使用详解
2016/09/20 HTML / CSS
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
欢迎横幅标语
2014/06/17 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
鸟的天堂导游词
2015/01/31 职场文书
陕西导游词
2015/02/04 职场文书
python神经网络ResNet50模型
2022/05/06 Python