溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

JavaScript怎么實(shí)現(xiàn)氣球打字游戲

發(fā)布時(shí)間：2022-04-06 14:02:54 來(lái)源：億速云 閱讀：160 作者：iii 欄目：開(kāi)發(fā)技術(shù)

這篇文章主要介紹“JavaScript怎么實(shí)現(xiàn)氣球打字游戲”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“JavaScript怎么實(shí)現(xiàn)氣球打字游戲”文章能幫助大家解決問(wèn)題。

    一、實(shí)現(xiàn)效果

    JavaScript怎么實(shí)現(xiàn)氣球打字游戲

    1、定義球的類

    氣球類中我們需要對(duì)26個(gè)字符進(jìn)行處理

    this.arr = "abcdefghijklmnopqrstuvwxyz".split("");

    生成一個(gè)隨機(jī)字母

    this.index = parseInt(Math.random() * this.arr.length);
// 定義隨機(jī)字符
this.str = this.arr[this.index];

    生成一個(gè)div標(biāo)簽并對(duì)圖片進(jìn)行處理

    // 元素屬性
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);

    關(guān)于樣式的處理操作

    // 設(shè)置樣式
this.setStyle = function() {
// 設(shè)置元素定位
this.dom.style.position = "absolute";
this.dom.style.left = 0;
// 設(shè)置元素的內(nèi)部文本
this.dom.innerHTML = this.str;
// 設(shè)置文本樣式
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";
// 設(shè)置元素的寬度和高度
this.dom.style.width = this.width + "px";
this.dom.style.height = this.height + "px";
// 設(shè)置元素背景圖片
this.dom.style.backgroundImage = "url(" + this.img.src + ")";
// 設(shè)置元素的背景定位
this.dom.style.backgroundPositionX = -this.width * this.positionX + "px";
this.dom.style.backgroundPositionY = -this.height * this.positionY + "px";
}

    定義一個(gè)上樹(shù)的方法

    // 上樹(shù)方法
this.upTree = function() {
document.body.appendChild(this.dom);
}

    我們需要檢測(cè)氣球是否到達(dá)瀏覽器邊緣

    // 檢測(cè)氣球是否到達(dá)邊界
this.check = function() {
// 判斷定位left值值是否到達(dá)別界
if (this.dom.offsetLeft >= document.documentElement.clientWidth - this.width) {
// 設(shè)置定位值
this.dom.style.left = document.documentElement.clientWidth - this.width + "px";
return true;
}
return false;
}

    定義一個(gè)下樹(shù)的方法

    // 下樹(shù)方法
this.boom = function() {
this.dom.parentNode.removeChild(this.dom);
}

    定義一個(gè)移動(dòng)的方法，其中的數(shù)字表示氣球移動(dòng)的速度

    // 移動(dòng)方法
this.move = function() {
this.dom.style.left = this.dom.offsetLeft + 5 + "px";
}

    定義初始化的方法并執(zhí)行

    // 定義初始化方法
this.init = function() {
this.setStyle();
this.upTree();
}
// 執(zhí)行init
this.init();

    創(chuàng)建圖片元素

    // 創(chuàng)建圖片元素
var img = document.createElement("img");
// 設(shè)置路徑
img.src = "images/balloon.jpg";

    氣球每隔多少時(shí)間生成一個(gè)，我們需要設(shè)置定時(shí)器以及氣球到達(dá)邊界的處理，其中代碼中的70表示每移動(dòng)70次創(chuàng)建一個(gè)氣球。

    // 定義數(shù)組
var arr = [];
// 定義定時(shí)器
var timer = null;
// 定義一個(gè)信號(hào)量
var count = 0;
// 添加事件
img.onload = function() {
// 初始化氣球?qū)ο?
var balloon = new Balloon(img);
// 第一個(gè)氣球也要放入數(shù)組中
arr.push(balloon);
// 賦值定時(shí)器
timer = setInterval(function() {
// 信號(hào)量++
count++;
// 判斷信號(hào)量
if (count % 70 === 0) {
// 氣球每移動(dòng)70次， 創(chuàng)建一個(gè)氣球
arr.push(new Balloon(img));
}
// 循環(huán)數(shù)組
for (var i = 0; i < arr.length; i++) {
// 調(diào)用move方法
arr[i].move();
// 調(diào)用check方法
var result = arr[i].check();
// 判斷是否到達(dá)別界
if (result) {
// 說(shuō)明氣球到達(dá)邊界了
// 將氣球從數(shù)組中移除
arr.splice(i, 1);
// 防止數(shù)組塌陷
i--;
// 清除并接觸邊界進(jìn)行彈窗
// clearInterval(this.timer)
// alert('游戲結(jié)束')
}
}
}, 20)

    最后就是我們?cè)跉馇蛭从|到邊緣時(shí)，通過(guò)鍵盤清除打出對(duì)應(yīng)的字母

    // 給document綁定鍵盤事件
