二话不说直接贴代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>点气球</title>
  6. </head>
  7. <body>
  8. <!--
  9. 实现功能：
  10.      js生成div 在页面上向上移动 已不同的速度 点击气球 气球爆炸消失
  11.  
  12.      1.js生成div标签 并初始化
  13.         1 一次生成10个
  14.         2 生成一个标签
  15.             1 createElement
  16.             2 设置属性 className
  17.             3 添加到父节点里
  18.         3 同时生成多个标签
  19.             1 节点片段
  20.         4 初始化气球生成位置
  21.             1 纵向
  22.                 top = 浏览器高度-气球高度
  23.             2 横向
  24.                 0-浏览器宽度随机//能取到零
  25.  
  26.      2.让气球动起来
  27.         1 获取所有的气球节点
  28.         2 循环所有的top属性递减
  29.         3 定时器
  30.  
  31.      3.点击气球，气球爆炸并消失
  32.         1 鼠标点击事件，事件委托
  33.         2 气球被点击之后缩小直到消失
  34.         爸爸.removeChild
  35.         消失动画：
  36.             1 速度加 宽高减
  37. -->
  38. </body>
  39. </html>

这里css和js的路径没有写，请自行引入。html里面其实没什么东西，就是些注释。

css：

  1. * {
  2.     margin:;
  3.     padding:;
  4. }
  5.  
  6. body {
  7.     background: #ccc;
  8.     overflow: hidden;
  9. }
  10.  
  11. .balloon {
  12.     position: absolute;
  13.     width: 160px;
  14.     height: 160px;
  15.     background-color: #faf9f9;
  16.     /*圆角属性*/
  17.     border-radius: 50% 50% 25% 50%;
  18.     /*顺时针旋转45度*/
  19.     -webkit-transform: rotate(45deg);
  20.     -moz-transform: rotate(45deg);
  21.     -ms-transform: rotate(45deg);
  22.     -o-transform: rotate(45deg);
  23.     transform: rotate(45deg);
  24.     /*盒子阴影 x位移 y位移 羽化 半径 颜色*/
  25.     box-shadow: -8px -8px 80px -8px #873940 inset;
  26. }
  27.  
  28. .balloon::after {
  29.     position: absolute;
  30.     content: ''; /*内容必须要有*/
  31.     bottom: 3px;
  32.     right: 3px;
  33.     border: 8px solid transparent;
  34.     border-right-color: #873940;
  35.     -webkit-transform: rotate(45deg);
  36.     -moz-transform: rotate(45deg);
  37.     -ms-transform: rotate(45deg);
  38.     -o-transform: rotate(45deg);
  39.     transform: rotate(45deg);
  40.     border-radius: 50%;
  41. }

