扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript实现气球打字的小游戏
  • 642

0
分享到

JavaScript实现气球打字的小游戏

2024-04-02 19:04:59 642人浏览 泡泡鱼
摘要

目录一、实现效果1、定义球的类二、源码仓库和效果一、实现效果 1、定义球的类 气球类中我们需要对26个字符进行处理 this.arr = "abcdefghijklmnopqrst

一、实现效果

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

二、源码仓库和效果

<!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实现气球打字的小游戏的文章就介绍到这了,更多相关JavaScript气球打字游戏内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

--结束END--

本文标题: JavaScript实现气球打字的小游戏

本文链接: https://lsjlt.com/news/144956.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • JavaScript实现气球打字的小游戏
    目录一、实现效果1、定义球的类二、源码仓库和效果一、实现效果 1、定义球的类 气球类中我们需要对26个字符进行处理 this.arr = "abcdefghijklmnopqrst...
    99+
    2024-04-02
  • JavaScript怎么实现气球打字游戏
    这篇文章主要介绍“JavaScript怎么实现气球打字游戏”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“JavaScript怎么实现气球打字游戏”文章能帮助大家解决问题。一、实现效果1、定义球的类气...
    99+
    2023-06-29
  • C++怎么实现打气球小游戏
    这篇文章主要介绍“C++怎么实现打气球小游戏”，在日常操作中，相信很多人在C++怎么实现打气球小游戏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”C++怎么实现打气球小游戏”的疑惑有所帮助！接下来，请跟着小编...
    99+
    2023-06-20
  • C++实现LeetCode(312.打气球游戏)
    [LeetCode] 312. Burst Balloons 打气球游戏 Given n balloons, indexed from 0 t...
    99+
    2024-04-02
  • C++如何实现打气球游戏
    这篇文章主要讲解了“C++如何实现打气球游戏”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“C++如何实现打气球游戏”吧！打气球游戏Example:Input:[3,1,5,8]Output:...
    99+
    2023-06-19
  • Pygame实战之实现扎气球游戏
    目录导语正文一、准备中二、代码演示三、效果展示导语 ​前几天，有人私信小编： 说陪女朋友在小广场上面逛街玩儿扎气球：结果一个都没扎破，扎心了老铁。 女朋友都要离家出走了~让我给想想办...
    99+
    2024-04-02
  • Pygame是如何实现扎气球游戏
    这期内容当中小编将会给大家带来有关Pygame是如何实现扎气球游戏，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。正文下面的扎气球小游戏原型就是路边的扎气球的游戏撒，基于Pygame做的！就准备好射的箭、不...
    99+
    2023-06-22
  • java实现弹球小游戏
    GUI实现弹球小游戏，供大家参考，具体内容如下 先看一下游戏效果图。 一个简单的Demo。也比较简单，新手试着做一做完善改进。 源代码 import Com.Style.Fo...
    99+
    2024-04-02
  • 如何用JavaScript模拟实现打字小游戏
    这篇“如何用JavaScript模拟实现打字小游戏”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看...
    99+
    2024-04-02
  • JavaScript怎样实现打字游戏
    这篇文章主要介绍了JavaScript怎样实现打字游戏，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。效果图：需求分析：在char这个div里面显示要输入的字母，大写2、在re...
    99+
    2023-06-06
  • JS实现简单打砖块弹球小游戏
    本文实例为大家分享了JS实现打砖块弹球小游戏的具体代码，供大家参考，具体内容如下 使用原生JS写的，还有一点瑕疵。代码直接复制到html就能使用 速度随机的 因为设涉及横向和纵向速度...
    99+
    2024-04-02
  • html5实现弹跳球小游戏
    这篇文章主要介绍“html5实现弹跳球小游戏”，在日常操作中，相信很多人在html5实现弹跳球小游戏问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5实现弹跳球小游戏”...
    99+
    2024-04-02
  • jQuery实现弹弹球小游戏
    本文实例为大家分享了jQuery实现弹弹球小游戏的具体代码，供大家参考，具体内容如下 效果展示： CSS样式： #box { width: 600px; ...
    99+
    2024-04-02
  • 用python实现弹球小游戏
    目录一、弹球游戏代码 二、程序结果 总结一、弹球游戏代码  下文是tkinter的应用实例，实现弹球游戏，通过<--和-->件移动平板接球。...
    99+
    2024-04-02
  • javaScript实现网页版的弹球游戏
    利用javeScript对象以及方法实现的网页弹球游戏，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> ...
    99+
    2024-04-02
  • Unity实现弹球打砖块游戏
    本文实例为大家分享了Unity实现弹球打砖块游戏的具体代码，供大家参考，具体内容如下 创作界面记录 摄像机 所需脚本 1射线shexian using System.Collect...
    99+
    2024-04-02
  • C++实现简易的弹球小游戏
    本文实例为大家分享了C++实现弹球小游戏的具体代码，供大家参考，具体内容如下 操作说明：键盘A和D键控制左右移动，让球不要落下。 #include <graphics.h&...
    99+
    2024-04-02
  • python中的pygame实现接球小游戏
    目录一、介绍模块1、Pygame和sys模块2、random模块二、相关功能1、窗口尺寸改变2、键盘控制挡板3、鼠标控制4、挡板接住小球并得分5、小球未接住小球6、小球移动7、显示分...
    99+
    2024-04-02
  • pygame实现滑块接小球游戏
    用pygame做一个滑块接小球的游戏，供大家参考，具体内容如下 先上图 游戏很简单也很弱智，主要用到了pygame画圆，画方块，随机数等，可以锻炼基本的鼠标控制，游戏设计思维，简单...
    99+
    2024-04-02
  • JavaScript实现猜数字小游戏的方法
    小编给大家分享一下JavaScript实现猜数字小游戏的方法，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！JavaScript可以做什么1.可以使网页具有交互性，例如响应用户点击，给用户提供更好的体验。2.可以处理表单，检...
    99+
    2023-06-14
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作