<!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. Java子类和父类的初始化执行顺序

    要明白子类和父类的初始化执行顺序,只需要知晓以下三点,就不会再弄错了. 1.创建子类对象时,子类和父类的静态块和构造方法的执行顺序为:父类静态块->子类静态块->父类构造器->子类构 ...

  2. 吴裕雄--天生自然python学习笔记：Python3 网络编程

    Python 提供了两个级别访问的网络服务.: 低级别的网络服务支持基本的 Socket,它提供了标准的 BSD Sockets API,可以访问底层操作系统Socket接口的全部方法. 高级别的网络 ...

  3. 跟随大神实现简单的Vue框架

    自己用vue也不久了,学习之初就看过vue实现的原理,当时看也是迷迷糊糊,能说出来最基本的,但是感觉还是理解的不深入,最近找到了之前收藏的文章,跟着大神一步步敲了一下简易的实现,算是又加深了理解. 原 ...

  4. 吴裕雄--天生自然 PHP开发学习：本地PHPSTORM在线连接、编辑、上传文件到虚拟机，并在本地浏览器运行（前提是虚拟机与本机已桥连成功）

  5. ubuntu 代理设置

    在学习工作中使用vagrant作为开发环境已经有很长一段时间了,使用ubuntu 作为开发系统 在使用中发现,即使修改了apt的source.list源文件,在面对一些开发中需要的软件工具的时候,不可 ...

  6. Webpack 常用 modules

    @(Javascript)[webpack] babel babel-core: babel 核心程式,知道如何載入程式碼.解析和輸出檔案(但不包含編譯). babel-loader: 用來告訴 ba ...

  7. 【转载】checkbox实现全选/取消全选

    比较简单.好理解的写法,做个备注.查看请前往原地址:http://blog.csdn.net/graceup/article/details/46650781 <html> <bod ...

  8. swoole(2)swoole进程结构

    一:进程基本概念 系统中正在运行的一个程序,程序一旦运行就是进程 一个进程可以拥有多个线程 核心内容分为两部分:内存(进程创建时从系统分配的,它所创建的变量都会存储在这一块内存中).上下文环境 二:s ...

  9. k3s原理分析丨如何搞定k3s node注册失败问题

    前 言 面向边缘的轻量级K8S发行版k3s于去年2月底发布后,备受关注,在发布后的10个月时间里,Github Star达11,000颗.于去年11月中旬已经GA.但正如你所知,没有一个产品是十全十美 ...

  10. BeetleX之XRPC远程委托调用

    BeetleX.XRPC是基于接口的远程通讯组件,它不紧可以把接口提供客户端调用,同样也支持服务端创建客户端的接口实例并主动调用客户端的方法.接口有着非常的规范性和约束性,但前提你是必须制定相应的接口 ...