js 面向对象 ------小游戏打气球

最新推荐文章于 2022-10-20 22:10:47 发布
最新推荐文章于 2022-10-20 22:10:47 发布
阅读量354 收藏 2
点赞数
分类专栏： 面向对象 游戏 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41040445/article/details/110535558
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>打气球</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    html{
        width: 100%;
        height: 100%;
    }
    body{
        background: url(images/bg2.png) repeat-x center bottom, -webkit-linear-gradient(top,skyblue,white);
        overflow: hidden;
    }
    .balloon{
        width: 118px;
        height: 168px;
        background: url(images/balloon.png) ;
        position: absolute;
    }
</style>
<body>
    <div id="box">
        <h3 id="info"></h3>
        <h3 id="score"></h3>
        <h3 id="time"></h3>
        <audio src="images/bomb.wav" id="bomb"></audio>
    </div>
</body>
</html>
<script>
   /*  通过切换背景图位置显示不同气球 气球宽高  118* 168   位置间距X:140 Y: 176
    坐标的确定:横坐标0 1 2 3 纵坐标 0 1 2（4*3的精灵图），横坐标通过   下标%4 得出  纵坐标通过 parseInt(下标/4)得出 

    初始化设置 ：初始化 x,y→ x,y轴 x轴clientWidth取随机 y轴clientHeight

    div创建加类上树
    设置初始的left top 值 
    设置气球背景图位置 变换不同的气球 初始  type 随机的 0-11
    气球向上运动  气球进行数组管理
    气球的速度随机 
    定时器new Balloon 并运动
    气球冻起来之后  设置点击    给document设置点击事件 并判断是否点击在气球身上  
    点在气球身上 删除该dom removeDom()

    //添加帧编号  
    //计分，点中气球给相应分数的气球计分 *2 球 让当前分数x2 /2 球让当前分数除以2   问号球 分数在 乘以2和除以2之间二选1
    //j加背景音乐
    // 倒计时  
    //
    */


    function Balloon() {
        //坐标 防止走出屏幕减去一个气球宽度
        this.x = Math.random() * (document.documentElement.clientWidth - 118);
        this.y = document.documentElement.clientHeight;
        //气球的背景位置
        this.type = parseInt(Math.random() * 12);
        //气球数组
        balloonArr.push(this);
        //气球速度
        //IIFE里的this指向的是window 所以此时需要备份this
        self= this;
        this.speed = (function () {
            if(self.type <=8){
                return self.type +1;
            }else if(self.type == 9){
                return 20;
            }else if(self.type == 10){
                return 10;
            }else if(self.type == 11){
                return parseInt(Math.random() * 20) + 1;
            }
        })()
        //初始化
        this.init();

    }
    Balloon.prototype.init = function () {
        //创建加类上树
        this.dom = document.createElement("div");
        this.dom.className = "balloon";
        document.getElementById("box").appendChild(this.dom)

        //初始的left和top
        this.dom.style.left = this.x + "px";
        this.dom.style.top = this.y + "px";
        //设置气球的背景图

        var bgx =-140 * (this.type % 4);
        var bgy = -176 * parseInt(this.type/4);
        this.dom.style.backgroundPosition = bgx +"px "+bgy + "px";
    }
    Balloon.prototype.update = function () {
        this.y -= this.speed;
        this.dom.style.top = this.y+"px";
    }
    Balloon.prototype.removeDom = function () {
        this.dom.parentNode.removeChild(this.dom);
        for(var i=0;i< balloonArr.length;i++){
            if(balloonArr[i] === this){
                balloonArr.splice(i,1);
            }
        }
    }
    document.onclick = function (event) {  
        var x = event.clientX;
        var y = event.clientY;
        //console.log(x,y)
        for(var i=0;i<balloonArr.length;i++){
            
            if(x>balloonArr[i].x && x<balloonArr[i].x+118 && y>balloonArr[i].y && y<balloonArr[i].y+168){

                if(balloonArr[i].type<=8){
                    score += balloonArr[i].type + 1;
                }else if(balloonArr[i].type == 9){
                    score *= 2;
                }else if(balloonArr[i].type == 10){
                    score /= 2;
                }else if(balloonArr[i].type == 11){
                    if(Math.random() > 0.5){
                        score *= 2;
                    }else if(Math.random() < 0.5){
                        score /= 2;
                    }
                }
                document.getElementById("bomb").load();
                document.getElementById("bomb").play()
                balloonArr[i].removeDom()
            }
        }
    }
    var balloonArr = []
    //帧编号，目的是统计当前的屏幕 “刷新数”
    var f = 0;
    var infoDom = document.getElementById("info");
    //计分器
    var score = 0;
    var scoreDom = document.getElementById("score");
    //倒计时
    var time = 10;
    var timeDom = document.getElementById("time")
    var timer = setInterval(() => { 
        f ++;

        infoDom.innerHTML = "帧编号："+ f;
        scoreDom.innerHTML = "总得分：" + score;
        timeDom.innerHTML = "还剩时间：" + time;
        f%30 == 0 && time--;
        if(time < 0){
            alert("游戏结束，当前得分"+ score+"分");
            clearInterval(timer);
        }
        f%30 ==0 && new Balloon();
        for(var i=0;i<balloonArr.length;i++){
            balloonArr[i].update();
        }
    }, 30);