js：

  1. var num = 10;
  2. //获取浏览器宽高
  3. var wH = window.innerHeight,
  4.     hW = window.innerWidth,
  5.     bz = 160;
  6. var balloons = [];
  7.  
  8. init();//初始化十个气球
  9. move();//动画
  10. addListener(document.body, 'click', clickBalloon);//事件委托，为body添加事件监听。
  11.  
  12. //初始化函数
  13. function init() {
  14.     //创建dom片段
  15.     var fragment = document.createDocumentFragment();
  16.     for (var i = 0; i < num; i++) {
  17.         var aBalloon = document.createElement('div');
  18.         aBalloon.className = 'balloon';
  19.         var randomX = ~~(Math.random() * (hW - bz));
  20.         randomX = Math.max(0, randomX);
  21.         aBalloon.style.top = wH - bz + 'px';//设置垂直位置
  22.         aBalloon.style.left = randomX + 'px';//设置横向位置
  23.         aBalloon.speed = ~~(8 * Math.random())+1;//设置上移速度
  24.         balloons.push(aBalloon);
  25.         fragment.appendChild(aBalloon);
  26.     }
  27.     document.body.appendChild(fragment);
  28. }
  29.  
  30. //气球移动函数
  31. //不用setInterval：因为setInterval容易发生丢帧
  32. function move() {
  33.     //如果没有气球了，停止此setTimeout
  34.     var len = balloons.length;
  35.     if (balloons.length === 0) {
  36.         return 0;
  37.     } else {
  38.         //遍历所有的气球
  39.         for (var i = 0; i < len; i++) {
  40.             //如果气球飞出浏览器
  41.             if (~~(balloons[i].style.top.slice(0, -2)) < -160) {
  42.                 var me = balloons[i];
  43.                 me.parentNode.removeChild(me);
  44.                 //删除此节点后要初始化balloons对象
  45.                 balloons = document.querySelectorAll('.balloon');
  46.                 i--;
  47.                 len--;
  48.             } else {
  49.                 balloons[i].style.top = balloons[i].offsetTop - balloons[i].speed + 'px';
  50.             }
  51.         }
  52.         setTimeout(move, 1000 / 60);
  53.     }
  54. }
  55.  
  56. //点击气球函数
  57. function clickBalloon(event) {
  58.     if (event.target.className === 'balloon') {
  59.         //判断触发事件的元素的类名是否是balloon
  60.         boom.call(event.target, function () {
  61.             //为什么不把此句放到boom的if语句中：因为，这里是最后气球的动画，如果我们不想要消失了，想换成动画，就在这里修改
  62.             console.log(this.parentNode);
  63.             this.parentNode.removeChild(this);
  64.         }.bind(event.target));//让evnet.target去替换boom中的this去执行***
  65.     }
  66. }
  67.  
  68. //气球爆炸函数
  69. function boom(cb) {
  70.     //注意不使用bind的话setInterval的this是指向window，因为setInterval总是由浏览器去调用
  71.     //bind：硬绑定，延迟触发函数，内部指向强制绑定指定对象。
  72.     //call是主动触发
  73.     this.timer = setInterval(function () {
  74.         if (this.offsetWidth < 10) {
  75.             clearInterval(this.timer);
  76.             //this.parentNode.removeChild(this);
  77.             cb && cb();//cb如果存在，cb执行
  78.         } else {
  79.             this.speed++;
  80.             this.style.width = this.offsetWidth - 10 + 'px';//宽度减少
  81.             this.style.height = this.offsetHeight - 10 + 'px';//高度减少
  82.         }
  83.     }.bind(this), 1000 / 30);
  84. }
  85.  
  86. /*
  87.  * addEventListener:监听Dom元素的事件
  88.  *
  89.  * target：监听对象
  90.  * type：监听函数类型，如click,mouseover
  91.  * func：监听函数
  92.  */
  93.  
  94. function addListener(target, type, func) {
  95.     target.addEventListener ? target.addEventListener(type, func, false) : target.attachEvent("on" + type, func);
  96. }
  97. function removeListener(target, type, func) {
  98.     target.removeEventListener ? target.removeEventListener(type, func, false) : target.detachEvent("on" + type, func);
  99. }

大家可以粘贴看一下效果，想再接着做也可以再优化优化什么的。要说的没什么，都在注释里，要注意的就一点：

一开始我并没有加判断移出浏览器的处理，后来发现，如果不点击气球，任它飞，这个元素其实是一只存在的，只不过是top属性在一只减少而已。

于是我就想在for循环里添加判断，气球是否已经飞出浏览器。是的话删除此节点。

但是浏览器一直报错。说此removeChild()这个方法找不到。

我就很奇怪，点击时候用的也是这个方法啊，也没报错啊。怎么就找不到呢。

后来发现，balloons[]对象在for循环外就赋值了，在for 循环里删去了这个数组中的一个对象，但是balloons并不是动态改变的。于是：

i++时找到的balloons[i]，已经不是你想要的了。在这里要进行balloons对象的初始化，并让i和len分别减一。

