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;// 图片的背景定位Xthis.positionX = parseInt(Math.random() * 4);// 图片的背景定位Ythis.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();}// 执行initthis.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;    }  }}

源码仓库和效果

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

玩法

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

最后

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

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

微信搜索【前端每日技巧】关注公众号，写作不易，希望能点赞👍️加收藏❤️和转发。

唱吧电脑版