js如何實(shí)現(xiàn)金山打字通小游戲

發(fā)布時間：2020-07-27 09:26:43 來源：億速云閱讀：169 作者：小豬欄目：開發(fā)技術(shù)

這篇文章主要為大家展示了js如何實(shí)現(xiàn)金山打字通小游戲，內(nèi)容簡而易懂，希望大家可以學(xué)習(xí)一下，學(xué)習(xí)完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。

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

字母勻速隨機(jī)下落，鍵盤按下對應(yīng)字母按鍵，字母消失重新生成新字母，新字母可幫助回調(diào)一部分初始高度

效果

js如何實(shí)現(xiàn)金山打字通小游戲

1.頁面內(nèi)容

列表內(nèi)放字母

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

2.頁面樣式
**

1）清除li園標(biāo)
2）確定列表位置，為字母隨機(jī)位置下降準(zhǔn)備

*{
 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.獲得按下的鍵盤碼并轉(zhuǎn)換為對應(yīng)按鍵

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

4.遍歷獲得列表內(nèi)容對比

1）循環(huán)li標(biāo)簽

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

2）內(nèi)容對比

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

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

box.removeChild(list[i]);

5.清除字母后重新生成新的隨機(jī)字母

1）在字母表中獲得隨機(jī)字母

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

2）將隨機(jī)字母加入li中

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

3）給新li進(jìn)行賦值

new_list.innerHTML=all[num];

4）將新li加入ul中

box.appendChild(new_list);

6.定時字母下落

1）設(shè)置定時器

var time=setInterval(function(){ }，1000）

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

7.新字母的位置隨機(jī)生成

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

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;
// 獲得按下的按鍵并轉(zhuǎn)換為對應(yīng)按鍵
 var key=String.fromCharCode(ev.keyCode);
 var list=document.getElementById("box").getElementsByTagName('li');
// 循環(huán)li標(biāo)簽,將按鍵與標(biāo)簽內(nèi)容進(jìn)行對比
 for(var i=0;i<list.length;i++){
// 內(nèi)容對比,內(nè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);
//  將隨機(jī)字母加入li中  
  var new_list=document.createElement('li');
//  給新li進(jìn)行賦值
  new_list.innerHTML=all[num];
//  將新li加入ul中
  box.appendChild(new_list);
  }
 }
 
 }
 
// 定時器保證下落速度
 var time=setInterval(function(){
// 獲取ul的老位置
 var old_top=box.offsetTop;
// 計(jì)算ul的新位置
 var new_top=old_top+2;
// 將新值賦值回去
 box.style.top=new_top+"px";
 },15)
 
 </script>
 </body>
</html>

以上就是關(guān)于js如何實(shí)現(xiàn)金山打字通小游戲的內(nèi)容，如果你們有學(xué)習(xí)到知識或者技能，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

js如何實(shí)現(xiàn)金山打字通小游戲

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