打五颜六色柚子
|
打五颜六色柚子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.balloon {
width: 160px;
height: 160px;
border-radius: 160px 160px 64px 160px;/*气球四角*/
transform: rotate(45deg);/*顺时针旋转45°*/
box-shadow: -8px -8px 80px -8px #873940 inset;/*高光和阴影 X Y 羽化程度 模糊距离 颜色 内阴影*/
position: absolute;
top: 0;
left: 0;
transition: all linear;
}
/*.balloon:after {
content: "";
position: absolute;
bottom: 0;
right: 0;
border: 8px solid transparent;
border-right-color: #873940;
transform: rotate(50deg);
}*/
</style>
<body>
<script>
/*
1 动态生成dom袁术 初始化
1 生成几个
2 创建节点对象
3
2 气球向上移动做动画
3 鼠标点击气球 气球爆炸
4 完善气球动画 代码优化
*/
var num = 10 ;//气球数量初始化
var wH = window.innerHeight;//获取浏览器高度
var bZ = 160;
var wW = window.innerWidth;
var timer;
init(15);
move();
// time();
timer = setInterval(move,1000/30);
document.addEventListener('click',function(event){//事件委托
if(event.target.className.toLowerCase() === "balloon"){
//console.log("点到气球了");
var ele = event.target;
//document.body.removeChild(ele);//告诉 爸爸 干掉 儿子
boom.call(ele,function(){
this.parentNode.removeChild(this);
}.bind(ele));
//生成1个
init(1);
}
},false);
function boom(cb){
var rotate = [30,80];
var index = 0;
this.timer = setInterval(function(){
if(this.offsetWidth<10){
clearInterval(this.timer);
cb&&cb();
return false;
}
index++;
index%= 2;
this.style.transform = `rotate(${rotate[index]}deg)`;/*es6文本域*/
this.speed++;
this.style.width = this.offsetWidth - 10 +"px";
this.style.height = this.offsetHeight - 10 +"px";
this.style.top = this.offsetTop-this.speed+"px";
}.bind(this),1000/30);
}
//气球出发模块
function init(num){
var fragment = document.createDocumentFragment();
for(var i = 0;i<num;i++){
//颜色随机
var x = Math.floor(Math.random() * (255 - 0 + 1) + 0);
var y = Math.floor(Math.random() * (255 - 0 + 1) + 0);
var z = Math.floor(Math.random() * (255 - 0 + 1) + 0);
var color = "rgb(" + x + "," + y + "," + z + ")";
//高度 宽度 随机数
var youziH = Math.floor(Math.random()*100+150);
//var randomX = Math.floor(Math.random()*wW);
var randomX = (Math.random()*wW)|0;
//var randomX = ~~(Math.random()*wW);//位运算符
randomX = Math.abs(randomX);//绝对值
var balloon = document.createElement("div");//创建节点对象
balloon.className = 'balloon';//设置类名
//document.body.appendChild(balloon); 页面重绘
balloon.style.top = wH - bZ+"px";
balloon.style.left = randomX-bZ+"px";
//高度和宽度随机 颜色随机
balloon.style.width = youziH + "px";
balloon.style.height = youziH + "px";
balloon.style.backgroundColor = color;
balloon.speed = ~~(Math.random()*10)+1;//这里动态添加一个speed属性 ，之后可以直接使用，
fragment.appendChild(balloon);
}
document.body.appendChild(fragment);//
}
//气球移动木块
function move(){
var balloons = document.querySelectorAll(".balloon");
for (var i=0,len=balloons.length;i<len;i++){//预存 否则小号性能
balloons[i].style.top = balloons[i].offsetTop -balloons[i].speed+"px";
if(balloons[i].offsetTop<-bZ) {
balloons[i].style.top = wH + "px";
}
}
}
</script>
<script>
/*测试*/
var x = 0;
// setInterval(function(){
// console.log(x++);
// },500);//会阻塞队列 函数设定的速度大于线程速度
/*下边这个比较好 不会失真*/
// add();
// function add(){
// console.log(x++);
// setTimeout(add,500);
// }
/*
流程回顾
在做打气球小游戏之前 首先需要对整个游戏的思路 流程 有大概的概念
首先用div+css先写出一个静态的气球模板 接下来div可以删掉 css保留
整个流程大的步骤可以分四步
气球触发模块
这里需要注意的是 为了避免页面重绘循环之前创建一个fragment//解释：每次JavaScript对DOM的操作都会改变当前页面的呈现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中，这个就是createDocumentFragment()的用武之处。
气球移动模块
这里需要注意的是 页面上每个DOM元素都有固有的属性，比如style width height 等等 ，我们也可以给他添加一个他没有的属性 比如上边的balloons[i].speed，这个属性本来它是没有的。
气球爆炸模块
这里需要注意的是 不可能给每个气球加点击事件 这会影响性能 可以添加事件委托 点击哪个哪个会添加爆炸事件。addeventlistener。
气球生成模块
不应该每次点击爆的时候生成十个 所以给init设置成带参方法 num。
*/
</script>
</body>
</html>
WEB前端学习交流群21 598399936
|
