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 相关文章推荐
基于jQuery的自动完成插件
Feb 03 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 Javascript
js获取内联样式的方法
Jan 27 Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 Javascript
Javascript中常用的检测方法小结
Oct 08 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
jQuery Chosen通用初始化
Mar 07 Javascript
js图片轮播插件的封装
Jul 21 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
微信小程序使用npm包的方法步骤
Aug 13 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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
第五节--克隆
2006/11/16 PHP
php 解决旧系统 查出所有数据分页的类
2012/08/27 PHP
解析VS2010利用VS.PHP插件调试PHP的方法
2013/07/19 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
php图片缩放实现方法
2014/02/20 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
比较详细的关于javascript中void(0)的具体含义解释
2007/08/02 Javascript
Javascript查询DBpedia小应用实例学习
2013/03/07 Javascript
js 获取浏览器版本以此来调整CSS的样式
2014/06/03 Javascript
jQuery中click事件的定义和用法
2014/12/20 Javascript
javascript中alert()与console.log()的区别
2015/08/26 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
js 上传文件预览的简单实例
2016/08/16 Javascript
详解使用webpack打包编写一个vue-toast插件
2017/11/08 Javascript
Javascript实现秒表倒计时功能
2018/11/17 Javascript
vuex页面刷新导致数据丢失的解决方案
2020/12/10 Vue.js
深入浅析Python字符编码
2015/11/12 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python实现烟花小程序
2019/01/30 Python
python config文件的读写操作示例
2019/09/27 Python
python爬虫用mongodb的理由
2020/07/28 Python
解决Ubuntu18中的pycharm不能调用tensorflow-gpu的问题
2020/09/17 Python
迪卡侬英国官网:Decathlon英国
2017/04/08 全球购物
英国浴室洗脸盆购物网站:Click Basin
2018/06/08 全球购物
Michael Kors澳大利亚官网:世界知名的奢侈饰品和成衣设计师
2020/02/13 全球购物
英国豪华家具和家居用品购物网站:Teddy Beau
2020/10/12 全球购物
卖车协议书范本4篇
2014/10/01 职场文书
欢迎词范文
2015/01/27 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书