js实现点气球小游戏
Posted 林灬
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js实现点气球小游戏相关的知识，希望对你有一定的参考价值。
二话不说直接贴代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点气球</title> </head> <body> <!-- 实现功能： js生成div 在页面上向上移动 已不同的速度 点击气球 气球爆炸消失 1.js生成div标签 并初始化 1 一次生成10个 2 生成一个标签 1 createElement 2 设置属性 className 3 添加到父节点里 3 同时生成多个标签 1 节点片段 4 初始化气球生成位置 1 纵向 top = 浏览器高度-气球高度 2 横向 0-浏览器宽度随机//能取到零 2.让气球动起来 1 获取所有的气球节点 2 循环所有的top属性递减 3 定时器 3.点击气球，气球爆炸并消失 1 鼠标点击事件，事件委托 2 气球被点击之后缩小直到消失 爸爸.removeChild 消失动画： 1 速度加 宽高减 --> </body> </html>
这里css和js的路径没有写，请自行引入。html里面其实没什么东西，就是些注释。
css：
* { margin: 0; padding: 0; } body { background: #ccc; overflow: hidden; } .balloon { position: absolute; width: 160px; height: 160px; background-color: #faf9f9; /*圆角属性*/ border-radius: 50% 50% 25% 50%; /*顺时针旋转45度*/ -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); /*盒子阴影 x位移 y位移 羽化 半径 颜色*/ box-shadow: -8px -8px 80px -8px #873940 inset; } .balloon::after { position: absolute; content: ‘‘; /*内容必须要有*/ bottom: 3px; right: 3px; border: 8px solid transparent; border-right-color: #873940; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); border-radius: 50%; }
js：
var num = 10; //获取浏览器宽高 var wH = window.innerHeight, hW = window.innerWidth, bz = 160; var balloons = []; init();//初始化十个气球 move();//动画 addListener(document.body, ‘click‘, clickBalloon);//事件委托，为body添加事件监听。 //初始化函数 function init() { //创建dom片段 var fragment = document.createDocumentFragment(); for (var i = 0; i < num; i++) { var aBalloon = document.createElement(‘div‘); aBalloon.className = ‘balloon‘; var randomX = ~~(Math.random() * (hW - bz)); randomX = Math.max(0, randomX); aBalloon.style.top = wH - bz + ‘px‘;//设置垂直位置 aBalloon.style.left = randomX + ‘px‘;//设置横向位置 aBalloon.speed = ~~(8 * Math.random())+1;//设置上移速度 balloons.push(aBalloon); fragment.appendChild(aBalloon); } document.body.appendChild(fragment); } //气球移动函数 //不用setInterval：因为setInterval容易发生丢帧 function move() { //如果没有气球了，停止此setTimeout var len = balloons.length; if (balloons.length === 0) { return 0; } else { //遍历所有的气球 for (var i = 0; i < len; i++) { //如果气球飞出浏览器 if (~~(balloons[i].style.top.slice(0, -2)) < -160) { var me = balloons[i]; me.parentNode.removeChild(me); //删除此节点后要初始化balloons对象 balloons = document.querySelectorAll(‘.balloon‘); i--; len--; } else { balloons[i].style.top = balloons[i].offsetTop - balloons[i].speed + ‘px‘; } } setTimeout(move, 1000 / 60); } } //点击气球函数 function clickBalloon(event) { if (event.target.className === ‘balloon‘) { //判断触发事件的元素的类名是否是balloon boom.call(event.target, function () { //为什么不把此句放到boom的if语句中：因为，这里是最后气球的动画，如果我们不想要消失了，想换成动画，就在这里修改 console.log(this.parentNode); this.parentNode.removeChild(this); }.bind(event.target));//让evnet.target去替换boom中的this去执行*** } } //气球爆炸函数 function boom(cb) { //注意不使用bind的话setInterval的this是指向window，因为setInterval总是由浏览器去调用 //bind：硬绑定，延迟触发函数，内部指向强制绑定指定对象。 //call是主动触发 this.timer = setInterval(function () { if (this.offsetWidth < 10) { clearInterval(this.timer); //this.parentNode.removeChild(this); cb && cb();//cb如果存在，cb执行 } else { this.speed++; this.style.width = this.offsetWidth - 10 + ‘px‘;//宽度减少 this.style.height = this.offsetHeight - 10 + ‘px‘;//高度减少 } }.bind(this), 1000 / 30); } /* * addEventListener:监听Dom元素的事件 * * target：监听对象 * type：监听函数类型，如click,mouseover * func：监听函数 */ function addListener(target, type, func) { target.addEventListener ? target.addEventListener(type, func, false) : target.attachEvent("on" + type, func); } function removeListener(target, type, func) { target.removeEventListener ? target.removeEventListener(type, func, false) : target.detachEvent("on" + type, func); }
大家可以粘贴看一下效果，想再接着做也可以再优化优化什么的。要说的没什么，都在注释里，要注意的就一点：
一开始我并没有加判断移出浏览器的处理，后来发现，如果不点击气球，任它飞，这个元素其实是一只存在的，只不过是top属性在一只减少而已。
于是我就想在for循环里添加判断，气球是否已经飞出浏览器。是的话删除此节点。
但是浏览器一直报错。说此removeChild()这个方法找不到。
我就很奇怪，点击时候用的也是这个方法啊，也没报错啊。怎么就找不到呢。
后来发现，balloons[]对象在for循环外就赋值了，在for 循环里删去了这个数组中的一个对象，但是balloons并不是动态改变的。于是：
i++时找到的balloons[i]，已经不是你想要的了。在这里要进行balloons对象的初始化，并让i和len分别减一。
以上是关于js实现点气球小游戏的主要内容，如果未能解决你的问题，请参考以下文章