js实现点气球小游戏的更多相关文章

  1. js 面向对象 打气球小游戏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. 原生JS实现的h5小游戏-植物大战僵尸

    代码地址如下:http://www.demodashi.com/demo/12755.html 项目介绍 本项目是利用原生js实现的h5小游戏-植物大战僵尸,主要结合了一下自己对于h5小游戏的理解,结 ...

  3. js实现表格配对小游戏

    js实现表格配对小游戏 一.总结 一句话总结: 二.js实现表格配对 1.配对游戏案例说明 实例描述: 当用户点击两个相同的图案或字符后配对成功,全部配对成功后游戏获胜 案例008采用了大家常见的小游 ...

  4. JS实现植物大战僵尸小游戏，代码记录及效果展示

    前几天看到了一个很有趣的demo,用js制作植物大战僵尸小游戏,本着学习的心态,对照着做了一下,发现这里面的一些代码设计的确很精妙,这里分享下源码和效果,如果有需要,可以看下. 效果如下: 下载地址

  5. jQuery 打气球小游戏 点击气球爆炸效果

    最近在学习前端,看到偶尔看到前端小游戏,就想自己写一个小游戏,奈何水平有限,只能写打气球这种简单的,所有的气球都是动态生成的,气球的颜色也是随机的 html部分 <div class=" ...

  6. 原生js写的flybird小游戏

    游戏地址:http://zangzhihong.jusukeji.com/flybird/index.html html部分 <!DOCTYPE html>   <!-- This ...

  7. css3+jquery+js做的翻翻乐小游戏

    主要是为了练习一下css3的3D翻转功能,就做了这么个小游戏,做的比较粗糙,但是效果看的见. 主要用到的css3代码如下: html结构: <div class="container& ...

  8. 从零到一：用Phaser.js写意地开发小游戏（Chapter 3 - 加载游戏资源）

    回顾 上一节我们搭建了游戏的骨架,添加了四个游戏场景,分别是加载.开始.游戏.结束.那么这一节我们来介绍加载这个场景,顺带丰富一下各个场景的基本内容. Phaser.Loader Phaser框架自带 ...

  9. 原生JS制作贪吃蛇小游戏

    感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...

随机推荐

  1. 请收好这份NLP热门词汇解读

    文章发布于公号[数智物语] (ID:decision_engine),关注公号不错过每一篇干货. 来源 | 微软研究院AI头条 编者按:在过去的一段时间,自然语言处理领域取得了许多重要的进展,Tran ...

  2. 判断点在多边形内算法的C++实现

    目录 1. 算法思路 2. 具体实现 3. 改进空间 1. 算法思路 判断平面内点是否在多边形内有多种算法,其中射线法是其中比较好理解的一种,而且能够支持凹多边形的情况.该算法的思路很简单,就是从目标 ...

  3. arcgis api 3.x for js 入门开发系列十四最近设施点路径分析（附源码下载）

    前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...

  4. Fragment与Fragment相互切换之间的生命周期方法

    Fragment 1 切换到 Fragment 2时生命周期变化 1.通过 add hide show 方式来切换 Fragment Fragment1 的生命周期变化为:onCreate().onC ...

  5. Android远程桌面助手(B1185)for Android P开发者预览版

    Android P的开发者预览版已出,其中App compatibility changes部分特别强调“The platform restricts the use of some non-SDK ...

  6. WebApi接收post方式传入的json数据

    [RoutePrefix("Api")] public class UploadController:BaseApiController { [HttpPost] [Route(& ...

  7. [转]Lua和Lua JIT及优化指南

    一.什么是lua&luaJit lua(www.lua.org)其实就是为了嵌入其它应用程序而开发的一个脚本语言, luajit(www.luajit.org)是lua的一个Just-In-T ...

  8. 在Windows 10 x64 编译ReactOS-0.4.5源码并在VMare中运行

    1.首先下载ReactOS源码(版本是0.4.5,最新版本0.4.9暂没有编译),然后下载RosBe(版本是2.1.6) 2.将下载好的ReactOS源码包放到指定磁盘的文件夹中,目录路径为英文(重要 ...

  9. SQL insert into select 语句

    遇到权限数据变更的需要批量到别的平台, 在175平台添加一个权限需要, 批量到别的现有平台, 以后的建站, 会把sql放到自动建站里面; 权限的 insert into select 表一: `ous ...

  10. PHP字符串函数、常量、数组排序

    PHP字符串函数.常量.数组排序 strlen() 说明:strlen(),可以统计字符串长度 用途:strlen() 常用于循环和其他函数,在确定字符串何时结束很重要时.(例如,在循环中,我们也许需 ...