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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 原生js实现的金山打字小游戏（实例代码详解）

    首先先来看一下效果图 如果感兴趣的就来看一下Js源码吧 //计分板 var board = { dom: document.getElementById("score"), maxLost: 3, //最大丢失量 lost: 0, //当前丢失了多少个 score: 0, //当前分数 render: function() { //显示 this.dom.innerHTML = "<p>得分:" + this.score + "</p&g

  • JavaScript实现单英文金山打字通

    JavaScript实现单英文金山打字通

    单英文的金山打字通的具体实现代码,供大家参考,具体内容如下 1.页面的布局代码如下: <div> <div id="char">A</div> <div id="result">请在按键上按下屏幕上显示的字</div> </div> 2.页面布局的样式代码如下: body{ margin: 0; /*开启弹性布局,并让弹性布局中的子元素 水平居中对齐,垂直居中对齐*/ display: flex

  • js实现金山打字通小游戏

    本文实例为大家分享了js实现金山打字通小游戏的具体代码,供大家参考,具体内容如下 字母匀速随机下落,键盘按下对应字母按键,字母消失重新生成新字母,新字母可帮助回调一部分初始高度 效果 1.页面内容 列表内放字母 <ul id="box"> <li></li> <li>A</li> </ul> ** 2.页面样式 ** 1)清除li园标 2)确定列表位置,为字母随机位置下降准备 *{ padding: 0; marg

  • C语言制作简易金山打字通功能的代码

    C语言制作简易金山打字通功能的代码

    本小项目最终的实现如下: 输入相应的字符,然后在最下面能够统计错误的个数,输入字符总个数,输入个数以及错误率. 那如何来实现这个小项目呢?规划如下,我们需要大致实现以下三个模块: (1)输入模块 (2)显示模块 (3)统计模块 实现过程: 使用getch()函数可以获取键盘输入的字符,显示可以使用Window自带的API来实现,统计就很简单了,就是计算输入字符的个数等等...接下来就是简单的软件逻辑的实现. 源码如下: #include <stdio.h> #include <strin

  • JS+Canvas实现贪吃蛇小游戏

    JS+Canvas实现贪吃蛇小游戏

    今天呢,主要和小伙伴们分享一下一个贪吃蛇游戏从构思到实现的过程~因为我不是很喜欢直接PO代码,所以只copy代码的童鞋们请出门左转不谢. 按理说canvas与其应用是老生常谈了,可我在准备阶段却搜索不到有用的资料(不是代码!),所以说呢,只能自力更生 -_- 首先是大致要考虑的东西: 1.要有蛇(没蛇怎么叫贪吃蛇). 2.然后要有地图(蛇是不能上天的). 3.不能水平\垂直掉头(如果想掉头,需要至少变换方位并且至少移动一格才可). 4.食物(不然怎么贪吃). 5.吃了食物要变长(这才是精髓).

  • JS实现的走迷宫小游戏完整实例

    JS实现的走迷宫小游戏完整实例

    本文实例讲述了JS实现的走迷宫小游戏.分享给大家供大家参考,具体如下: 先来看看运行效果截图: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml

  • 原生JS实现的跳一跳小游戏完整实例

    原生JS实现的跳一跳小游戏完整实例

    本文实例讲述了原生JS实现的跳一跳小游戏.分享给大家供大家参考,具体如下: 以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有: 1.先随机生成地图: 2.按住按钮释放后完成动作并进行判断: 首先po一下代码: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vie

  • 利用原生JS实现欢乐水果机小游戏

    简介: 玩家点击某个押注物品则在该物品上下注.点击开始则游戏开始,如果没有下注则不能开始游戏. 游戏中的物品有八中,分别为:苹果.西瓜.柠檬.橙子.铃铛.77.双星.BAR. 在放行游戏区左右方为押注区,每种物品下方有加减号按钮,每次点 击加号增加一个筹码注金,反之减号就减少一个筹码注金 开始: 开始键 奖励:GOOD LUCK 由于这个时低配版的,我就没有按照原版的写进去,就是中了GOOD LUCK直接获得15分. 出于好耍,本人想起了小时候玩过的水果机,js也学了一会儿了,就想用它写一个简单

  • 如何用VUE和Canvas实现雷霆战机打字类小游戏

    如何用VUE和Canvas实现雷霆战机打字类小游戏

    今天就来实现一个雷霆战机打字游戏,玩法很简单,每一个"敌人"都是一些英文单词,键盘正确打出单词的字母,飞机就会发射一个个子弹消灭"敌人",每次需要击毙当前"敌人"后才能击毙下一个,一个比手速和单词熟练度的游戏. 首先来看看最终效果图: emmmmmmmmmmmmm,界面UI做的很简单,先实现基本功能,再考虑高大上的UI吧. 首先依旧是来分析界面组成: (1)固定在画面底部中间的飞机: (2)从画面上方随机产生的敌人(单词): (3)从飞机头部发射

  • html+css+js实现别踩白板小游戏

    html+css+js实现别踩白板小游戏

    目录 背景简介 一.思路分析 二.页面搭建 2.1 HTML层 2.2 CSS层 2.3 JS层 2.3.1获取元素 2.3.2创建每一行div元素 2.3.3点击事件函数封装 2.3.4 方块移动函数封装 2.3.5 游戏开始 三.总结 背景简介 别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游戏--别踩白板. 一.思路分析 整体页面是一个大的矩形,长宽比例大概是3:2,然后游戏开始

  • JS实战面向对象贪吃蛇小游戏示例

    JS实战面向对象贪吃蛇小游戏示例

    目录 思考 一.贪吃蛇效果图 二.贪吃蛇分析 2.1 开始游戏功能 2.2 运动功能 2.2.1 蛇的不同方向的运动 2.2.2 键盘控制方向运动功能 2.3 吃食物功能 2.3.1 食物的产生 2.3.2 吃食物的过程 2.4 死亡判定功能 2.4.1 触边死亡判断(撞墙了) 2.4.2 自己撞到自己 2.5 暂停/继续游戏功能 总结 思考 第一步思考蛇分为几个部分,蛇头和蛇身体是怎么形成的. 第二步思考蛇是怎么运动的:如何通过键盘控制蛇的走向. 第三步思考游戏在什么情况下会结束. 第四步思考

随机推荐