欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年12月17日 09:21:36   作者:lishundi  
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)打字游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(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)文章

最新評(píng)論