金山打字小游戲(js如何實現金山打字通小游戲)

來源：互聯網轉載時間：2024-05-08 05:54:00

本文實例為大家分享了js實現金山打字通小游戲的具體代碼,供大家參考,具體內容如下

字母勻速隨機下落,鍵盤按下對應字母按鍵,字母消失重新生成新字母,新字母可幫助回調一部分初始高度

效果

1.頁面內容

列表內放字母

<ul id="box"> <li></li> <li>A</li> </ul>

2.頁面樣式
**

1)清除li園標
2)確定列表位置,為字母隨機位置下降準備

*{ padding: 0; margin: 0; } #box li{ list-style: none; font-size: 100px; } /*確定位置便于下降*/ #box{ position: absolute; top: 0; left: 0; }

3.判斷按的按鍵

1、鍵盤按鍵按下事件

window.onkeydown=function(e){ }

2、獲得兼容性對象

var ev=window.event||e;

3.獲得按下的鍵盤碼并轉換為對應按鍵

var key=String.fromCharCode(ev.keyCode);

4.遍歷獲得列表內容對比

1)循環li標簽

for(var i=0;i<list.length;i++){ }

2)內容對比

if(list[i].innerHTML==key){  }

3)相同則刪除頁面上顯示的字母

box.removeChild(list[i]);

5.清除字母后重新生成新的隨機字母

1)在字母表中獲得隨機字母

var num=Math.floor(Math.random()*(all.length-1+1-0)+0);

2)將隨機字母加入li中

var new_list=document.createElement('li');

3)給新li進行賦值

new_list.innerHTML=all[num];

4)將新li加入ul中

box.appendChild(new_list);

6.定時字母下落

1)設置定時器

var time=setInterval(function(){ },1000)

2)方法參考浮動廣告博文

7.新字母的位置隨機生成

1)消除成功后高度向上縮一部分
2)左右利用隨機數生成

var left=Math.floor(Math.random()*(1000-1+1-0)+0); box.style.left=left+"px";

8.源碼

<html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin: 0; } #box li{ list-style: none; font-size: 100px; } /*確定位置便于下降*/ #box{ position: absolute; top: 0; left: 0; } </style> </head> <body> <ul id="box"> <li></li> <li>A</li> </ul>  <script> var p=document.getElementById("p"); var new_box=document.getElementById("new_box"); var box=document.getElementById("box"); var all='ABCDEFGHIJQLMEOPQRSTUVWXYZ'; window.onkeydown=function(e){// 獲得兼容性對象 var ev=window.event||e;// 獲得按下的按鍵并轉換為對應按鍵 var key=String.fromCharCode(ev.keyCode); var list=document.getElementById("box").getElementsByTagName('li');// 循環li標簽,將按鍵與標簽內容進行對比 for(var i=0;i<list.length;i++){// 內容對比,內容相同則刪除頁面上顯示的字母  if(list[i].innerHTML==key){  box.removeChild(list[i]);  var p_old_top=box.offsetTop;  var p_new_top=p_old_top-150;  box.style.top=p_new_top+"px";  var left=Math.floor(Math.random()*(1000-1+1-0)+0);  box.style.left=left+"px";  var num=Math.floor(Math.random()*(all.length-1+1-0)+0);//  將隨機字母加入li中    var new_list=document.createElement('li');//  給新li進行賦值  new_list.innerHTML=all[num];//  將新li加入ul中  box.appendChild(new_list);  } }  } // 定時器保證下落速度 var time=setInterval(function(){// 獲取ul的老位置 var old_top=box.offsetTop;// 計算ul的新位置 var new_top=old_top+2;// 將新值賦值回去 box.style.top=new_top+"px"; },15)  </script> </body></html>

以上就是關于js如何實現金山打字通小游戲的內容,如果你們有學習到知識或者技能,可以把它分享出去讓更多的人看到。

本文由 貴州做網站公司 整理發布，部分圖文來源于互聯網，如有侵權，請聯系我們刪除，謝謝！

標簽：金山打字小游戲-

上一篇：免備案虛擬主機(什么是免備案虛擬主機)

下一篇：CONNECTION_RESET(Connection reset具體的解決方案)

網站建設網站推廣 SEO 網站運營網絡營銷

c語言中正確的字符常量是什么

2024-12-15

c語言中正確的字符常量是用一對單引號將一個字符括起表示合法的字符常量。例如‘a’。數值包括整型、浮點型。整型可用十進制，八進制，十六進制。八進制前面要加0，后面...

天津專升本最新信息2022年

2024-12-15

2022年天津專場考試原定于3月19日舉行，受疫情影響確定延期，但目前延期后的考試時間推遲。符合報名條件的考生，須在規定時間登錄招考資訊網(www.zha...

喜聞樂見的意思是

2024-12-15

：喜歡聽，樂意看。指很受歡迎?！巴卣官Y料”喜聞樂見：[ xǐ wén lè jiàn ]詳細解釋1. 【解釋】：喜歡聽，樂意看。指很受歡迎。2. 【示例】：這是...

《千金女賊》你看過嗎？《千金女賊》劉愷威唐嫣吻戲在哪一集？

2023-09-03

(相關資料圖)關于千金女賊劉愷威唐嫣吻戲在哪一集的知識大家了解嗎？以下就是小編整理的關于千金女賊劉愷威唐嫣吻戲在哪一集的介紹，希望可以給到大家一些參考，一起來了解下吧！1、千金女賊劉愷威唐嫣吻戲是在15集。2、該劇講述了1930年的上海租界，蔣心是即將認親的名門千金，而杜小寒是冒死逃獄的女賊，女賊躍上枝頭變鳳凰，本來的千金，卻碾轉變成白幫幫主白正擎的女人。3、劇中唐嫣飾演蔣心，即將認親的名門千金，...

全能格斗士(ufc4手游最新版本下載)

2023-08-31

如今，MMA(綜合格斗)在很多格斗比賽中逐漸流行起來。作為一項各種踢、打、摔、抓，規則極其開放的格斗賽事，可以說是最接近街頭徒手無規則的較量?？梢哉f，MMA的徒手格斗能力幾乎是其他項目無法比擬的，因為它足夠全面，技巧豐富。當然，要達到專業水平還是需要大量艱苦的訓練。說到MMA，就不得不說UFC了。UFC是世界上最強大的MMA賽事，無數頂尖選手誕生于此。網上有句話叫“能進UFC的拳手都不是普通人”，...

《雪中悍刀行》講的是什么？《雪中悍刀行》初始版內容是什么？

2023-09-03

(資料圖)關于雪中悍刀行講的是什么的知識大家了解嗎？以下就是小編整理的關于雪中悍刀行講的是什么的介紹，希望可以給到大家一些參考，一起來了解下吧！1、該小說講述一個關于廟堂權爭與刀劍交錯的時代，一個暗潮涌動粉墨登場的江湖。2、初始版內容：有個白狐兒臉，佩雙刀繡冬春雷，要做那天下第一；湖底有白發老魁愛吃葷；缺門牙老仆背劍匣；山上有個騎青牛的年輕師叔祖，不敢下山；有個騎大貓扛向日葵不太冷的少女殺手。3、...