JS實(shí)現(xiàn)打字游戲
本文實(shí)例為大家分享了JS實(shí)現(xiàn)打字游戲的具體代碼,供大家參考,具體內(nèi)容如下
第一步:頁(yè)面的排版和布局
1.1實(shí)現(xiàn)開(kāi)始游戲的界面
1.1.1開(kāi)始游戲
1.1.2游戲說(shuō)明
<!--游戲開(kāi)始的界面--> <div id="gameStart"> <div id="start">開(kāi)始</div> <div id="describe">說(shuō)明</div> <div id="des">打字游戲介紹:點(diǎn)擊開(kāi)始,進(jìn)入游戲開(kāi)始界面, 通過(guò)點(diǎn)擊下落的字母可以獲得得分和正確率 <span id="cl1">關(guān)閉</span> </div> </div>
1.2進(jìn)入游戲的界面
1.2.1開(kāi)始按鈕-->游戲的暫停
1.2.2結(jié)束游戲-->清除掉所有字母元素的定時(shí)器,刪除字母元素
1.2.3退出游戲-->退出到游戲開(kāi)始的界面
1.2.4設(shè)置-->設(shè)置當(dāng)前游戲的難度
1.2.5打字得分-->每打?qū)σ蛔郑靡环?/p>
1.2.6打字正確率
operate.onclick = function (evt) { var e = evt || window.event; var target = e.srcElement || e.target; // target:當(dāng)前事件的目標(biāo)dom節(jié)點(diǎn) // if(target.className == "t"){ // gameStart.style.display = "block"; // game.style.display = "none"; // } if(target.className =="set"){ sel.style.display = "block"; } // 進(jìn)入游戲界面之后的開(kāi)始游戲 // 目標(biāo)元素的className?。剑健? if(target.className =="s"){ target.innerHTML = target.innerHTML == "開(kāi)始"?"暫停":"開(kāi)始"; if(target.innerHTML == "開(kāi)始"){ operate.lastElementChild.style.cursor = "pointer"; clearInterval(c); c = undefined; clearAllLetters(); }else{ //游戲的開(kāi)始 operate.lastElementChild.style.cursor = "not-allowed"; //控制單位時(shí)間內(nèi)字母的多少的定時(shí)器 c = setInterval(function () { createLetter(); letterEles = document.getElementsByClassName("active"); },level*1000);//控制顯示頁(yè)面字母的多少 //暫停之后的開(kāi)始游戲 gameStar(); } } // 處理結(jié)束游戲 if(target.className == "f"){ finished(); } // 處理退出游戲 if(target.className == "t"){ // 首先處理結(jié)束游戲要做的事情 finished(); // 顯示游戲開(kāi)始界面,隱藏進(jìn)入游戲界面 game.style.display = "none"; gameStart.style.display = "block"; } }
在對(duì)四個(gè)span即開(kāi)始,設(shè)置,結(jié)束,退出加事件時(shí)用到了事件委托,事件委托有哪些好處呢?
事件委托一般用在對(duì)很多dom添加事件處理的情況中,比如:有100個(gè)li,每個(gè)li都有相同的onclick事件,我們一般會(huì)用for循環(huán)來(lái)遍歷所有的li,然后給它們添加事件.但這種方法要不斷與dom節(jié)點(diǎn)進(jìn)行交互,訪問(wèn)dom的次數(shù)越多,瀏覽器重繪和重排的次數(shù)也越多,就會(huì)延長(zhǎng)整個(gè)頁(yè)面的交互就緒時(shí)間,事件委托的原理就是事件冒泡原理,即從最深的節(jié)點(diǎn)開(kāi)始,一步一步向上傳播事件,比如,有一個(gè)dom樹(shù),div>ul>li,要給li添加點(diǎn)擊事件,那么這個(gè)點(diǎn)擊事件會(huì)一層一層往外執(zhí)行,執(zhí)行到div上.使用事件委托的話,就可以對(duì)它的父級(jí)元素進(jìn)行操作,與dom的操作只需交互一次,大大提高了性能,舉個(gè)例子吧:
<ul id="cn"> <li>qwe</li> <li>q2w</li> <li>wee</li> <li>eer</li> <li>ewe</li> </ul>
window.onload() = function () { var ul = document.getElementById("cn"); var li = ul.getElementsByTagName('li'); for(int i = 0;i < li.length;i++){ alert(1212); } }
首先找到ul,然后遍歷li,點(diǎn)擊li的時(shí)候,又要找到目標(biāo)li的位置,才能執(zhí)行最后的操作,每次點(diǎn)擊都要找一次li.性能很低.
采用事件委托優(yōu)化的代碼:
window.onload() = function () { var ul = document.getElementById("cn"); ul.onclick = function () { alert('1220'); } }
此上代碼在點(diǎn)擊ul時(shí)也會(huì)觸發(fā)onclick事件,所以不是最終優(yōu)化的代碼.
最終優(yōu)化的代碼:
window.onload() = function () { var ul = document.getElementById("cn"); ul.onclick = function (evt) { var e = evt || window.event; var target = e.target || e.srcElement; if(target.nodeName == 'li'){ alert('1220'); } } }
event對(duì)象提供了一個(gè)target屬性,返回的是當(dāng)前事件的目標(biāo)元素節(jié)點(diǎn),這樣的話點(diǎn)擊ul就不會(huì)觸發(fā)onclick事件了.
第二步:實(shí)現(xiàn)開(kāi)始游戲
2.1說(shuō)明提示
2.2進(jìn)入游戲界面
2.3游戲退出
2.4設(shè)置;>顯示選擇游戲難度
第三步:進(jìn)入游戲界面之后的開(kāi)始游戲
3.1點(diǎn)擊進(jìn)入游戲,實(shí)現(xiàn)字母的掉落
3.2游戲開(kāi)始之后,實(shí)現(xiàn)游戲的暫停
第四步:實(shí)現(xiàn)游戲的暫停
4.1清除定時(shí)器,清除單位時(shí)間內(nèi)掉落多少個(gè)字母的定時(shí)器
4.2清除字母掉落速度的定時(shí)器,每個(gè)字母元素都存在定時(shí)器
4.3結(jié)束游戲,清除4.1的定時(shí)器和刪除4.2所有字母所在的元素
4.4退出游戲,結(jié)束游戲,顯示游戲開(kāi)始界面,影藏進(jìn)入游戲界面
第五步:實(shí)現(xiàn)游戲難度的設(shè)置
5.1游戲的默認(rèn)難度是慢
5.2游戲在進(jìn)行過(guò)程中是不允許設(shè)置游戲難度的
5.3在游戲暫停和開(kāi)始之前是允許設(shè)置游戲難度的
5.4游戲難度設(shè)置之后,在關(guān)閉游戲難度設(shè)置之后生效
第六步:實(shí)現(xiàn)鍵盤(pán)打字,字母消失
6.1全局變量:把當(dāng)前游戲界面里所有字符存放在該變量里
6.2根據(jù)鍵盤(pán)輸入的字符,在全局變量字符串里找到該字符的位置
6.3刪除該字符所在的元素
//evt代表的是事件對(duì)象 document.onkeyup = function (evt) { var e = evt || window.event; var codeVal = e.keyCode; // e.keyCode獲得鍵盤(pán)碼 if(codeVal >= 65 && codeVal <= 90){ count++; } // 根據(jù)Unicode編碼找到對(duì)應(yīng)字符 var char = keyVal[codeVal]; if(char){ var index = letters.search(eval("/" + char + "/gi")); // var index = letters.search(char); if(index != -1) { game.removeChild(letterEles[index]); var exp = eval("/" + char + "/gi"); letters = letters.replace(exp, ""); // letters = letters.replace(char,""); tit.children[0].firstElementChild.innerHTML = ++score; tit.children[1].firstElementChild.innerHTML = (score/count*100).toFixed(2) + "%"; } } }
以上實(shí)現(xiàn)鍵盤(pán)打字,字母消失的代碼的主要過(guò)程是:
通過(guò)e.keyCode獲得鍵盤(pán)碼,通過(guò)鍵盤(pán)碼找到對(duì)應(yīng)字符,然后用正則表達(dá)式的eval方法對(duì)找到的字符進(jìn)行計(jì)算,用search方法匹配到當(dāng)前目標(biāo)元素節(jié)點(diǎn)距離字符串開(kāi)始位置的偏移位置.把它從父節(jié)點(diǎn)里刪掉,還要將letters里的目標(biāo)元素節(jié)點(diǎn)刪掉,即用空格代替.每打?qū)σ蛔值靡环?分?jǐn)?shù)/鍵盤(pán)按下次數(shù)即為正確率.
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
echarts中X軸顯示特定個(gè)數(shù)label并修改樣式的方法詳解
最近在使用Echarts圖表遇到些特別的需求,想著給大家整理下,所以下面這篇文章主要給大家介紹了關(guān)于echarts中X軸顯示特定個(gè)數(shù)label并修改樣式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07js實(shí)現(xiàn)頁(yè)面多個(gè)日期時(shí)間倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)頁(yè)面多個(gè)日期時(shí)間倒計(jì)時(shí)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-06-06原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例
圖片懶加載也是比較常見(jiàn)的一種性能優(yōu)化的方法,本篇文章主要介紹了原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例,這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下2017-06-06JavaScript中使用webuploader實(shí)現(xiàn)上傳視頻功能(demo)
這篇文章主要介紹了webuploader實(shí)現(xiàn)上傳視頻功能,通過(guò)本文給大家介紹了上傳視頻和上傳圖片的區(qū)別講解,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-04-04javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa
這篇文章主要介紹了javascript實(shí)現(xiàn)了照片拖拽點(diǎn)擊置頂?shù)恼掌瑝Υa,效果非常不錯(cuò),這里推薦給大家,有需要的小伙伴可以參考下。2015-04-04antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12基于javascript實(shí)現(xiàn)圖片滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了基于javascript實(shí)現(xiàn)圖片滑動(dòng)效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的朋友可以參考一下2016-05-05