js:打字消除气球小游戏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app"></div>
    <div id="qaq">最终分数是:<span id='A0.0A'>0</span>
    </div>
    <script>
        /**气球游戏
         *  1.定义数组存储气球,每隔一段时间,添加一个气球
         *  2.绑定键盘事件,获取按下的字母,判断与气球字母是否一致
         *  3.一致的话,移除气球加1分;
         *  4.不一致的话,扣一分
         *  5.气球移出了视图,未被移除,扣2分
         *  6.规定时间内,终止游戏
         * **/


        var width = document.documentElement.clientWidth;//获取视口宽度
        var height = document.documentElement.clientHeight;//获取视口高度
        var letter = 'abcdegfhijklmnopqrstuvwxyz';//定义26个字母
        var arr = [];    //定义数组,存储气球
        var time = 0;    //定义执行的次数
        var score = 0;   //定义分数

        //随机创建一个气球从页面中滑过
        function Balloon(id, top, speed) {
            //存储基本数据
            this.id = id;
            this.speed = speed;//移动速度
            this.col = parseInt(id / 4);//或者Math.floor(id/4)//列
            this.row = id % 4;//行
            this.top = top;
            this.left = -113;
            this.dom = document.createElement('div'); //创建元素
            this.container = document.getElementById('app');  //容器元素
            this.remove = true; //是否可以移动
            this.letter = letter[parseInt(Math.random() * letter.length)];//随机生成一个字母

            //让气球运动
            this.move = function () {
                if (!this.check()) {//边界方法
                    this.left += this.speed; //更改left值
                    this.dom.style.left = this.left + 'px';//修改样式
                }
            }
            //边界判断方法
            this.check = function () {
                if (this.left >= width - 113) {//如果超出右边
                    this.remove = false;//停止移动
                }
            }
            //让气球从页面中消失
            this.die = function () {
                this.remove = false; //不能移动
                this.container.removeChild(this.dom);//从父元素中移除这个元素
            }

            this.init = function (dom) {
                //设置图片样式
                this.dom.style.position = 'absolute';
                this.dom.style.height = '150px';
                this.dom.style.width = '113px';
                this.dom.style.top = this.top + 'px';
                this.dom.style.backgroundImage = 'url(./图片/气球.jpg)';
                this.dom.style.backgroundRepeat = 'no-repeat';
                //显示字母
                this.dom.innerHTML = this.letter;
                this.dom.style.fontSize = '60px';
                this.dom.style.lineHeight = '103px';
                this.dom.style.textAlign = 'center';
                this.dom.style.color = 'red';
                //设置具体的背景图片位置
                this.dom.style.backgroundPositionX = this.row * -113 + 'px';
                this.dom.style.backgroundPositionY = this.col * -150 + 'px';
                this.container.appendChild(this.dom);
            }
        }

        //定时器
        var timebar = setInterval(function () {
            //每隔一段时间生成一个气球
            if (time % 80 === 0) {
                var num = Math.floor(Math.random() * 12);//加入气球
                var speed = 1 + Math.floor(Math.random() * 5); //随机一个1~6之间的速度
                var b1 = new Balloon(num, Math.random() * (height - 200), speed); //实例化
                b1.init();//初始化样式
                arr.push(b1);//放入数组中
            }
            //倒着(法一:放在数组塌陷)遍历数组并移动
            for (var i = arr.length - 1; i >= 0; i--) {
                arr[i].check();//对每个气球校验
                arr[i].move()//让每一个气球移动
                if (!arr[i].remove) {//如果该气球移出页面
                    arr[i].die();//移除元素
                    arr.splice(i, 1);//数组中移除该气球
                    //纠正(法二):i--;
                    score -= 2;//更改分数
                }
            }
            time++; //下一次
            if (time > 1000) {//超过1000次,停止游戏
                clearInterval(timebar);
                console.log('分数是:' + score);//提示分数
                document.getElementById('A0.0A').innerText = score;
            }
        }, 30)
        //绑定键盘事件 
        document.onkeydown = function (e) { //获取键值e.key
            //比较有无气球的字母与之对应
            for (var i = 0; i < arr.length; i++) {
                if (e.key.toUpperCase() === arr[i].letter.toUpperCase()) {//如果字母相等
                    score++;//找到了
                    arr[i].die();//停止移动(移除气球后,该气球就不能移动了)
                    arr.splice(i, 1);//将气球从arr中移除
                    return;
                }
            }
            score--;//寻找一轮没有找到对应气球,说明点击错误
        }

    </script>
</body>

</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值