js如何实现金山打字通小游戏 - 行业资讯 - 肥雀云

　　介绍

这篇文章主要为大家展示了js如何实现金山打字通小游戏,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

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

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

效果

<强> 1。页面内容

列表内放字母

& lt; ul id=癰ox"比; 　　& lt; li> & lt;/li> 　　& lt; li> A 　　& lt;/ul> * *

<强> 2。页面样式
* *

1)清除李园标
2)确定列表位置,为字母随机位置下降准备

* { 　　填充:0; 　　保证金:0; 　　} 　　李#箱{ 　　list-style:没有; 　　字体大小:100 px; 　　}/*确定位置便于下降*/#箱{ 　　位置:绝对的; 　　上图:0; 　　左:0; 　　}

<强> 3。判断按的按键

1,键盘按键按下事件

window.onkeydown=function (e) {}

2,获得兼容性对象

 var ev=window.event | | e;

3。获得按下的键盘码并转换为对应按键

 var关键=String.fromCharCode (ev.keyCode);

<强> 4 .遍历获得列表内容对比

1)循环李标签

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

2)内容对比

如果(列表[我].innerHTML==键){}

3)相同则删除页面上显示的字母

box.removeChild(列表[我]);

<强> 5。清除字母后重新生成新的随机字母

1)在字母表中获得随机字母

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

2)将随机字母加入李中

var new_list=document.createElement(& # 39;李# 39;);

3)给新李进行赋值

new_list.innerHTML=(num);

4)将新李加入ul中

box.appendChild (new_list);

<强> 6。定时字母下落

1)设置定时器

 var时间=setInterval(函数(){},1000)

2)方法参考浮动广告博文

<强> 7。新字母的位置随机生成

1)消除成功后高度向上缩一部分
2)左右利用随机数生成

  <强> 8。源码 
  & lt; html>
　　& lt; head>
　　& lt;元charset=癠TF-8"祝辞
　　& lt; title> & lt;/title>
　　& lt; style>
　　* {
　　填充:0;
　　保证金:0;
　　}
　　李#箱{
　　list-style:没有;
　　字体大小:100 px;
　　}/*确定位置便于下降*/#箱{
　　位置:绝对的;
　　上图:0;
　　左:0;
　　}
　　& lt;/style>
　　& lt;/head>
　　& lt; body>
　　
　　& lt; ul id=癰ox"祝辞
　　& lt; li> & lt;/li>
　　& lt; li> A
　　& lt;/ul>
　　
　　& lt; script>
　　var p=. getelementbyid (“p");
　　var new_box=. getelementbyid (“new_box");
　　var盒=. getelementbyid (“box");
　　var=& # 39; ABCDEFGHIJQLMEOPQRSTUVWXYZ& # 39;;
　　window.onkeydown=function (e) {//获得兼容性对象
　　var ev=window.event | | e;//获得按下的按键并转换为对应按键
　　var关键=String.fromCharCode (ev.keyCode);
　　var=. getelementbyid (“box") .getElementsByTagName列表(& # 39;李# 39;);//循环李标签,将按键与标签内容进行对比
　　我(var=0; i< list.length;我+ +){//内容对比,内容相同则删除页面上显示的字母
　　如果(列表[我].innerHTML==键){
　　box.removeChild(列表[我]);
　　var p_old_top=box.offsetTop;
　　var p_new_top=p_old_top - 150;
　　box.style.top=p_new_top +“px";
　　var左=Math.floor (math . random () * (1000 - 1 + 1 - 0) + 0);
　　box.style.left=左+“px";
　　var num=Math.floor (math . random () * (all.length-1 + 1 - 0) + 0);//将随机字母加入李中
　　var new_list=document.createElement(& # 39;李# 39;);//给新李进行赋值
　　new_list.innerHTML=(num);//将新李加入ul中
　　box.appendChild (new_list);
　　}
　　}
　　
　　}//定时器保证下落速度
　　var时间=setInterval(函数(){//获取ul的老位置
　　var old_top=box.offsetTop;//计算ul的新位置
　　var new_top=old_top + 2;//将新值赋值回去
　　box.style.top=new_top +“px";
　　},15)
　　
　　& lt;/script>
　　& lt;/body>
　　& lt;/html> js如何实现金山打字通小游戏