【32】css跟js实现打气球的游戏

这几天由于时间紧的原因就不多说话了看效果吧
想看效果的点击鑫大大的小屋

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>index</title><style>*{margin:0;padding:0;}body{background:#434343;overflow:hidden}.balloon{position:absolute;left:0;top:0;margin:auto;width:160px;height:160px;border-radius:160px 160px 64px 160px;/*圆角: 左上 右上 右下 左下*/transform:rotate(45deg);  /*css3旋转 顺时针旋转45度*/background:#faf9f9;box-shadow:-8px -8px 80px -8px pink inset,48px 48px 24px rgba(220,150,150,0.2);  /*x轴的位置 y轴的位置 影子扩散程度 模糊度 颜色*/}.balloon:after{content:''; /*伪元素的内容*/display:block;position:absolute;bottom:0px;   /*因为气球是旋转的 现在的正下方其实是右下角*/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>
</head>
<body><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>
</body>
</html>

【32】css跟js实现打气球的游戏相关推荐

js实现点气球小游戏
二话不说直接贴代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
html、css、js实现简易计算器
学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
web前端面试题完美整理/涵盖html,CSS、JS、浏览器、Vue、React、移动web。
本篇文章整理总结了一些前端面试题,涵盖面很广,并且面的都是知名大厂,所以这些题还是很有代表性的,都掌握以后一面基础面应该没什么问题,二面也能应付大半,奉上: css相关更多教程:https://su ...
前端知识总结汇总！（HTML、CSS、JS、jQuery、vue、微信小程序）
前端知识总结汇总!(HTML.CSS.JS.jQuery.vue.微信小程序) 前端理论考核题 1 / HTML 1.DOCTYPE 的作用是什么?标准模式与兼容模式各有什么区别? !DOCTYPE是 ...
用CSS和JS打造一个简单的图片编辑器
用CSS和JS打造一个简单的图片编辑器,本文主要是利用CSS的filter和简单的Jquery代码来实现一个简单的图片编辑器,包括对图片的透明度,黑白,图片亮度等调节. CSS filter 我们首先 ...
前端小项目（一）| 电影院座位预定（html，css，js）
前端小项目(一)| 电影院座位预定前言开始好好学习前端啦.学紫色爱心记录一波!! 初步学了html,css,js,在github上找了几个前端小项目模仿着练练手.第一个就是电影院座位预定页面,主要 ...
web前端知识点总结html，css，js，vue，react/面试题会经常问到
一阶段 1.网络中使用最多的图片格式有哪些 gif 支持动画,只有全透明和不透明两种模式,只有256种颜色 jpg 采用有损压缩算法,体积较小,不支持透明,不支持动画 png 采用有损压缩算法,体积也 ...
html、css、js实现前端网页圣诞树
html.css.js实现前端网页圣诞树资源均来源于网络,若侵权,请联系我删除又到了一年一度的圣诞节,你是否也想送一个圣诞树给朋友?美术生可以画一颗圣诞树,而我们不是美术生怎么办? 我们程 ...

【32】css跟js实现打气球的游戏

【32】css跟js实现打气球的游戏相关推荐

最新文章

热门文章