js实现点气球小游戏

Posted 林灬

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现点气球小游戏相关的知识,希望对你有一定的参考价值。

二话不说直接贴代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点气球</title>
</head>
<body>
<!--
实现功能:
     js生成div 在页面上向上移动 已不同的速度 点击气球 气球爆炸消失

     1.js生成div标签 并初始化
        1 一次生成10个
        2 生成一个标签
            1 createElement
            2 设置属性 className
            3 添加到父节点里
        3 同时生成多个标签
            1 节点片段
        4 初始化气球生成位置
            1 纵向
                top = 浏览器高度-气球高度
            2 横向
                0-浏览器宽度随机//能取到零

     2.让气球动起来
        1 获取所有的气球节点
        2 循环所有的top属性递减
        3 定时器

     3.点击气球,气球爆炸并消失
        1 鼠标点击事件,事件委托
        2 气球被点击之后缩小直到消失
        爸爸.removeChild
        消失动画:
            1 速度加 宽高减
-->
</body>
</html>

这里css和js的路径没有写,请自行引入。html里面其实没什么东西,就是些注释。

css:

* {
    margin: 0;
    padding: 0;
}

body {
    background: #ccc;
    overflow: hidden;
}

.balloon {
    position: absolute;
    width: 160px;
    height: 160px;
    background-color: #faf9f9;
    /*圆角属性*/
    border-radius: 50% 50% 25% 50%;
    /*顺时针旋转45度*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    /*盒子阴影 x位移 y位移 羽化 半径 颜色*/
    box-shadow: -8px -8px 80px -8px #873940 inset;
}

.balloon::after {
    position: absolute;
    content: ‘‘; /*内容必须要有*/
    bottom: 3px;
    right: 3px;
    border: 8px solid transparent;
    border-right-color: #873940;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    border-radius: 50%;
}

js:

var num = 10;
//获取浏览器宽高
var wH = window.innerHeight,
    hW = window.innerWidth,
    bz = 160;
var balloons = [];

init();//初始化十个气球
move();//动画
addListener(document.body, ‘click‘, clickBalloon);//事件委托,为body添加事件监听。

//初始化函数
function init() {
    //创建dom片段
    var fragment = document.createDocumentFragment();
    for (var i = 0; i < num; i++) {
        var aBalloon = document.createElement(‘div‘);
        aBalloon.className = ‘balloon‘;
        var randomX = ~~(Math.random() * (hW - bz));
        randomX = Math.max(0, randomX);
        aBalloon.style.top = wH - bz + ‘px‘;//设置垂直位置
        aBalloon.style.left = randomX + ‘px‘;//设置横向位置
        aBalloon.speed = ~~(8 * Math.random())+1;//设置上移速度
        balloons.push(aBalloon);
        fragment.appendChild(aBalloon);
    }
    document.body.appendChild(fragment);
}

//气球移动函数
//不用setInterval:因为setInterval容易发生丢帧
function move() {
    //如果没有气球了,停止此setTimeout
    var len = balloons.length;
    if (balloons.length === 0) {
        return 0;
    } else {
        //遍历所有的气球
        for (var i = 0; i < len; i++) {
            //如果气球飞出浏览器
            if (~~(balloons[i].style.top.slice(0, -2)) < -160) {
                var me = balloons[i];
                me.parentNode.removeChild(me);
                //删除此节点后要初始化balloons对象
                balloons = document.querySelectorAll(‘.balloon‘);
                i--;
                len--;
            } else {
                balloons[i].style.top = balloons[i].offsetTop - balloons[i].speed + ‘px‘;
            }
        }
        setTimeout(move, 1000 / 60);
    }
}

//点击气球函数
function clickBalloon(event) {
    if (event.target.className === ‘balloon‘) {
        //判断触发事件的元素的类名是否是balloon
        boom.call(event.target, function () {
            //为什么不把此句放到boom的if语句中:因为,这里是最后气球的动画,如果我们不想要消失了,想换成动画,就在这里修改
            console.log(this.parentNode);
            this.parentNode.removeChild(this);
        }.bind(event.target));//让evnet.target去替换boom中的this去执行***
    }
}

//气球爆炸函数
function boom(cb) {
    //注意不使用bind的话setInterval的this是指向window,因为setInterval总是由浏览器去调用
    //bind:硬绑定,延迟触发函数,内部指向强制绑定指定对象。
    //call是主动触发
    this.timer = setInterval(function () {
        if (this.offsetWidth < 10) {
            clearInterval(this.timer);
            //this.parentNode.removeChild(this);
            cb && cb();//cb如果存在,cb执行
        } else {
            this.speed++;
            this.style.width = this.offsetWidth - 10 + ‘px‘;//宽度减少
            this.style.height = this.offsetHeight - 10 + ‘px‘;//高度减少
        }
    }.bind(this), 1000 / 30);
}


/*
 * addEventListener:监听Dom元素的事件
 *
 * target:监听对象
 * type:监听函数类型,如click,mouseover
 * func:监听函数
 */

function addListener(target, type, func) {
    target.addEventListener ? target.addEventListener(type, func, false) : target.attachEvent("on" + type, func);
}
function removeListener(target, type, func) {
    target.removeEventListener ? target.removeEventListener(type, func, false) : target.detachEvent("on" + type, func);
}

大家可以粘贴看一下效果,想再接着做也可以再优化优化什么的。要说的没什么,都在注释里,要注意的就一点:

一开始我并没有加判断移出浏览器的处理,后来发现,如果不点击气球,任它飞,这个元素其实是一只存在的,只不过是top属性在一只减少而已。

于是我就想在for循环里添加判断,气球是否已经飞出浏览器。是的话删除此节点。

但是浏览器一直报错。说此removeChild()这个方法找不到。

我就很奇怪,点击时候用的也是这个方法啊,也没报错啊。怎么就找不到呢。

后来发现,balloons[]对象在for循环外就赋值了,在for 循环里删去了这个数组中的一个对象,但是balloons并不是动态改变的。于是:

i++时找到的balloons[i],已经不是你想要的了。在这里要进行balloons对象的初始化,并让i和len分别减一。

以上是关于js实现点气球小游戏的主要内容,如果未能解决你的问题,请参考以下文章

求一个h5实现多个气球下落时 点击气球 气泡爆裂的js/jquery代码

JavaScript实现气球打字游戏

请高手帮忙,要解题思路或者是代码,最好c语言。

jQuery 打气球小游戏 点击气球爆炸效果

Web前端---HTML+CSS+JS实现的贪吃蛇游戏

Scratch投球游戏 2020蓝桥杯STEMA考试Scratch编程题真题和答案解析