本帖最后由 sh_hwd 于 2017-11-14 09:49 编辑
小伙伴们，平时闲暇之余应该都喜欢玩游戏吧，其实，我们自己手动做一些简单的小游戏。上图所以，一批色彩缤纷的气球冉冉升起，并且到一定的高度自己消失，
下面还是源源不断的生成，不管你点击哪个，也会破碎消失。而且这些五颜六色的气球，可是自己动态生成的哦！ 做这小游戏特效之前，我们需要先分析一下整体思路： 一：首先用div+css先写出一个静态的气球模板 接下来div可以删掉 css保留。(这样我们能先看到 静态效果) 。 二：动态生成dom元素 初始化（2.1生成几个？ 2.2创建节点对象） 这一步很关键，因为要做到这四步骤：1.气球需要你去动态生成。2.位置是随机的。3.颜色是随 机的。4.需要把创建的动态元素放到页面上。
如上图所示，我们需要留意有些坑（重点！！！），我在这里给大家列举几点：1.随机生成的 颜色后面需要加个0，转化成number类型。2。给balloon添加样式的时候，一定要记得该加 “px”的一定要加！ 还有关于createDocumentFragment()用法，在我的网盘里笔记中有 说明，不懂的大家也可以下载看下。 三：气球向上移动做动画（上升到一定高度消失并且下面自动生成） 这一步比较简单，只需遍历需要生成的气球，然后给每个气球一次设置它的top值就搞定。 四：点击气球，气球爆炸消失 首先，在点击事件，只有点击中每个气球，才可以让它消失。（移动该元素） 关于addEventListener()方法，在我的网盘里的笔记中也有介绍。其次，我们需要在点击后 的事件对象event中找到该元素，也只有在该元素存在下，才会点击成功的移除元素。此处的 bind（）方法，作用是让this的指向从全局指向了当前对象。这个 方法我在网盘笔记里，有 详细介绍，并有举例说明。
我们可以看看源码：
[AppleScript] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<style>
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
background: #ccc;
}
.balloon {
width: 160px;
height: 160px;
background: hotpink;
border-radius: 160px 160px 64px 160px;
box-shadow: -8px -8px 80px -8px #873940 inset;
position: absolute;
top: 0;
left: 0;
transition: all linear;
transform: rotate(45deg);
}
</style>
<body>
<!-- <div class="balloon"></div> -->
</body>
<script>
/*
1.动态生成dom元素 初始化
1.1生成几个
1.2创建节点对象
2.气球向上移动做动画
3.完善气球动画
*/
var num = 10; //气球数量初始化
var wH = window.innerHeight; //获取浏览器高度
var wW = window.innerWidth;
var bZ = 120;
var timer = null;
init(20);
tiemr = setInterval(move, 100);
document.addEventListener('click', function(e) {
if (e.target.className.toLowerCase() === 'balloon') {
var ele = e.target;
// console.log(ele)
boom.call(ele, function() {
this.parentNode.removeChild(this)
}.bind(ele))
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)`;
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), 100)
}
//气球触发模块
function init(num) {
var fragment = document.createDocumentFragment();
for (var i = 0; i < num; i++) {
var x = Math.floor(Math.random() * 256 + 0);
var y = Math.floor(Math.random() * 256 + 0);
var z = Math.floor(Math.random() * 256 + 0);
var color = "rgb(" + x + ", " + y + ", " + z + ")";
// 宽 高随机数
var youziH = Math.floor(Math.random() * 100 + 150);
var randomX = (Math.random() * wW) | 0;
var balloon = document.createElement("div");
balloon.className = '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>
</html>
以上是代码部分。里面都有注释，包括解析过程，代码并不多，但是效果还是很炫酷的。当然，如果还是不清晰，我在网盘里整理了笔记具体的解释说明，包括举例子演示。有兴趣的小伙伴可以去我的网盘下载。网盘资源见最下方。肯定还有些小伙伴觉得，这小游戏比较简单。想挑战更高难度的，所以，我这里也整理了一个2048的经典游戏。如下图所示。源码也在网盘资源里面。
| 
收藏
淘帖
踩
