这篇文章主要介绍了关于javascript和css3开发打气球小游戏的完整代码，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
这是一个简单但是印象深刻的小游戏，打气球小游戏的实现代码，主要基于js和css3，基于css3画气球，具体实现代码大家参考下本文
效果知识点：
css3画气球, 自定义属性运用，随机阵列, DOM元素操作，高级回调函数与参数复传，动态布局，鼠标事件，定时器运用，CSS3新增样式等。
css代码如下：
立即学习“Java免费学习笔记（深入）”；
{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;}javascript代码如下：
var num = 10; // 声明遍历num 为p的数量 //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('p'); //用js生成标签 balloon.className='balloon'; //给创建的p元素设置类名 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) }以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！
相关推荐：
CSS制作Web页面条纹背景样式的介绍
关于CSS3中filter(滤镜)属性的介绍
利用css3径向渐变做一张优惠券
以上就是关于javascript和css3开发打气球小游戏的完整代码的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1610796.html
微信扫一扫 
支付宝扫一扫 
