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

最新推荐文章于 2022-04-28 15:48:47 发布

敢问

最新推荐文章于 2022-04-28 15:48:47 发布

阅读量353

点赞数

分类专栏：面向对象游戏文章标签： js

本文链接：https://blog.csdn.net/weixin_41040445/article/details/110535558

版权

面向对象同时被 2 个专栏收录

21 篇文章 1 订阅

订阅专栏

游戏

8 篇文章 0 订阅

订阅专栏

<!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
评论
js 面向对象 ------小游戏打气球

<!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> html{ wi.
复制链接

扫一扫