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 06 Javascript
基于jquery的web页面日期格式化插件
Nov 15 Javascript
深入理解在JS中通过四种设置事件处理程序的方法
Mar 02 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
基于vue 动态加载图片src的解决方法
Feb 05 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
讲解vue-router之命名路由和命名视图
May 28 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
Jun 01 Javascript
详解如何更好的使用module vuex
Mar 27 Javascript
Angular封装搜索框组件操作示例
Apr 25 Javascript
微信小程序开发之左右分栏效果的实例代码
May 20 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 第二节 数据类型之转换
2012/04/28 PHP
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
详解Window7 下开发php扩展
2015/12/31 PHP
CI框架表单验证实例详解
2016/11/21 PHP
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
JS获取下拉列表所选中的TEXT和Value的实现代码
2014/01/11 Javascript
Javascript 是你的高阶函数(高级应用)
2015/06/15 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
2015/12/03 Javascript
仅30行代码实现Javascript中的MVC
2016/02/15 Javascript
AngularJS基础 ng-submit 指令简单示例
2016/08/03 Javascript
Jquery实时监听input value的实例
2017/01/26 Javascript
php简单数据库操作类的封装
2017/06/08 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
vue-cli构建项目使用 less的方法
2017/10/04 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
jQuery实现弹出层效果
2019/12/10 jQuery
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
使用python实现拉钩网上的FizzBuzzWhizz问题示例
2014/05/05 Python
python基础教程之常用运算符
2014/08/29 Python
Python实现SMTP发送邮件详细教程
2021/03/02 Python
python实现多张图片拼接成大图
2019/01/15 Python
Python3+PyInstall+Sciter解决报错缺少dll、html等文件问题
2019/07/15 Python
python--shutil移动文件到另一个路径的操作
2020/07/13 Python
python用Configobj模块读取配置文件
2020/09/26 Python
使用css3实现超炫的loading加载动画效果
2014/05/07 HTML / CSS
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
意大利香水和化妆品购物网站:Parfimo.it
2019/10/06 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
C语言变量的命名规则都有哪些
2013/12/27 面试题
数学专业推荐信范文
2013/11/21 职场文书
优秀高中生事迹材料
2014/02/11 职场文书
个人买房协议书范本
2014/10/06 职场文书
2016年学生会感恩节活动总结
2016/04/01 职场文书