JavaScript實(shí)現(xiàn)氣球打字的小游戲
一、實(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>效果:

到此這篇關(guān)于JavaScript實(shí)現(xiàn)氣球打字的小游戲的文章就介紹到這了,更多相關(guān)JavaScript氣球打字游戲內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
深入理解js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程,結(jié)合實(shí)例形式詳細(xì)分析了A*尋路算法的具體概念、原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
如何基于webpack創(chuàng)建plugin并發(fā)布npm包
webpack 插件是一個(gè)具有 apply 方法的 JavaScript 對(duì)象,apply 方法會(huì)被 webpack compiler 調(diào)用,并且在 整個(gè)編譯生命周期都可以訪問(wèn) compiler 對(duì)象,這篇文章主要介紹了基于webpack創(chuàng)建plugin并發(fā)布npm包,需要的朋友可以參考下2024-07-07
JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線圖
這篇文章主要介紹了JS繪圖Flot如何實(shí)現(xiàn)動(dòng)態(tài)可刷新曲線圖,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
JavaScript+HTML?實(shí)現(xiàn)網(wǎng)頁(yè)錄制音頻與下載
在這個(gè)數(shù)字化的時(shí)代,網(wǎng)頁(yè)端的音頻處理能力已經(jīng)成為一個(gè)非常熱門的需求,本文將詳細(xì)介紹如何利用 getUserMedia 和 MediaRecorder 這兩個(gè)強(qiáng)大的 API,實(shí)現(xiàn)網(wǎng)頁(yè)端音頻的錄制、處理和播放等功能,需要的朋友可以參考下2024-07-07
ES6學(xué)習(xí)教程之Map的常用方法總結(jié)
Map 是 ES6 中新增的一種數(shù)據(jù)結(jié)構(gòu),與 Set 一起添加,其實(shí)功能都差不多。下面這篇文章主要給大家總結(jié)介紹了關(guān)于ES6學(xué)習(xí)教程之Map的常用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08
javascript頁(yè)面動(dòng)態(tài)顯示時(shí)間變化示例代碼
頁(yè)面動(dòng)態(tài)顯示時(shí)間變化的方法有很多,本文為大家介紹下使用javascript的具體實(shí)現(xiàn),感興趣的朋友不要錯(cuò)過(guò)2013-12-12
Javascript前端UI框架Kit使用指南之kitjs事件管理
本文詳細(xì)介紹了Kitjs的事件管理功能,包括普通的Dom事件、Kit如何解決問(wèn)題、代碼解析、注銷事件等。需要的朋友可以參考下。2014-11-11

