JavaScript實現氣球打字的小游戲
更新時間：2022年04月02日 17:19:48 作者：公眾號_前端每日技巧
這篇文章主要介紹了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";
}定義初始化的方法并執(zhí)行
// 定義初始化方法
this.init = function() {
this.setStyle();
this.upTree();
}
// 執(zhí)行init
this.init();創(chuàng)建圖片元素
// 創(chuàng)建圖片元素
var img = document.createElement("img");
// 設置路徑
img.src = "images/balloon.jpg";氣球每隔多少時間生成一個，我們需要設置定時器以及氣球到達邊界的處理，其中代碼中的??70??表示每移動70次創(chuàng)建一個氣球。
// 定義數組
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次， 創(chuàng)建一個氣球
arr.push(new Balloon(img));
}
// 循環(huán)數組
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();
}
// 執(zhí)行init
this.init();
}
// 創(chuàng)建圖片元素
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次， 創(chuàng)建一個氣球
arr.push(new Balloon(img));
}
// 循環(huán)數組
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氣球打字游戲內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了JS實現六位字符密碼輸入器功能,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
最近小編在做一個項目，其中涉及到一個模塊關于星座查詢功能，即在文本框中輸入一個生日值，點擊按鈕可以得到對應的星座，怎么實現這個需求呢？下面小編通過示例代碼給大家介紹下，需要的朋友參考下吧2021-11-11
這篇文章主要為大家詳細介紹了uniapp實現日期時間選擇器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript中l(wèi)ayer關閉指定彈出窗口方法總結
這篇文章主要給大家介紹了關于JavaScript中l(wèi)ayer關閉指定彈出窗口方法的相關資料,layer是layui的一個彈出層組件,但是可以作為獨立組件使用,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了js實現點擊圖片改變頁面背景圖的方法,實例分析了javascript操作css與圖片的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02
原生JS利用transform實現banner的無限滾動示例代碼
這篇文章主要介紹了原生JS利用transform實現banner的無限滾動示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-06-06
我們在編寫 JS 代碼時,經常會遇到邏輯判斷復雜的情況,這篇文章主要給大家介紹了關于JavaScript如何優(yōu)化邏輯判斷代碼的相關資料,需要的朋友可以參考下2021-06-06
本篇文章主要介紹了鼠標經過tr時,改變tr當前背景顏色的示例代碼，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
解析JavaScript中 querySelector 與 getElementById 方法的區(qū)別
這篇文章主要介紹了JavaScript中 querySelector 與 getElementById 方法的區(qū)別,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-10-10
這篇文章主要為大家詳細介紹了微信小程序實現跟隨菜單效果和循環(huán)嵌套加載數據，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11