javascript+css3开发打气球小游戏完整代码
作者:急速奔跑中的蜗牛 时间:2024-05-02 16:15:54
效果知识点:
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开发打气球小游戏完整代码网站的支持!
来源:http://www.jianshu.com/p/8bb6a45ae57a?utm_source=tuicool&utm_medium=referral
标签:js,打气球,小游戏
0
投稿
猜你喜欢
python绘制多个曲线的折线图
2021-08-01 13:58:52
Python实现双X轴双Y轴绘图的示例详解
2021-10-17 17:33:58
Vscode编辑器的巧妙用法(快速格式化代码的方法)
2022-07-02 01:13:33
jsp页面中获取servlet请求中的参数的办法详解
2023-06-19 10:52:00
中文字体在 CSS 中的写法
2009-11-24 13:21:00
详尽解析javascript的event对象
2008-01-16 11:27:00
详解Python如何实现批量为PDF添加水印
2022-06-20 23:33:58
document.getElementById的简写方式
2010-06-21 10:44:00
详解PHP合并多个PDF文件的方法
2023-06-15 07:05:22
SQL语句如何实现超简单的多表查询
2024-01-21 15:42:05
Linux下修改MySQL编码的方法
2024-01-27 02:36:15
pycharm中创建sql文件及模板的过程
2021-10-01 14:50:51
使用Python的PEAK来适配协议的教程
2021-08-01 04:12:04
复制链接到剪贴板,兼容Firefox Chrome IE
2008-12-16 13:23:00
mysql 查询表中平均分最低的班级
2024-01-22 05:23:45
pip如何用pipdeptree查看包依赖
2022-07-28 01:56:26
vue使用echarts时created里拿到的数据无法渲染的解决
2024-04-30 10:22:33
Python如何计算语句执行时间
2023-03-20 23:04:03
举例讲解Django中数据模型访问外键值的方法
2022-05-29 18:40:11
Go语言实现登录验证代码案例
2024-05-08 10:24:14