您的位置：首页 > Web前端 > JavaScript

前端案例-原生javascript开发打气球小游戏

2017-10-29 16:32 363 查看

效果知识点：css3画气球, 自定义属性运用，随机阵列, DOM元素操作，高级回调函数与参数复传，动态布局，鼠标事件，定时器运用，CSS3新增样式等。
效果源码：

<!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:160px160px 64px 160px;/*圆角: 左上右上右下左下*/
transform:rotate(45deg);/*css3旋转顺时针旋转45度*/
background:#faf9f9;
box-shadow:-8px-8px 80px -8px pink inset,48px48px 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:8pxsolid #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(vari=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(vari=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>


web前端学习群：121404239，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 源码函数打气球 javascript web前端

相关文章推荐

新的分享

章节导航