js实现金山打字通小游戏


Posted in Javascript onJuly 24, 2020

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

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

效果

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
Jun 05 Javascript
原生js和jQuery实现淡入淡出轮播效果
Dec 25 Javascript
基于BootStrap环境写jQuery tabs插件
Jul 12 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
使用jQuery 操作table 完成单元格合并的实例
Dec 27 jQuery
vue 扩展现有组件的操作
Aug 14 Javascript
JavaScript 中for/of,for/in 的详细介绍
Nov 17 Javascript
vuex中store存储store.commit和store.dispatch的用法
Jul 24 #Javascript
js实现滑动滑块验证登录
Jul 24 #Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 #Javascript
对vuex中store和$store的区别说明
Jul 24 #Javascript
小程序实现简单语音聊天的示例代码
Jul 24 #Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 #Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 #Javascript
You might like
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
用sql命令修改数据表中的一个字段为非空(not null)的语句
2010/06/04 PHP
php 模拟POST|GET操作实现代码
2010/07/20 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
关于Laravel Route重定向的一个注意点
2017/01/16 PHP
JQuery 风格的HTML文本转义
2009/07/01 Javascript
jquery tools 系列 scrollable学习
2009/09/06 Javascript
JavaScript 10件让人费解的事情
2010/02/15 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
动态创建样式表在各浏览器中的差异测试代码
2011/09/13 Javascript
window.event快达到全浏览器支持了,以后使用就方便了
2011/11/30 Javascript
js获得鼠标的坐标值的方法
2013/03/13 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
Bootstrap Search Suggest使用例子
2016/12/21 Javascript
vuejs响应用户事件(如点击事件)
2017/03/14 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
Vue中引入样式文件的方法
2017/08/18 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
[36:29]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 LGD vs TNC
2018/04/02 DOTA
python绘制条形图方法代码详解
2017/12/19 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
Keras搭建自编码器操作
2020/07/03 Python
关于python3.7安装matplotlib始终无法成功的问题的解决
2020/07/28 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
HTML5 Video/Audio播放本地文件示例介绍
2013/11/18 HTML / CSS
PacSun官网:加州生活方式服装、鞋子和配饰
2018/03/10 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
全球在线商店:BerryLook
2019/04/14 全球购物
门卫人员岗位职责
2013/12/24 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书