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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

    <style>

        * {

            margin:0;

            padding:0;

        }

        html，body {

            height:100%;

            background-color:#ccc;

        } 

        div {

            width:250px;

            height:333px;

            position:absolute;

            background: url(img/ballons.png) no-repeat 0px 0;

        }

    </style>

</head>

<body>

    <!--<div></div>-->

    <h2></h2>

    <h2></h2>

    <script>

        var balloons = [];

        var allScore = 0;

        /*面向对象创建气球的构造函数*/

        function Balloon(){

            this.dom = null;

            this.x = 0;

            this.y = 0;

            this.score = 0;

            this.init();

            balloons.push(this);

            this.bindEvent();

        }

        Balloon.prototype.init = function(){

            this.dom = document.createElement('div');

            document.body.appendChild(this.dom);

            this.x = parseInt(Math.random()*(document.documentElement.clientWidth-250));

            this.y = document.documentElement.clientHeight;

            this.score = parseInt(Math.random()*12)+1; //[1~13);

            this.dom.style.left = this.x+"px";

            this.dom.style.top = this.y+"px";

            var curX = -((this.score-1)%4)*250;

            var curY = -parseInt(((this.score-1)/4))*333;

            this.dom.style.backgroundPosition = curX+"px "+curY+"px";

            /*

                1   2   3    4        (0 -250 -250*2 250*3) 0

                5   6   7    8        (0 -250 -250*2 250*3) -333

                9  10  11   12         (0 -250 -250*2 250*3) -333*2

            */

        };

        Balloon.prototype.bindEvent = function(){

            var _this = this;

            this.dom.onclick = function(){

                /*每次点击计算分数，下树，从数组中下线*/

                allScore += _this.score;

                _this.goDied();

            };

        }

        Balloon.prototype.update = function(){

            this.y -= this.score*3;

            if(this.y < -333){

                this.goDied();

            }

            this.dom.style.top = this.y+"px";

        };

        Balloon.prototype.goDied = function(){

            document.body.removeChild(this.dom);

            for(var i=0;i<balloons.length;i++){

                if(balloons[i] == this){

                    balloons.splice(i,1);

                }

            }

        };

        var allTime = 20;

        var iframe = 0;

        /*给new 出来的每一个this对象添加对应的属性

            每秒创建4个气球 */

        var timer = setInterval(function(){

            iframe++;

            if(iframe %10 == 0){

                allTime--;

                for(var i=0;i<4;i++){

                    new Balloon();

                }

            }

            for(var i=0;i<balloons.length;i++){

                balloons[i]&&balloons[i].update();

            }

            document.getElementsByTagName('h2')[0].innerHTML = "你剩余的时间为："+allTime+"秒";

            document.getElementsByTagName('h2')[1].innerHTML = "你目前的分数："+allScore+"分";

            if(!allTime){

                alert("Game over ，你的总分数为："+allScore+"分");

                clearInterval(timer);

            }

        },100);

    </script>

</body>

</html>

图片见文件中

js 面向对象 打气球小游戏的更多相关文章

  1. js实现点气球小游戏

    二话不说直接贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  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. http协议和网络模型

    传输层    传输层对上层应用层,提供处于网络连接中的两台计算机之间的数据传输. 在传输层有两个性质不同的协议:TCP(Transmission ControlProtocol,传输控制协议)和 UD ...

  2. cs231n spring 2017 lecture15 Efficient Methods and Hardware for Deep Learning

    讲课嘉宾是Song Han,个人主页 Stanford:https://stanford.edu/~songhan/:MIT:https://mtlsites.mit.edu/songhan/. 1. ...

  3. CSS预处理技术

    CSS自定义变量 这是一个实验中的标准,后续的具体写法和解析可能会有变动. 与Less|Sass等预处理器不同的是CSS变量带有语义效果,并且不需要额外的编译.因为其名称本身就包含了语义的信息,这使得 ...

  4. OpenCV 改变图像的对比度和亮度

    #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgui.hpp> #include <ios ...

  5. Ajax如何提交数据到springMVC后台

    现在好多web项目实现前段和后端分离,实现前端和后端技术人员,使他们加快开发,减少沟通上的问题,后台只需要提供访问接口,而前天只需要调用提供的接口即可.减少前后端的沟通上的成本 本项目是开发中发现aj ...

  6. 2017 ACM-ICPC, Universidad Nacional de Colombia Programming Contest K - Random Numbers (dfs序 线段树+数论)

    Tamref love random numbers, but he hates recurrent relations, Tamref thinks that mainstream random g ...

  7. LG_2051_[AHOI2009]中国象棋

    题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可以是0个),使得没有一个炮可以攻击到另一个炮,请问有多少种放置方法.大家肯定很清楚,在中国象棋中炮的行走方式是 ...

  8. laravel-事件

    1.注册事件以及监听器 首先我们需要在 app/Providers/目录下的EventServiceProvider.php中注册事件监听器映射关系,如下: /** * The event liste ...

  9. annoy超平面多维近似向量查找工具

    需求:有800万的中文词向量,要查询其中任意一个词向量对应的k个与其最邻近的向量.通常情况下如果向量集比较小的话,几十万个向量(几个G这种),我们都可以用gensim的word2vec来查找,但是88 ...

  10. 产品需求说明书 PRD模版

    XXX产品需求说明书 [版本号:V+数字]                 编  制: 日  期: 评  审:   日  期: 批  准: 日  期:       修订记录 版本 修订章节 修订内容 ...