document.onkeydown = function(e) {
// 獲取用戶按下的字符
var key = e.key;
// 拿著這個(gè)key與數(shù)組中每一個(gè)氣球?qū)ο蟮膕tr屬性值作比對(duì)，如果比對(duì)上了，就讓氣球從數(shù)組中移除并且從dom中移除

for (var i = 0; i < arr.length; i++) {
// 判斷
if (key.toLowerCase() === arr[i].str.toLowerCase()) {
// 調(diào)用boom方法
arr[i].boom();
// 移除當(dāng)前項(xiàng)
arr.splice(i, 1);
break;
}
}
}

    二、源碼倉(cāng)庫(kù)和效果

    <!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);
		// 定義隨機(jī)字符
		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);
		// 設(shè)置樣式
		this.setStyle = function() {
			// 設(shè)置元素定位
			this.dom.style.position = "absolute";
			this.dom.style.left = 0;
			// 設(shè)置元素的內(nèi)部文本
			this.dom.innerHTML = this.str;
			// 設(shè)置文本樣式
			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";
			// 設(shè)置元素的寬度和高度
			this.dom.style.width = this.width + "px";
			this.dom.style.height = this.height + "px";
			// 設(shè)置元素背景圖片
			this.dom.style.backgroundImage = "url(" + this.img.src + ")";
			// 設(shè)置元素的背景定位
			this.dom.style.backgroundPositionX = -this.width * this.positionX + "px";
			this.dom.style.backgroundPositionY = -this.height * this.positionY + "px";
		}
		// 上樹(shù)方法
		this.upTree = function() {
			document.body.appendChild(this.dom);
		}
		// 檢測(cè)氣球是否到達(dá)邊界
		this.check = function() {
			// 判斷定位left值值是否到達(dá)別界
			if (this.dom.offsetLeft >= document.documentElement.clientWidth - this.width) {
				// 設(shè)置定位值
				this.dom.style.left = document.documentElement.clientWidth - this.width + "px";
				return true;
			}
			return false;
		}
		// 下樹(shù)方法
		this.boom = function() {
			this.dom.parentNode.removeChild(this.dom);
		}
		// 移動(dòng)方法
		this.move = function() {
			this.dom.style.left = this.dom.offsetLeft + 5 + "px";
		}
		// 定義初始化方法
		this.init = function() {
			this.setStyle();
			this.upTree();
		}
		// 執(zhí)行init
		this.init();
	}

	// 創(chuàng)建圖片元素
	var img = document.createElement("img");
	// 設(shè)置路徑
	img.src = "images/balloon.jpg";

	// 定義數(shù)組
	var arr = [];
	// 定義定時(shí)器
	var timer = null;
	// 定義一個(gè)信號(hào)量
	var count = 0;
	// 添加事件
	img.onload = function() {
		// 初始化氣球?qū)ο?
		var balloon = new Balloon(img);
		// 第一個(gè)氣球也要放入數(shù)組中
		arr.push(balloon);
		// 賦值定時(shí)器
		timer = setInterval(function() {
			// 信號(hào)量++
			count++;
			// 判斷信號(hào)量
			if (count % 70 === 0) {
				// 氣球每移動(dòng)70次， 創(chuàng)建一個(gè)氣球
				arr.push(new Balloon(img));
			}
			// 循環(huán)數(shù)組
			for (var i = 0; i < arr.length; i++) {
				// 調(diào)用move方法
				arr[i].move();
				// 調(diào)用check方法
				var result = arr[i].check();
				// 判斷是否到達(dá)別界
				if (result) {
					// 說(shuō)明氣球到達(dá)邊界了
					// 將氣球從數(shù)組中移除
					arr.splice(i, 1);
					// 防止數(shù)組塌陷
					i--;
          // 清除并接觸邊界進(jìn)行彈窗
          // clearInterval(this.timer)
          // alert('游戲結(jié)束')
				}
			}
		}, 20)
	}


	// 給document綁定鍵盤事件
	document.onkeydown = function(e) {
		// 獲取用戶按下的字符
		var key = e.key;
		// 拿著這個(gè)key與數(shù)組中每一個(gè)氣球?qū)ο蟮膕tr屬性值作比對(duì)，如果比對(duì)上了，就讓氣球從數(shù)組中移除并且從dom中移除
		
		for (var i = 0; i < arr.length; i++) {
			// 判斷
			if (key.toLowerCase() === arr[i].str.toLowerCase()) {
				// 調(diào)用boom方法
				arr[i].boom();
				// 移除當(dāng)前項(xiàng)
				arr.splice(i, 1);
				break;
			}
		}
	}
	</script>
</body>
</html>

    效果：

    JavaScript怎么實(shí)現(xiàn)氣球打字游戲

    關(guān)于“JavaScript怎么實(shí)現(xiàn)氣球打字游戲”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

    向AI問(wèn)一下細(xì)節(jié)

    免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

    AI
    助
    手