<!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. [洛谷P3806] [模板] 点分治1

    洛谷 P3806 传送门 这个点分治都不用减掉子树里的了,直接搞就行了. 注意第63行 if(qu[k]>=buf[j]) 不能不写,也不能写成>. 因为这个WA了半天...... 如果m ...

  2. SQL中的子查询

    目录 WHERE子查询 HAVING子查询 FROM子查询 SELECT子查询 EXISIT子查询 查询薪资排名的员工信息(面试) z子查询就是将一个查询(子查询)的结果作为另一个查询(主查询)的数据 ...

  3. Centos防火墙开启端口

    linux系统对外开放80.8080等端口,防火墙设置 我们很多时候在liunx系统上安装了web服务应用后(如tomcat.apache等),需要让其它电脑能访问到该应用,而Linux系统(cent ...

  4. android greendao的外部封装不太友好。

    https://github.com/greenrobot/greenDAO 下载下官网的示例,有完整的封装版本,但自已封装是碰到很多问题. 因greenDao的Master和Session中很多方法 ...

  5. 启动Tomcat报WEB-INF\lib\j2ee.jar jar not loaded异常的解决办法

    今天加载工程时突然发现Tomcat报: 2010-7-1 12:11:38 org.apache.catalina.loader.WebappClassLoader validateJarFile 信 ...

  6. 格式化MyEclipse代码(java、jsp、js)行的长度@修改java代码字体@修改Properties文件编码方式

    每次用MyEclipse/Eclipse自带的快捷键Ctrl+shift+f格式化代码时,如果原来的一行代码大于80列,Eclipse就会自动换为多行.如果想格式化代码后不想让代码换行可以通过以下方式 ...

  7. Django学习之路03

    django项目生命周期 路由层 路由匹配 #urls中的urlpatterns #url()方法 urlpatterns = [ url(r'^admin/', admin.site.urls), ...

  8. Ness

    三年前与三年后. 今年五月到六月,因为某个原因和蒋哥一起开发了个小游戏.虽然比较粗糙,也没有取得什么,但不管怎么说也是心头肉呀--我比较没用,前期因为ACTF在划水,后期因为ICPC在划水,中间信心满 ...

  9. 微软亚洲研究院的“哈利·波特”：Thomas Moscibroda

    在微软亚洲研究院,有一位名为Thomas Moscibroda的研究员几乎是无人不知.无人不晓,江湖人送外号"哈利·波特".Thomas认为他这么"红"是因为他 ...

  10. 使用Lucene.Net做一个简单的搜索引擎-全文索引

    Lucene.Net Lucene.net是Lucene的.net移植版本,是一个开源的全文检索引擎开发包,即它不是一个完整的全文检索引擎,而是一个全文检索引擎的架构,提供了完整的查询引擎和索引引擎. ...