<!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. Mybatis与Spring整合（纯注解）

    java1.5版本之后开始支持注解,spring*2开始提供注解配置方式,到spring**4后spring推荐使用注解配置 IOC注解(主要作用就是在spring容器中声明一个Bean,同xml中的 ...

  2. Java IO: FileReader和FileWriter

    作者: Jakob Jenkov 译者: 李璟(jlee381344197@gmail.com) 本章节将简要介绍FileReader和FileWriter.与FileInputStream和File ...

  3. 前端js代码以备不时之需

    //获取id元素信息let getId = (args) => { return document.getElementById(args);} //获取类名元素let getClassName ...

  4. 概念--Maven仓库

    转:Maven:mirror和repository 区别 Tip: 默认中央仓库的地址:https://repo.maven.apache.org/maven2 1.Maven仓库主要有2种 remo ...

  5. JSP9个内置对象和3个常用指令

    一.9个内置对象: 1.request对象客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.2.response对象包含了响应客户请求的有关信息,但在JSP中很少 ...

  6. 初识SpringIOC

    初识SpringIOC 简介 IOC(Inversion of Control)控制反转.指的是获取对象方式由原来主动获取,到被动接收的转变.在Spring中,IOC就是工厂模式解耦,是Srping框 ...

  7. 记 MySQL优化 20条

    1. 为查询缓存优化你的查询 大多数的MySQL服务器都开启了查询缓存.这是提高性最有效的方法之一,而且这是被MySQL的数据库引擎处理的.当有很多相同的查询被执行了多次的时候,这些查询结果会被放到一 ...

  8. Python使用input方法输入字母显示NameError

    如图,每次用input方法,输入数字正常,但是输入字母就会报错. 到网上查找资料之后,明白了原来在python2.7中应该用raw_input. 修改之后,代码就正常了.

  9. 美团CodeM 资格赛第一题

    美团外卖的品牌代言人袋鼠先生最近正在进行音乐研究.他有两段音频,每段音频是一个表示音高的序列.现在袋鼠先生想要在第二段音频中找出与第一段音频最相近的部分. 具体地说,就是在第二段音频中找到一个长度和第 ...

  10. 图形用户界面(GUI)应用程序开发——菜鸟的第一步

    参考资源:贺老师博文 在看完贺老师的博文后,我就照葫芦画瓢的做了个求三角形面积的程序.这是我写的一篇所用时间最长博文(两个多小时,真心挺累,或许是我太笨吧),为了尽可能详细的把步骤写明白我截了二十一张 ...