二话不说直接贴代码：

<!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:;

    padding:;

}

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实现点气球小游戏的更多相关文章

  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. 超级有爱的五款APP共享 可以让你神操作

    随着科技的不断发展,手机功能的不断完善,让我们更加依赖手机,不得不说手机给我们带来很多的乐趣和方便. 今天就主要给大家分享五款超级有爱的APP软件,感兴趣的小伙伴已经迫不及待了吧! 荔枝 荔枝是一款声 ...

  2. Flask技术问题汇总

    1:Flask 使用 request对象代理了当前请求的上下文.这么做什么好处和坏处? 好处:flask封装了C端发起request对象,这样就可以使用上下文临时把某些对象变为全局可访问:如果不封装, ...

  3. 通用HttpClientUtil工具类

    package com.*.utils; import java.io.IOException; import java.net.URI; import java.util.ArrayList; im ...

  4. datatable的部分问题处理(动态定义列头，给某行添加事件，初始显示空数据)

    一.动态定义列头 在ajax中,用datatable再去重新配置列头,当然传回的数据中,要有对应放列头的键值对 我自定义了Mock数据,用于前端自己交互. 其中,rowdata用于存放传回的数据,co ...

  5. Kafka单节点及集群配置安装

    一.单节点 1.上传Kafka安装包到Linux系统[当前为Centos7]. 2.解压,配置conf/server.property. 2.1配置broker.id 2.2配置log.dirs 2. ...

  6. 太嚣张了！他竟用Python绕过了“验证码”

    在web页面中,经常会遇到验证码,这对于我这么一个热爱web自动化测试人员,就变成了一件头疼的事.于是千方百计找各种资源得到破解简单的验证码方法. 识别验证码 大致分如下几个步骤: 1.获取验证码图片 ...

  7. selenium-日志文件的使用(十二)

    概述 在自动化测试中,如果测试失败需要对错误的错误的代码或者测试case进行分析,进行分析时最好的方法是在项目中添加日志文件,通过日志文件的分析定位出现错误的原因. 这样可以保持自动化测试用例的健壮性 ...

  8. Java基础系列--07_String、StringBuffer和StringBuilder

    String类  (1)字符串:字符串是常量:它们的值在创建之后不能更改,存储在堆中.          如果字符串多次赋值,其实是每次重新赋值的时候程序都先在内存中寻找已开辟的空间是否存在该值;如果 ...

  9. Linux下安装Nginx并配置一个图片服务器

    首先安装nginx安装环境 nginx是C语言开发,建议在linux上运行,本教程使用Centos6.5作为安装环境. gcc 安装nginx需要先将官网下载的源码进行编译,编译依赖gcc环境,如果没 ...

  10. 初窥css---盒子以及盒子扩展

    盒子以及盒子扩展 盒子 盒子是用来实现将网页区域化的一个非常重要的工具,盒子使得网页各部分十分清晰的被分开,对于程序员十分友好(...),并且使得网页更加容易维护. 盒子的常用属性 宽和高这两个属性就 ...