用JS如何制作一个气球打字游戏

时间2024-03-27 16:42:03发布访客分类其他前端知识浏览1252

导读：这篇文章主要给大家介绍“用JS如何制作一个气球打字游戏”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“用JS如何制作一个气球打字游戏”文章能对大家有所帮助。...

这篇文章主要给大家介绍“用JS如何制作一个气球打字游戏”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“用JS如何制作一个气球打字游戏”文章能对大家有所帮助。

一、实现效果

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>

效果：

关于“用JS如何制作一个气球打字游戏”的内容就介绍到这，感谢各位的阅读，相信大家对用JS如何制作一个气球打字游戏已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

JavaScript 实现游戏

若转载请注明出处：用JS如何制作一个气球打字游戏
本文地址： https://pptw.com/jishu/654346.html

用原生JS怎么样写一个计算器在java中输入输出语句的方法是什么