二话不说直接贴代码：
<!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实现点气球小游戏
原文地址：http://www.cnblogs.com/jiasonglindeboke/p/7553884.html