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框架veryide.librar源代码
Mar 05 Javascript
extjs DataReader、JsonReader、XmlReader的构造方法
Nov 07 Javascript
javascript 获取表单file全路径
Dec 31 Javascript
JavaScript写的一个自定义弹出式对话框代码
Jan 17 Javascript
JQuery 应用 JQuery.groupTable.js
Dec 15 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
Oct 11 Javascript
Jquery index()方法 获取相应元素索引值
Oct 12 Javascript
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
通过AJAX的JS、JQuery两种方式解析XML示例介绍
Sep 23 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
javascript 动态样式添加的简单实现
Oct 11 Javascript
vue指令做滚动加载和监听等
May 26 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/05/12 PHP
抓取并下载CSS中所有图片文件的php代码
2011/09/26 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
用javascript实现页面打印的三种方法
2007/03/05 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
Javascript玩转继承(二)
2014/05/08 Javascript
js的回调函数详解
2015/01/05 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
jQuery中过滤器的基本用法示例
2017/10/11 jQuery
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
Node.js实现mysql连接池使用事务自动回收连接的方法示例
2018/02/03 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
JS实现旋转木马轮播图
2020/01/01 Javascript
python执行shell获取硬件参数写入mysql的方法
2014/12/29 Python
详解Python 数据库 (sqlite3)应用
2016/12/07 Python
python bmp转换为jpg 并删除原图的方法
2018/10/25 Python
Python利用递归实现文件的复制方法
2018/10/27 Python
Python3 读取Word文件方式
2020/02/13 Python
python实现图片横向和纵向拼接
2020/03/05 Python
python实现3D地图可视化
2020/03/25 Python
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
高中生活自我鉴定
2014/01/18 职场文书
租房协议书怎么写
2014/04/10 职场文书
情人节寄语大全
2014/04/11 职场文书
《菜园里》教学反思
2014/04/17 职场文书
社区服务标语
2014/07/01 职场文书
飞机制造技术专业求职信
2014/07/27 职场文书
学习保证书
2015/01/17 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
职工食堂管理制度
2015/08/06 职场文书
三严三实·严以用权心得体会
2016/01/12 职场文书
叶县这家生产军用电台的兵工厂,人称“四机部”,走出一上将
2022/02/18 无线电
Python的property属性详细讲解
2022/04/11 Python