</script>

玩玩吧

 

敢问
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
重庆华清远见-前端部分阶段学习
qq_61913319的博客
12-21 332
使用animate()函数，该函数有四个参数分别为样式组、所需事件、动画函数、回调函数animate()函数支持链式写法只支持数值型样式。如尺寸、位置等。字符串型样式不支持，如颜色等节点.animate({"样式":"值","样式":"值"//动画执行结束后执行。
Java面试题总结-Java基础篇
zwei1999的博客
04-09 572
java面试题总结-Java基础篇 1、什么是字节码？采用字节码的最大好处是什么 字节码：Java源代码经过虚拟机编译器编译后产生的文件（即扩展为.class的文件），它不面向任何特定的处理器，只面向虚拟机。 采用字节码的好处： Java语言通过字节码的方式，在一定程度上解决了传统解释型语言执行效率低的问题，同时又保留了解释型语言可移植的特点。所以Java程序运行时比较高效，而且，由于字节码并不专对一种特定的机器，因此，Java程序无须重新编译便可在多种不同的计算机上运行。 先看.
js 面向对象 打气球小游戏
weixin_30372371的博客
10-24 193
<!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> <...
面经-hangzhou
m0_46338222的博客
07-08 6293
加油
Java基础知识面试题（2022版）
热门推荐
拉格朗日的学习笔记
04-08 2万+
序列号 内容 链接 1 Java基础知识面试题（2022版） 待续… 2 Java集合容器面试题（2022版） 待续… 3 Java异常面试题（2022版） 待续… 4 并发编程面试题 （2022版） 待续… 5 JVM面试题（2022版） 待续… 6 Spring面试题（2022版） 待续… 7 Spring MVC面试题（2022版） 待续… 8 Spring Boot面试题（2022版） 待续… 9 Spring Cloud面试题（2022版） 待续… ....
01-Java基础
m0_37987631的博客
10-20 114
java基础面试题
Java基础知识面试题
不积跬步，无以至千里；不积小流，无以成江海。
02-25 746
Java概述 何为编程 编程就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。 为了使计算机能够理解人的意图，人类就必须要将需解决的问题的思路、方法、和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算机之间交流的过程就是编程。 什么是Java Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简
2021-03-18
weixin_46537166的博客
03-18 101
Java概述 何为编程 编程就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并终得到结果的过程。为了使计算机能够理解人的意图，人类就必须要将需解决的问题的思路、方法、 和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一 步一步去工作，完成某种特定的任务。这种人和计算机之间交流的过程就是编 程。 什么是Java Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了 C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易 用两个特征。Ja
转--Java基础知识面试题
weixin_42675014的博客
07-04 405
文章目录Java概述何为编程什么是Javajdk1.5之后的三大版本JVM、JRE和JDK的关系什么是跨平台性？原理是什么Java语言有哪些特点什么是字节码？采用字节码的最大好处是什么什么是Java程序的主类？应用程序和小程序的主类有何不同？Ja...
打气球小游戏-面向对象.zip
12-18
通过切换背景图位置显示不同气球 气球宽高 118* 168 位置间距X:140 Y: 176 坐标的确定:横坐标0 1 2 3 纵坐标 0 1 2（4*3的精灵图），横坐标通过 下标%4 得出 纵坐标通过 parseInt(下标/4)得出 初始化设置 ：初始...
打气球小游戏.zip
11-14
《基于jQuery+HTML5+面向对象的“打气球小游戏”详解》 “打气球小游戏.zip”是一款利用jQuery、HTML5以及面向对象编程技术构建的互动小游戏，它集趣味性与挑战性于一体，拥有背景音乐（BGM）和气球爆炸的音效，为...
js实现打气球
02-05
里面包括需求分析等,注释多于代码,大家可以更好地理解,互相学习,浏览器打开即可运行,相当于一个小游戏
H5小游戏源码 圣诞气球.zip
10-14
【H5小游戏源码：圣诞气球.zip】 在IT行业中，H5小游戏源码是一种基于HTML5技术的游戏开发代码，通常由HTML、CSS和JavaScript组成。这类游戏可以在各种平台，包括移动设备和桌面浏览器上运行，无需安装，具有良好的...
balloons-pop-game
04-04
8. **面向对象编程**：如果游戏设计得更复杂，可能会用到JavaScript的面向对象编程，创建类和实例来表示气球和游戏的状态。 9. **错误处理**：良好的错误处理是任何应用的基础，JavaScript提供了`try...catch`结构...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
pi_heif-0.17.0-cp310-cp310-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
K-means聚类 气球图
10-18
好的，关于 K-means 聚类和气球图，我可以为您提供一些基本的解释和信息。 K-means 聚类是一种常见的无监督学习算法，用于将数据集分成 K 个不同的组或簇。该算法通过迭代计算每个数据点与其所属簇的中心点之间的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值