JS實現(xiàn)打字游戲

更新時間：2019年12月17日 09:21:36 作者：lishundi

這篇文章主要為大家詳細介紹了JS實現(xiàn)打字游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JS實現(xiàn)打字游戲的具體代碼，供大家參考，具體內(nèi)容如下

第一步：頁面的排版和布局

1.1實現(xiàn)開始游戲的界面

1.1.1開始游戲

1.1.2游戲說明

<!--游戲開始的界面-->
 <div id="gameStart">
  <div id="start">開始</div>
  <div id="describe">說明</div>
  <div id="des">打字游戲介紹：點擊開始,進入游戲開始界面,
  通過點擊下落的字母可以獲得得分和正確率
  <span id="cl1">關(guān)閉</span>
  </div>
</div>

1.2進入游戲的界面

1.2.1開始按鈕-->游戲的暫停

1.2.2結(jié)束游戲-->清除掉所有字母元素的定時器,刪除字母元素

1.2.3退出游戲-->退出到游戲開始的界面

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)前事件的目標dom節(jié)點
  // if(target.className == "t"){
  //  gameStart.style.display = "block";
  //  game.style.display = "none";
  // }
  if(target.className =="set"){
   sel.style.display = "block";
  }
  // 進入游戲界面之后的開始游戲
  // 目標元素的className　＝＝　
  if(target.className =="s"){
   target.innerHTML = target.innerHTML == "開始"?"暫停":"開始";
   if(target.innerHTML == "開始"){
    operate.lastElementChild.style.cursor = "pointer";
    clearInterval(c);
    c = undefined;
    clearAllLetters();
   }else{
    //游戲的開始
    operate.lastElementChild.style.cursor = "not-allowed";
    //控制單位時間內(nèi)字母的多少的定時器
   c = setInterval(function () {
    createLetter();
    letterEles = document.getElementsByClassName("active");
   },level*1000);//控制顯示頁面字母的多少
    //暫停之后的開始游戲
    gameStar();
   }
  }
 // 處理結(jié)束游戲
  if(target.className == "f"){
   finished();
  }
 // 處理退出游戲
  if(target.className == "t"){
 
  // 首先處理結(jié)束游戲要做的事情
   finished();
  // 顯示游戲開始界面，隱藏進入游戲界面
   game.style.display = "none";
   gameStart.style.display = "block";
  }
 }

在對四個span即開始,設(shè)置,結(jié)束,退出加事件時用到了事件委托,事件委托有哪些好處呢?

事件委托一般用在對很多dom添加事件處理的情況中,比如:有100個li,每個li都有相同的onclick事件,我們一般會用for循環(huán)來遍歷所有的li,然后給它們添加事件.但這種方法要不斷與dom節(jié)點進行交互,訪問dom的次數(shù)越多,瀏覽器重繪和重排的次數(shù)也越多,就會延長整個頁面的交互就緒時間,事件委托的原理就是事件冒泡原理,即從最深的節(jié)點開始,一步一步向上傳播事件,比如,有一個dom樹,div>ul>li,要給li添加點擊事件,那么這個點擊事件會一層一層往外執(zhí)行,執(zhí)行到div上.使用事件委托的話,就可以對它的父級元素進行操作,與dom的操作只需交互一次,大大提高了性能,舉個例子吧:

<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,點擊li的時候,又要找到目標li的位置,才能執(zhí)行最后的操作,每次點擊都要找一次li.性能很低.

采用事件委托優(yōu)化的代碼:

window.onload() = function () {
 var ul = document.getElementById("cn");
 ul.onclick = function () { 
 alert('1220');
 }
}

此上代碼在點擊ul時也會觸發(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對象提供了一個target屬性,返回的是當(dāng)前事件的目標元素節(jié)點,這樣的話點擊ul就不會觸發(fā)onclick事件了.

第二步：實現(xiàn)開始游戲

2.1說明提示

2.2進入游戲界面

2.3游戲退出

2.4設(shè)置;>顯示選擇游戲難度

第三步：進入游戲界面之后的開始游戲

3.1點擊進入游戲,實現(xiàn)字母的掉落

3.2游戲開始之后,實現(xiàn)游戲的暫停

第四步：實現(xiàn)游戲的暫停

4.1清除定時器，清除單位時間內(nèi)掉落多少個字母的定時器

4.2清除字母掉落速度的定時器,每個字母元素都存在定時器

4.3結(jié)束游戲,清除4.1的定時器和刪除4.2所有字母所在的元素

4.4退出游戲,結(jié)束游戲,顯示游戲開始界面,影藏進入游戲界面

第五步：實現(xiàn)游戲難度的設(shè)置

5.1游戲的默認難度是慢

5.2游戲在進行過程中是不允許設(shè)置游戲難度的

5.3在游戲暫停和開始之前是允許設(shè)置游戲難度的

5.4游戲難度設(shè)置之后，在關(guān)閉游戲難度設(shè)置之后生效

第六步：實現(xiàn)鍵盤打字，字母消失

6.1全局變量：把當(dāng)前游戲界面里所有字符存放在該變量里

6.2根據(jù)鍵盤輸入的字符，在全局變量字符串里找到該字符的位置

6.3刪除該字符所在的元素

//evt代表的是事件對象
 document.onkeyup = function (evt) {
  var e = evt || window.event;
  var codeVal = e.keyCode;
  // e.keyCode獲得鍵盤碼
  if(codeVal >= 65 && codeVal <= 90){
   count++;
  }
  // 根據(jù)Unicode編碼找到對應(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) + "%";
  }
  }
 }

以上實現(xiàn)鍵盤打字,字母消失的代碼的主要過程是:

通過e.keyCode獲得鍵盤碼,通過鍵盤碼找到對應(yīng)字符,然后用正則表達式的eval方法對找到的字符進行計算,用search方法匹配到當(dāng)前目標元素節(jié)點距離字符串開始位置的偏移位置.把它從父節(jié)點里刪掉,還要將letters里的目標元素節(jié)點刪掉,即用空格代替.每打?qū)σ蛔值靡环?分數(shù)/鍵盤按下次數(shù)即為正確率.

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: