JavaScript实现气球打字游戏

实现效果

定义球的类

气球类中我们需要对26个字符进行处理

this.arr = "abcdefghijklmnopqrstuvwxyz".split("");

生成一个随机字母

this.index = parseInt(Math.random() * this.arr.length);
// 定义随机字符
this.str = this.arr[this.index];

生成一个div标签并对图片进行处理

// 元素属性
this.dom = document.createElement("div");
// 图片属性
this.img = img;
// 图片的宽
this.width = this.img.width / 4;
// 图片的高
this.height = this.img.height / 3;
// 图片的背景定位X
this.positionX = parseInt(Math.random() * 4);
// 图片的背景定位Y
this.positionY = parseInt(Math.random() * 3);

关于样式的处理操作

// 设置样式
this.setStyle = function() {// 设置元素定位this.dom.style.position = "absolute";this.dom.style.left = 0;// 设置元素的内部文本this.dom.innerHTML = this.str;// 设置文本样式this.dom.style.lineHeight = this.height * 2 / 3+ "px";this.dom.style.textAlign = "center";this.dom.style.fontSize = "20px";this.dom.style.fontWeight = "bold";this.dom.style.top = parseInt(Math.random() * (document.documentElement.clientHeight - this.height)) + "px";// 设置元素的宽度和高度this.dom.style.width = this.width + "px";this.dom.style.height = this.height + "px";// 设置元素背景图片this.dom.style.backgroundImage = "url(" + this.img.src + ")";// 设置元素的背景定位this.dom.style.backgroundPositionX = -this.width * this.positionX + "px";this.dom.style.backgroundPositionY = -this.height * this.positionY + "px";
}

定义一个上树的方法

// 上树方法
this.upTree = function() {document.body.appendChild(this.dom);
}

我们需要检测气球是否到达浏览器边缘

// 检测气球是否到达边界
this.check = function() {// 判断定位left值值是否到达别界if (this.dom.offsetLeft >= document.documentElement.clientWidth - this.width) {// 设置定位值this.dom.style.left = document.documentElement.clientWidth - this.width + "px";return true;}return false;
}

定义一个下树的方法

// 下树方法
this.boom = function() {this.dom.parentNode.removeChild(this.dom);
}

定义一个移动的方法，其中的数字表示气球移动的速度

// 移动方法
this.move = function() {this.dom.style.left = this.dom.offsetLeft + 5 + "px";
}

定义初始化的方法并执行

// 定义初始化方法
this.init = function() {this.setStyle();this.upTree();
}
// 执行init
this.init();

创建图片元素

// 创建图片元素
var img = document.createElement("img");
// 设置路径
img.src = "images/balloon.jpg";

气球每隔多少时间生成一个，我们需要设置定时器以及气球到达边界的处理，其中代码中的70表示每移动70次创建一个气球。

// 定义数组
var arr = [];
// 定义定时器
var timer = null;
// 定义一个信号量
var count = 0;
// 添加事件
img.onload = function() {// 初始化气球对象var balloon = new Balloon(img);// 第一个气球也要放入数组中arr.push(balloon);// 赋值定时器timer = setInterval(function() {// 信号量++count++;// 判断信号量if (count % 70 === 0) {// 气球每移动70次， 创建一个气球arr.push(new Balloon(img));}// 循环数组for (var i = 0; i < arr.length; i++) {// 调用move方法arr[i].move();// 调用check方法var result = arr[i].check();// 判断是否到达别界if (result) {// 说明气球到达边界了// 将气球从数组中移除arr.splice(i, 1);// 防止数组塌陷i--;// 清除并接触边界进行弹窗// clearInterval(this.timer)// alert('游戏结束')}}}, 20)

最后就是我们在气球未触到边缘时，通过键盘清除打出对应的字母

// 给document绑定键盘事件
document.onkeydown = function(e) {// 获取用户按下的字符var key = e.key;// 拿着这个key与数组中每一个气球对象的str属性值作比对，如果比对上了，就让气球从数组中移除并且从dom中移除for (var i = 0; i < arr.length; i++) {// 判断if (key.toLowerCase() === arr[i].str.toLowerCase()) {// 调用boom方法arr[i].boom();// 移除当前项arr.splice(i, 1);break;}}
}

源码仓库和效果

每步的案例源代码已上传，需要的可以下载自己看看，可以用于网站背景效果。点击源码下载

玩法

下载源码后，直接点击balloon.html用浏览器打开
每出现一个字母气球，键盘打出对应字母后，如果匹配则气球会消失，如果不匹配后，触发边缘后气球不会消失。

最后

看过这代码之后，自己可以在原有代码上进行拓展，这样可以加深自己的印象，思路来源于打字游戏。

作者每周都会发布不错的文章，供大家学习，欢迎大家关注。

微信搜索【前端每日技巧】关注公众号，写作不易，希望能点赞

JavaScript实现气球打字游戏相关推荐

html简单打字游戏,javascript实现简单打字游戏
本文实例为大家分享了javascript打字游戏的具体代码,供大家参考,具体内容如下传智打字游戏 .label{ position:absolute;left: 0px; } var CODE = ...
javaScript打气球小游戏
简介:游戏运用了javaScript,css,html等知识编写的,当点击左右三角形时,气球的移动速度和产生速度都会发生变化,数字越大,速度越快,同时气球上面的金额越大,气球的移动速度就越快,通过计时 ...
java代码实现打气球游戏_关于javascript和css3开发打气球小游戏的完整代码
这篇文章主要介绍了关于javascript和css3开发打气球小游戏的完整代码,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码, ...
html5 打气球小游戏,在javascript+css3中如何实现打气球小游戏
这是一个简单但是印象深刻的小游戏,打气球小游戏的实现代码,主要基于js和css3,基于css3画气球,具体实现代码大家参考下本文效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素 ...
用javascript编写的打字小游戏
最近在学ExtJs,看了蔡世友老师的视频课程,在第十课中留了一个小作业,就是用javascript写一个打字小游戏,于是按照前几课所讲的知识自己编写了一个. 一.需求:网页上在随机位置会出现字母,字母 ...
JavaScript实现简单的打字游戏
完整项目下载:https://download.csdn.net/download/weixin_44893902/13131694 演示地址:https://url_777.gitee.io/typ ...
javascript打字游戏
为什么80%的码农都做不了架构师?>>> 学一门语言光看书是不够的,最好是边练边学,所以这次我就用javascript写了这个简单的打字游戏,虽然说起来简单,但是对于第一次写游 ...
纯javascript仿金山苹果打字游戏
周末2天在家无聊,女朋友要练打字,一直都是在用金山的苹果打字,哈哈,干脆就自己用JS写一个苹果打字游戏,内容比较简单,本人不会美工,页面没有美化,贴出来跟大家一起学习. 本打字游戏共分10关,第一关: ...
html简单打字游戏,javascript实现的简单打字游戏
传智打字游戏 .label{ position:absolute;left: 0px; } var CODE = "QWERTYUIOPASDFGHJKLZXCVBNM"; var ...
java代码实现打气球游戏_javascript+css3开发打气球小游戏完整代码
效果知识点: css3画气球, 自定义属性运用,随机阵列, DOM元素操作,高级回调函数与参数复传,动态布局,鼠标事件,定时器运用,CSS3新增样式等. css代码如下: {margin:0;padd ...

JavaScript实现气球打字游戏

实现效果

定义球的类

源码仓库和效果

玩法

最后

JavaScript实现气球打字游戏相关推荐

最新文章

热门文章