做个PC端打字小游戏

欢迎关注我的公众号：前端成长日记，我们一同成长

前言

代码不光是我们用来工作的，也应该是我们用来娱乐的，今天就带着小伙伴们整个活！

看完这篇文章，你会学会如何整活~

小时候我记得有个软件叫做金山打字通，里面有个打字的飞机大战不知道有没有小伙伴玩过，当然我整不来他那么优秀，我只能做一个较为简单的（低配版），低的好像还真挺低。

先来看看效果吧：

开始整活

页面构成比较简单，一个是我们要打的字母，一个是下面的那行小字，用来做提示用。

     <div id="char">A</div><div id="result">请在按键上按下屏幕上显示的字母</div>

接下来是做一些简单的布局，就是将内容居中，颜色等做一下调整，我们先贴代码，完后在进行一个细说。

    body{margin: 0;/*开启弹性布局，并让弹性布局中的子元素水平居中对齐，垂直居中对齐*/display: flex;/* 用于设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 */justify-content: center;align-items: center;/*文字居中*/text-align: center;/*设置背景颜色的经向渐变*/background: radial-gradient(circle,#444,#000,#000);}#char{font-size: 400px;/*color: lightgreen;*/color: #90EE90;/*设置文字阴影*//*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*//*位置可以为负值*/text-shadow: 0 0 50px #666;}#result{font-size: 20px;color: #888;}/*找到id为char及类名为error的div元素*/#char.error{color: red;}

我们定义了一个error类，用来做用户输入错的时候，将字母变成红色来给与用户提示。

背景用的径向渐变也挺有意思的，你必须要设定两个终止色，由中心到四周产生渐变色的效果，他的第一个参数有两种情况，椭圆跟圆，我们是可以自己进行选择的。

如果对此感兴趣也可以去菜鸟教程径向渐变看一看。

接下来我们来写我们的js逻辑处理。

先定义和获取我们需要的变量跟Dom节点

    //表示正确的次数var okCount=0;//错误的次数var errorCount=0;//获取显示字符的divvar charBox=document.getElementById('char');//获取显示结果的divvar result=document.getElementById('result');

正确率=正确的次数/总次数，我们再写一个函数来显示判断结果，显示正确跟错误的个数，还有正确率。

    //展示计算的结果function showResult(){var rate=100*okCount/(okCount+errorCount);//显示正确个数 错误个数 及正确率result.innerHTML='正确'+okCount+'个'+'错误'+errorCount+'个'+'正确率'+rate.toFixed(2)+'%';}

toFixed(2)的作用是保留两位小数

我们再写一个函数去随机获取A~Z这些英文字母的值。

var code = 0; // 存放随机数//获取A~Z之间的任意一个字符function show(){//获取[0,1)之间的一个随机数var rand=Math.random();//获取一个0到26之间的一个随机数（不包含26）code=rand*26;//Math.floor(a)对数字a向下取整，获取到一个小于等于a最近的整数//获取0~25之间任意一个整数code=Math.floor(code);//获取到65~90之间的任意整数code=code+65;//把ASCII的十进制编码转化成对应的字符//获取A~Z的任意一个字符var char=String.fromCharCode(code);//把字符显示在界面上charBox.innerHTML=char;}

利用随机数生成A~Z的ASCII码值，完后用String.fromCharCode转成英文字母并显示到页面上。

还有最后一个步骤就是监听用户的键盘按键事件,利用window.onkeydown事件来做。

    //键盘按下来的事件window.onkeydown=function(ev){//获取按键所对应的ASCII编码var key=ev.keyCode;//判断按键字母所对应的数字和随机获取的数字是否相等if(key==code){//按键正确，正确次数+1okCount ++;//当按键正确时，重新显示新的字符show();}else{//按键错误，错误次数+1errorCount ++;}   showResult();}

现在已经成功了，来看看效果吧！

但是我们优秀的程序员当然想给用户略微（更好）的用户体验！所以我们来引入一个Animate.css动画库。

结合我们的小游戏，选择了zoomIn与shake两个动画，一个作为英文字母的出现伴随动画，另一个作为错误的时候提示用户的动画。我们在监听用户按键做出判断的时候来给我们的元素加上相对应动画的类名，并且在0.5s过后移除对应的类名就行了，防止发生冲突。

    //键盘按下来的事件window.onkeydown=function(ev){//获取按键所对应的ASCII十进制编码var key=ev.keyCode;//判断按键字母所对应的数字和随机获取的数字是否相等if(key==code){//按键正确，正确次数+1okCount ++;//当按键正确时，重新显示新的字符show();//添加正确的动画 通过js给div添加类名charBox.className ='animated zoomIn';}else{//按键错误，错误次数+1errorCount ++;//添加按键错误的动画charBox.className='animated shake error';}showResult();//0.5秒之后清除动画setTimeout(clearAnimated,500);}function clearAnimated(){//负责清除动画charBox.className='';}

到此为止，我们今日的整活就结束啦~

最后

希望大家快乐起来呀，老想着如何去实现产品经理给的需求会十分疲惫，在空闲之余不如来用我们擅长的代码整个活~

让自己，也让周围的人开心开心，也能让自己的心情变得轻松起来！

做个PC端打字小游戏相关推荐

Python 打字小游戏开发，来体验不一样的打字游戏乐趣（第一篇）
Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第一篇) 前言游戏素材准备游戏项目结构项目里面的类说明 Python 打字小游戏开发,来体验不一样的打字游戏乐趣(第二篇) Python ...
win7下搭建小程序服务器,重磅！微信PC端支持小程序直接开启适配Win7及以上系统...
原标题:重磅!微信PC端支持小程序直接开启适配Win7及以上系统腾讯科技讯 8月9日,腾讯科技在"微信开放社区"发现,微信正在测试"PC端支持打开小程序"能 ...
『小项目』打字小游戏
打字小游戏源码 #include <stdio.h> #include <stdlib.h> #include <time.h> #include <unis ...
原生js实现的金山打字小游戏
首先先来看一下效果图如果感兴趣的就来看一下Js源码吧 //计分板 var board = {dom: document.getElementById("score"),maxLo ...
JavaScript打字小游戏
上半年自学了JavaScript,然后就做了个打字小游戏玩玩. 功能模块: 程序设计: 1.可选择游戏时间,显示倒计时 ...
按头安利好看又实用的端游源码 PC端客户端电脑游戏源码素材看这里
想必大家都在为找端游源码 PC端客户端电脑游戏源码而头疼吧,今天小编都为大家整理好咯,上资源的端游源码 PC端客户端电脑游戏源码,大家喜欢的可以先行收藏哈,之后会持续更新哒~ 在找寻资源的时候 ...
接口测试抓包大法：抓web端的包+抓PC端微信小程序的包
接口测试现在作为一种主流的,简洁的测试方法,已经逐渐被渗透到功能测试和自动化测试的过程中去,成为测试的必备技能之一,现在就来总结一下工作中常用的抓包方法,供各位学习参考. chrome浏览器自带抓包工 ...
python拿什么做可视化界面好-手把手教你用Python做个可视化的“剪刀石头布”小游戏...
/1 前言/ 最近在学习PyQt5可视化界面,这是一个内容非常丰富的gui库,相对于tkinter库,功能更加强大,界面更加美观,操作也不难.于是我开始小试牛刀,用PyQt5做个可视化的"剪 ...
我的小白同事接触白鹭引擎4天，成功做了一款足球小游戏
写在前面:我的同事"熊猫少女"刚刚入职白鹭,之前从未接触过白鹭引擎,也从未做过游戏,经过4天时间的学习,他成功做了一款足球小游戏,这篇文章主要是记录他的开发过程: 正文如下: 在接 ...
用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...

做个PC端打字小游戏

前言

开始整活

最后

做个PC端打字小游戏相关推荐

最新文章

热门文章