<!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注解及动态Sql

    一.注解实现MyBatis配置 java注解是在jdk1.5版本之后开始加入的,不得不说注解对于我们开发人员来说是个很方便的东西,实现起来也非常的简单,下边我们说一下在MyBatis中使用注解来替换M ...

  2. C# 开启线程的几种方式

    1.异步委托开启线程 public static void Main(string[] args) { Action<int,int> a=add; a.BeginInvoke(,,nul ...

  3. 有空要解决的错误log

    E/FaceSDK (): FACESDKTimer face score =0.999912 I/FaceTracker(): face_verification used: I/DEBUG ( ) ...

  4. [洛谷P3366] [模板] 最小生成树

    存个模板,顺便复习一下kruskal和prim. 题目传送门 kruskal 稀疏图上表现更优. 设点数为n,边数为m. 复杂度:O(mlogm). 先对所有边按照边权排序,初始化并查集的信息. 然后 ...

  5. SpringMVC在使用过程中的错误

    HTTP Status 500 - Request processing failed; nested exception is org.springframework.validation.Bind ...

  6. Python爬虫-selenium的使用（2）

    使用selenium打开chrome浏览器百度进行搜索 12345678910111213141516171819202122232425 from selenium import webdriver ...

  7. 将js进行到底：node学习3

    node重要API之NET--TCP编程之旅 废话:最近去了一趟上海会了会一个程序员朋友,途径SNH48握手会,说好我就去看看,没想到握手了王诗蒙,掉入巨坑:塞纳河.回来后边听着<春夏秋冬> ...

  8. Python---13面向对象编程

    一.类和实例 面向对象最重要的概念就是类(Class)和实例(Instance),必须牢记类是抽象的模板,比如Student类,而实例是根据类创建出来的一个个具体的“对象”,每个对象都拥有相同的方法, ...

  9. Mysql数据导出到excel-基于python

    阅读本文大概需要 6分钟. 数据除了在测试平台显示,有时候也会习惯用excel以及邮件展示,那么我们可以在测试平台上加一个导出excel功能,方便操作,下面介绍主要代码以及逻辑. 使用操作数据库的py ...

  10. Matplotlib简单回顾

    import numpy as np from pylab import * from matplotlib import pyplot as plt x = [1, 2, 3, 4] y = [3, ...