打五颜六色柚子-白红宇

打五颜六色柚子

阅读量：5038 次

发布时间：2019-06-12

本文共 3773 字，大约阅读时间需要 12 分钟。

打五颜六色柚子

<!DOCTYPE html>

<head>

<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>

1 动态生成dom袁术初始化

1 生成几个

2 创建节点对象

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>

/*测试*/

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

转载于:https://www.cnblogs.com/luludehuhuan/p/7797898.html

你可能感兴趣的文章