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

更新時間：2020年07月24日 10:21:05 作者：不要生病~

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

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

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

效果

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;
// 計算ul的新位置
 var new_top=old_top+2;
// 將新值賦值回去
 box.style.top=new_top+"px";
 },15)
 
 </script>
 </body>
</html>

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

您可能感興趣的文章: