JavaScript实现气球打字的小游戏

目录
  • 一、实现效果
    • 1、定义球的类
  • 二、源码仓库和效果

一、实现效果

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;
}
}
}

二、源码仓库和效果

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
	// 定义气球类
	function Balloon(img) {
		// 定义携带的字符
		this.arr = "abcdefghijklmnopqrstuvwxyz".split("");
		// 定义索引
		this.index = parseInt(Math.random() * this.arr.length);
		// 定义随机字符
		this.str = this.arr[this.index];
		// 元素属性
		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";

	// 定义数组
	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;
			}
		}
	}
	</script>
</body>
</html>

效果：

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

赞 (0)

相关推荐

  • 原生JS面向对象实现打字小游戏

    原生JS面向对象实现打字小游戏

    本文实例为大家分享了JS面向对象实现打字小游戏的具体代码,供大家参考,具体内容如下 Demo介绍 通过键盘点击下落小球所显示的数字,小球刷新再任意位置重新掉落.并且,每五个球后掉落速度加快 小球刷新位置 大小,颜色随机.用面向对象class方法实现 该demo源码可直接使用.赋值到html文件 然后打开就可以使用,可用作学校课设使用 源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset

  • JavaScript打字小游戏代码

    JavaScript打字小游戏代码

    功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 1.定义全局变量 2.可选择英文字母出现个数 2.控制游戏时间函数 3.统计得分 3.动画效果 4.菜单选项 4.设定字母图片出现的时间 5.判断函数 6.游戏菜单 7.游戏时间选项 8.显示游戏时间 9.游戏难度选项 10.游戏得分 先上效果图:(PS:美工是硬伤) 主要代码设计: 复制代码 代码如下: //-------全局变量------- var data={ "10":["<img src='images

  • javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

    javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字

    前两讲我告诉了大家如何使人物移动,那么今天我们就来看看如何实现仿<三国志曹操传>人物情景对话.具体的链接我写在下方. 一.前言 相信大家都还记得吧,在某些新闻里会有一些惨不忍睹的结果是用像打字机一样的方式把文字弄出来.那么今天的主要目的就是要办到这个. 就在9月5日的时候,我在办公室里起了个做这种程序的念头,并且有了点思路.我首先想用调margin的方法,按理说是作出来了,但很不让人满意,毕竟很麻烦,并且技术也差.所以我打算用上数组和循环.9月13日我抽空写出来了,但由于这几天很忙,基本上在工

  • JS实现打字游戏

    本文实例为大家分享了JS实现打字游戏的具体代码,供大家参考,具体内容如下 第一步:页面的排版和布局 1.1实现开始游戏的界面 1.1.1开始游戏 1.1.2游戏说明 <!--游戏开始的界面--> <div id="gameStart"> <div id="start">开始</div> <div id="describe">说明</div> <div id="

  • js实现打字小游戏

    js实现打字小游戏

    今日闲来无事,想试一试模拟打字游戏,下面是效果图,会记录判断打字,如果在外围添加setInterval函数,可以实现测试打字速度的功能. html <div class="wrapper"> <div id="text">A</div> <input type="text" id="ipt"> </div> css body, html { width: 100%;

  • 原生js实现打字动画游戏

    这是昨天用原生的js写的打字动画游戏,主要用的间歇定时器,对象,还有Math方法,感觉还行,主要看消除字母的时间快慢,但是也有bug,就是字母都是一次性生成的,所以一开始,看起来感觉会有种爆炸的感觉,如果能够一次性生成一批,然后分批往下掉就好了,求大神帮忙改改,大家也可以参考参考. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <ti

  • javascript 打字游戏实现代码

    javascript 打字游戏实现代码

    效果如图所示:下面是核心代码 复制代码 代码如下: GAME = { //随机产生字母 randLetter: function() { var arrLetter = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K&qu

  • javascript实现简单打字游戏

    本文实例为大家分享了javascript打字游戏的具体代码,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>传智打字游戏</title> <style type="text/css"> .label{ position:a

  • JavaScript实现气球打字的小游戏

    JavaScript实现气球打字的小游戏

    目录 一.实现效果 1.定义球的类 二.源码仓库和效果 一.实现效果 1.定义球的类 气球类中我们需要对26个字符进行处理 this.arr = "abcdefghijklmnopqrstuvwxyz".split(""); 生成一个随机字母 this.index = parseInt(Math.random() * this.arr.length); // 定义随机字符 this.str = this.arr[this.index]; 生成一个div标签并对图片进

  • javascript实现的猜数小游戏完整实例代码

    本文实例讲述了javascript实现的猜数小游戏.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <

  • 纯javascript模仿微信打飞机小游戏

    纯javascript模仿微信打飞机小游戏

    七夕情人节也不要忘了打游戏喔喔-,下面小编为大家准备的情人节礼物之纯javascript模仿微信打飞机小游戏分享给天下的情人们. 首先给大家展示效果图: 查看演示      源码下载 纯JavaScript模仿微信打飞机游戏,做网页小游戏的借鉴下,界面设计是竖长形仿手机屏幕风格,游戏效果流畅.具有分数统计,里面的JS封装类中包括有创建飞机类.飞机移动行为控制,创建子弹类,产生min到max之间的随机数,判断本方飞机是否移出边界,如果移出边界,则取消mousemove事件,反之加上mousemov

  • JavaScript写个贪吃蛇小游戏(超详细)

    贪吃蛇大家都玩过,但你会制作嘛?听起来好像很难的样子,其实非常的简单,话不多说直接上代码 我们先把dom结构写出来 <div id="content"> <div id="snake"> <div class="box head"></div> <div class="box"></div> </div> </div> 其中,con

  • js实现金山打字通小游戏

    本文实例为大家分享了js实现金山打字通小游戏的具体代码,供大家参考,具体内容如下 字母匀速随机下落,键盘按下对应字母按键,字母消失重新生成新字母,新字母可帮助回调一部分初始高度 效果 1.页面内容 列表内放字母 <ul id="box"> <li></li> <li>A</li> </ul> ** 2.页面样式 ** 1)清除li园标 2)确定列表位置,为字母随机位置下降准备 *{ padding: 0; marg

  • 如何用VUE和Canvas实现雷霆战机打字类小游戏

    如何用VUE和Canvas实现雷霆战机打字类小游戏

    今天就来实现一个雷霆战机打字游戏,玩法很简单,每一个"敌人"都是一些英文单词,键盘正确打出单词的字母,飞机就会发射一个个子弹消灭"敌人",每次需要击毙当前"敌人"后才能击毙下一个,一个比手速和单词熟练度的游戏. 首先来看看最终效果图: emmmmmmmmmmmmm,界面UI做的很简单,先实现基本功能,再考虑高大上的UI吧. 首先依旧是来分析界面组成: (1)固定在画面底部中间的飞机: (2)从画面上方随机产生的敌人(单词): (3)从飞机头部发射

  • JavaScript 实现锅拍灰太狼小游戏

    JavaScript 实现锅拍灰太狼小游戏

    1.项目文件 2.使用HTML及css进行页面布局 HTML部分 <div class="container"> <h1 class="score">0</h1> <div class="progress"></div> <div id="start"> <h2>锅打灰太狼</h2> <button class="s

  • 基于javascript实现贪吃蛇经典小游戏

    本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt

  • javascript实现简单飞机大战小游戏

    javascript实现简单飞机大战小游戏

    本文实例为大家分享了javascript实现飞机大战小游戏的具体代码,供大家参考,具体内容如下 效果图 html文件 <!DOCTYPE html><html lang='zh'><head>    <meta charset='UTF-8'>    <title>mm</title>    <link rel="stylesheet" href="./css/index.css">

  • 由JavaScript技术实现的web小游戏（不含网游）

    由JavaScript技术实现的web小游戏（不含网游）

    1.Mario(游戏地址:http://jsmario.com.ar/ ) 传说中的马里奥网页版,一比一实现了红白机时代超级马里奥中所有功能 与关卡,精细程度不逊原版游戏.依 赖库:无 2 . Bunny Hunt (游戏地址: http://www.themaninblue.com/experiment/BunnyHunt/) 猎兔,一款简单耐玩的网页狩猎游戏,没有使用第三方支持库,直接利用 css 与 JavasSript 实 现. 依 赖库:无 3 . Bomberman ( 游戏地址: 

随机推荐