JavaScript实现气球打字的小游戏

一、实现效果

JavaScript实现气球打字的小游戏插图

1、定义球的类

气球类中我们需要对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;
 	}
 	}
 	}

二、源码仓库和效果


 	<span class="dec"><!DOCTYPE html>
 	<html lang="en">
 	<head>
 	     <meta charset="UTF-8">
 	     <title>Document</title>
 	</head>
 	<body>
 	     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%20%09%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E6%B0%94%E7%90%83%E7%B1%BB%0A%20%09%20%20%20%20%20function%20Balloon(img)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E6%90%BA%E5%B8%A6%E7%9A%84%E5%AD%97%E7%AC%A6%0A%20%09%20%20%20%20%20%20%20%20%20this.arr%20%3D%20%22abcdefghijklmnopqrstuvwxyz%22.split(%22%22)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E7%B4%A2%E5%BC%95%0A%20%09%20%20%20%20%20%20%20%20%20this.index%20%3D%20parseInt(Math.random()%20*%20this.arr.length)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E9%9A%8F%E6%9C%BA%E5%AD%97%E7%AC%A6%0A%20%09%20%20%20%20%20%20%20%20%20this.str%20%3D%20this.arr%5Bthis.index%5D%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7%0A%20%09%20%20%20%20%20%20%20%20%20this.dom%20%3D%20document.createElement(%22div%22)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E5%B1%9E%E6%80%A7%0A%20%09%20%20%20%20%20%20%20%20%20this.img%20%3D%20img%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E7%9A%84%E5%AE%BD%0A%20%09%20%20%20%20%20%20%20%20%20this.width%20%3D%20this.img.width%20%2F%204%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E7%9A%84%E9%AB%98%0A%20%09%20%20%20%20%20%20%20%20%20this.height%20%3D%20this.img.height%20%2F%203%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E7%9A%84%E8%83%8C%E6%99%AF%E5%AE%9A%E4%BD%8DX%0A%20%09%20%20%20%20%20%20%20%20%20this.positionX%20%3D%20parseInt(Math.random()%20*%204)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%9B%BE%E7%89%87%E7%9A%84%E8%83%8C%E6%99%AF%E5%AE%9A%E4%BD%8DY%0A%20%09%20%20%20%20%20%20%20%20%20this.positionY%20%3D%20parseInt(Math.random()%20*%203)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E6%A0%B7%E5%BC%8F%0A%20%09%20%20%20%20%20%20%20%20%20this.setStyle%20%3D%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E5%AE%9A%E4%BD%8D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.position%20%3D%20%22absolute%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.left%20%3D%200%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E7%9A%84%E5%86%85%E9%83%A8%E6%96%87%E6%9C%AC%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.innerHTML%20%3D%20this.str%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E6%96%87%E6%9C%AC%E6%A0%B7%E5%BC%8F%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.lineHeight%20%3D%20this.height%20*%202%20%2F%203%2B%20%22px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.textAlign%20%3D%20%22center%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.fontSize%20%3D%20%2220px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.fontWeight%20%3D%20%22bold%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.top%20%3D%20parseInt(Math.random()%20*%20(document.documentElement.clientHeight%20-%20this.height))%20%2B%20%22px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E7%9A%84%E5%AE%BD%E5%BA%A6%E5%92%8C%E9%AB%98%E5%BA%A6%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.width%20%3D%20this.width%20%2B%20%22px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.height%20%3D%20this.height%20%2B%20%22px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E8%83%8C%E6%99%AF%E5%9B%BE%E7%89%87%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.backgroundImage%20%3D%20%22url(%22%20%2B%20this.img.src%20%2B%20%22)%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E7%9A%84%E8%83%8C%E6%99%AF%E5%AE%9A%E4%BD%8D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.backgroundPositionX%20%3D%20-this.width%20*%20this.positionX%20%2B%20%22px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.backgroundPositionY%20%3D%20-this.height%20*%20this.positionY%20%2B%20%22px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%8A%E6%A0%91%E6%96%B9%E6%B3%95%0A%20%09%20%20%20%20%20%20%20%20%20this.upTree%20%3D%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20document.body.appendChild(this.dom)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%A3%80%E6%B5%8B%E6%B0%94%E7%90%83%E6%98%AF%E5%90%A6%E5%88%B0%E8%BE%BE%E8%BE%B9%E7%95%8C%0A%20%09%20%20%20%20%20%20%20%20%20this.check%20%3D%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%88%A4%E6%96%AD%E5%AE%9A%E4%BD%8Dleft%E5%80%BC%E5%80%BC%E6%98%AF%E5%90%A6%E5%88%B0%E8%BE%BE%E5%88%AB%E7%95%8C%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(this.dom.offsetLeft%20%3E%3D%20document.documentElement.clientWidth%20-%20this.width)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E5%AE%9A%E4%BD%8D%E5%80%BC%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.left%20%3D%20document.documentElement.clientWidth%20-%20this.width%20%2B%20%22px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20return%20true%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20return%20false%3B%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%B8%8B%E6%A0%91%E6%96%B9%E6%B3%95%0A%20%09%20%20%20%20%20%20%20%20%20this.boom%20%3D%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.parentNode.removeChild(this.dom)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%A7%BB%E5%8A%A8%E6%96%B9%E6%B3%95%0A%20%09%20%20%20%20%20%20%20%20%20this.move%20%3D%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.dom.style.left%20%3D%20this.dom.offsetLeft%20%2B%205%20%2B%20%22px%22%3B%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E5%88%9D%E5%A7%8B%E5%8C%96%E6%96%B9%E6%B3%95%0A%20%09%20%20%20%20%20%20%20%20%20this.init%20%3D%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.setStyle()%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20this.upTree()%3B%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%89%A7%E8%A1%8Cinit%0A%20%09%20%20%20%20%20%20%20%20%20this.init()%3B%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%0A%20%09%20%20%20%20%20%2F%2F%20%E5%88%9B%E5%BB%BA%E5%9B%BE%E7%89%87%E5%85%83%E7%B4%A0%0A%20%09%20%20%20%20%20var%20img%20%3D%20document.createElement(%22img%22)%3B%0A%20%09%20%20%20%20%20%2F%2F%20%E8%AE%BE%E7%BD%AE%E8%B7%AF%E5%BE%84%0A%20%09%20%20%20%20%20img.src%20%3D%20%22images%2Fballoon.jpg%22%3B%0A%20%09%20%0A%20%09%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E6%95%B0%E7%BB%84%0A%20%09%20%20%20%20%20var%20arr%20%3D%20%5B%5D%3B%0A%20%09%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E5%AE%9A%E6%97%B6%E5%99%A8%0A%20%09%20%20%20%20%20var%20timer%20%3D%20null%3B%0A%20%09%20%20%20%20%20%2F%2F%20%E5%AE%9A%E4%B9%89%E4%B8%80%E4%B8%AA%E4%BF%A1%E5%8F%B7%E9%87%8F%0A%20%09%20%20%20%20%20var%20count%20%3D%200%3B%0A%20%09%20%20%20%20%20%2F%2F%20%E6%B7%BB%E5%8A%A0%E4%BA%8B%E4%BB%B6%0A%20%09%20%20%20%20%20img.onload%20%3D%20function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%88%9D%E5%A7%8B%E5%8C%96%E6%B0%94%E7%90%83%E5%AF%B9%E8%B1%A1%0A%20%09%20%20%20%20%20%20%20%20%20var%20balloon%20%3D%20new%20Balloon(img)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%AC%AC%E4%B8%80%E4%B8%AA%E6%B0%94%E7%90%83%E4%B9%9F%E8%A6%81%E6%94%BE%E5%85%A5%E6%95%B0%E7%BB%84%E4%B8%AD%0A%20%09%20%20%20%20%20%20%20%20%20arr.push(balloon)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%B5%8B%E5%80%BC%E5%AE%9A%E6%97%B6%E5%99%A8%0A%20%09%20%20%20%20%20%20%20%20%20timer%20%3D%20setInterval(function()%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E4%BF%A1%E5%8F%B7%E9%87%8F%2B%2B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20count%2B%2B%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%88%A4%E6%96%AD%E4%BF%A1%E5%8F%B7%E9%87%8F%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(count%20%25%2070%20%3D%3D%3D%200)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%B0%94%E7%90%83%E6%AF%8F%E7%A7%BB%E5%8A%A870%E6%AC%A1%EF%BC%8C%20%E5%88%9B%E5%BB%BA%E4%B8%80%E4%B8%AA%E6%B0%94%E7%90%83%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr.push(new%20Balloon(img))%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%BE%AA%E7%8E%AF%E6%95%B0%E7%BB%84%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20arr.length%3B%20i%2B%2B)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%B0%83%E7%94%A8move%E6%96%B9%E6%B3%95%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr%5Bi%5D.move()%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%B0%83%E7%94%A8check%E6%96%B9%E6%B3%95%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20result%20%3D%20arr%5Bi%5D.check()%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%88%A4%E6%96%AD%E6%98%AF%E5%90%A6%E5%88%B0%E8%BE%BE%E5%88%AB%E7%95%8C%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(result)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%AF%B4%E6%98%8E%E6%B0%94%E7%90%83%E5%88%B0%E8%BE%BE%E8%BE%B9%E7%95%8C%E4%BA%86%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%B0%86%E6%B0%94%E7%90%83%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E7%A7%BB%E9%99%A4%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr.splice(i%2C%201)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E9%98%B2%E6%AD%A2%E6%95%B0%E7%BB%84%E5%A1%8C%E9%99%B7%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20i--%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%B8%85%E9%99%A4%E5%B9%B6%E6%8E%A5%E8%A7%A6%E8%BE%B9%E7%95%8C%E8%BF%9B%E8%A1%8C%E5%BC%B9%E7%AA%97%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20clearInterval(this.timer)%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20alert('%E6%B8%B8%E6%88%8F%E7%BB%93%E6%9D%9F')%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%7D%2C%2020)%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%0A%20%09%20%0A%20%09%20%20%20%20%20%2F%2F%20%E7%BB%99document%E7%BB%91%E5%AE%9A%E9%94%AE%E7%9B%98%E4%BA%8B%E4%BB%B6%0A%20%09%20%20%20%20%20document.onkeydown%20%3D%20function(e)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E6%8C%89%E4%B8%8B%E7%9A%84%E5%AD%97%E7%AC%A6%0A%20%09%20%20%20%20%20%20%20%20%20var%20key%20%3D%20e.key%3B%0A%20%09%20%20%20%20%20%20%20%20%20%2F%2F%20%E6%8B%BF%E7%9D%80%E8%BF%99%E4%B8%AAkey%E4%B8%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E6%AF%8F%E4%B8%80%E4%B8%AA%E6%B0%94%E7%90%83%E5%AF%B9%E8%B1%A1%E7%9A%84str%E5%B1%9E%E6%80%A7%E5%80%BC%E4%BD%9C%E6%AF%94%E5%AF%B9%EF%BC%8C%E5%A6%82%E6%9E%9C%E6%AF%94%E5%AF%B9%E4%B8%8A%E4%BA%86%EF%BC%8C%E5%B0%B1%E8%AE%A9%E6%B0%94%E7%90%83%E4%BB%8E%E6%95%B0%E7%BB%84%E4%B8%AD%E7%A7%BB%E9%99%A4%E5%B9%B6%E4%B8%94%E4%BB%8Edom%E4%B8%AD%E7%A7%BB%E9%99%A4%0A%20%09%0A%20%09%20%20%20%20%20%20%20%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20arr.length%3B%20i%2B%2B)%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E5%88%A4%E6%96%AD%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20if%20(key.toLowerCase()%20%3D%3D%3D%20arr%5Bi%5D.str.toLowerCase())%20%7B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E8%B0%83%E7%94%A8boom%E6%96%B9%E6%B3%95%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr%5Bi%5D.boom()%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%2F%2F%20%E7%A7%BB%E9%99%A4%E5%BD%93%E5%89%8D%E9%A1%B9%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20arr.splice(i%2C%201)%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20break%3B%0A%20%09%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
 	</body>
 	</html>

效果:

JavaScript实现气球打字的小游戏插图

到此这篇关于javaScript实现气球打字的小游戏的文章就介绍到这了,更多相关JavaScript气球打字游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

标签

发表评论