js实现金山打字通小游戏

本文实例为大家分享了js实现金山打字通小游戏的具体代码，供大家参考，具体内容如下

字母匀速随机下落，键盘按下对应字母按键，字母消失重新生成新字母，新字母可帮助回调一部分初始高度

效果

1.页面内容

列表内放字母

 

 
A
 

**

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

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.源码


 
 
 
 
 *{
 padding: 0;
 margin: 0;
 }
 #box li{
 list-style: none;
 font-size: 100px;
 }
 
 #box{
 position: absolute;
 top: 0;
 left: 0;
 }
 
 
 

 

 

 
A
 
 
 
 


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。