js实现点气球小游戏

二话不说直接贴代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>点气球</title>
</head>
<body>
<!--
实现功能：js生成div 在页面上向上移动 已不同的速度 点击气球 气球爆炸消失1.js生成div标签 并初始化1 一次生成10个2 生成一个标签1 createElement2 设置属性 className3 添加到父节点里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() {//如果没有气球了，停止此setTimeoutvar 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') {//判断触发事件的元素的类名是否是balloonboom.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分别减一。

转载于:https://www.cnblogs.com/jiasonglindeboke/p/7553884.html

js实现点气球小游戏相关推荐

java代码实现打气球游戏_javascript+css3开发打气球小游戏完整代码
效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: {margin:0;padd ...
java代码实现打气球游戏_关于javascript和css3开发打气球小游戏的完整代码
这篇文章主要介绍了关于javascript和css3开发打气球小游戏的完整代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码, ...
html5 打气球小游戏,在javascript+css3中如何实现打气球小游戏
这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码,主要基于js和css3,基于css3画气球,具体实现代码大家参考下本文效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素 ...
用html5做了一个打气球小游戏
最近初试html5,用canvas和audio做了一个打气球小游戏. demo放在SAE,网址是:[url]http://auzll.sinaapp.com/balloon/[/url] 效果如下: ...
html+css+js实现点球球小游戏
html+css+js实现点球球小游戏简介:这是一款休闲类的小游戏,在这款游戏里面你可以通过鼠标点击屏幕中生成的小球,小球爆炸是有特效的,小球的运行方向和生成位置也是随机的,可以通过修改代码来控制, ...
php 设计五子棋游戏,基于js+canvas实现五子棋小游戏
本文实例为大家分享了js+canvas实现五子棋小游戏的具体代码,供大家参考,具体内容如下效果展示: 源码展示: 五子棋 * { margin: 0; padding: 0; } body { ma ...
C语言开发打气球小游戏
C语言开发打气球小游戏首先我们写一下项目所需要的头文件 #include<stdio.h>//标准输入输出头文件 #include<math.h>//数学库头文件 #incl ...
c语言使用easyX图形库制作打气球小游戏
大一c语言使用easyX图形库制作打气球小游戏如果你是入门easyX图形库,那么这个打气球小游戏将会是和不错的入门项目选择,easyX开创了可视化窗口,使用户更加直观的了解到对象的变化,总代码以及素 ...
利用js写的见缝插针小游戏
利用js写的见缝插针小游戏今天给大家带来的就是一款叫做<见缝插针>的游戏.有空你就往里插,直到你无处可插!看你能过多少关! 游戏截图失败时代码如下 js代码 index.js 测试游 ...

js实现点气球小游戏

js实现点气球小游戏相关推荐

最新文章

热门文章