<p style="text-align: center">
效果知识点：
css3画气球,自定义属性运用，随机阵列,DOM元素操作，高级回调函数与参数复传，动态布局，鼠标事件，定时器运用，CSS3新增样式等。
css代码如下：
{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;
因为气球是旋转的 现在的正下方其实是右下角*/
javascript代码如下：
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随机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效果
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)
}
总结
以上所述是小编给大家介绍的javascript+css3开发打气球小游戏完整代码。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/34967.html