JavaScript小游戏，键盘英雄！

该游戏仅供探讨交流。

该游戏可随意传播，请保留声明与出处。

几年前的一个夜晚孤枕难眠，突然来了灵感。创作游戏的初衷是巩固js基础，有朋友问我，为什么取这个名字呢？可以想象你是电影的主角，打字的速度已达到独孤求败的境界，狂风呼啸电闪雷鸣，键盘声响起，键盘在你指尖灵动肆意纷飞，眨眼的功夫一部20万字撰写完毕。生活不止眼前的苟且，还有诗和代码！当然这也是需要有想象力的。欢迎有更多想象力的朋友分享思维，在这款游戏上面继续扩展。

html部分可以用js来生成，其中加入了H5中的audio元素，按键音效，后续还可以增加背景音乐，或者再来一个升级音效，一直没有增加的原因是，没有找到满意的音乐，看来想做一个全能大神还是有难度的，哈哈！css建议用BEM或OOCSS设计模式便于维护和模块化功能扩展。js注释的很明白，还可以添加很多功能，得分也可以更加复杂，可以生成随机数0~99，或增加生成黄色按键几率10%得分10，或增加生成蓝色按键几率5%得分30，增加趣味性，只需要调整升级机制。越来越有趣了，有时候开发要保持童心不是么？

完整项目地址：https://github.com/af66666/typing_hero.git

上菜：

html ↓

<div>

</div>

css ↓

#pg {

width: 800px;

height: 600px;

margin: 0 auto;

position: relative;

background-image:linear-gradient(60deg,#62C292 0%,#F8CBAD 25%,#62C292 50%,#F8CBAD 75%,#62C292 100%);

}

#pg:before {

content: "";

display: table;

#pg>div {

margin: 20px;

overflow: hidden;

#pg>div+div {

margin: 80px 0;

padding: 20px 0;

#pg div div {

float: left;

width: 40px;

height: 40px;

border: 5px solid #000;

border-radius: 5px;

text-align: center;

line-height: 40px;

font-size: 22px;

font-family: helvetica;

font-weight: bold;

margin-right: 2px;

margin-bottom: 2px;

cursor: pointer;

#key div:first-child {

margin-left: 88px;

#key div:nth-child(13) {

margin-left: 108px;

#key div:nth-child(24) {

margin-left: 128px;

#pg p {

position: absolute;

top: 390px;

left: 280px;

font-size: 36px;

color: #fff;

opacity: 0.5;

#pg p+p {

top: 430px;

.red {

background: #f00;

#go {

display: none;

top: 0;

left: 0;

line-height: 600px;

font-size: 160px;

color: red;

transition: font-size 0.5s ease-out;

#go:hover {

font-size: 200px;

js ↓

var destroy = {

state: 0, //游戏状态

timer: null, //游戏引擎，主定时器

level: 1, //等级

sc: 0, //积分

many: 0, //消除的个数

MANYS: 20, //升级需要消除的个数

interval: 500, //红色生成的速度

LINTERVAL: 50, //红色生成速度加快

MIN: 100, //生成红色的最快速度

READY: 0, //就绪状态

RUNNING: 1, //正在游戏中

PAUSE: 2, //暂停状态

GAMEOVER: 3, //游戏结束

//就绪状态

ready: function() {

this.state = this.READY; //就绪状态

this.sc = 0; //游戏初始化

this.many = 0; //游戏初始化

this.level = 1; //游戏初始化

this.interval = 500; //游戏初始化

esc.style.color = '#00ffff';

go.innerHTML = 'ready';

go.style.background = '#f7f7f7';

go.style.display = 'block';

go.onclick = function() {

go.innerHTML = ' ';

go.style.display = 'none';

destroy.start();

//destroy.playAudio();

score.innerHTML = 'SCORE:' + this.sc;

level.innerHTML = 'LEVEL:' + this.level;

//游戏进行中

start: function() {

this.state = this.RUNNING;

var ds = key.querySelectorAll('div');

this.timer = setInterval(function() {

var white = key.querySelectorAll('div.white');

var tmp = white.length;

var n = parseInt(Math.random() * tmp);

if(tmp > 0){

white[n].className = "red";

}else{

destroy.gameOver();

for(var r = 0; r < ds.length; r++) {

ds[r].style.transform = '';

}, this.interval);

esc.onclick = function() {

destroy.pause();

document.onkeydown = function(e) {

switch(e.keyCode) {

case 27:

esc.style.color = '#f00';

break;

case 219:

if(ds[10].className == 'red') {

ds[10].className = 'white';

ds[10].style.transform = 'rotate(30deg)';

destroy.createLevel();

case 221:

if(ds[11].className == 'red') {

ds[11].className = 'white';

ds[11].style.transform = 'rotate(30deg)';

case 186:

if(ds[21].className == 'red') {

ds[21].className = 'white';

ds[21].style.transform = 'rotate(30deg)';

case 222:

if(ds[22].className == 'red') {

ds[22].className = 'white';

ds[22].style.transform = 'rotate(30deg)';

case 188:

if(ds[30].className == 'red') {

ds[30].className = 'white';

ds[30].style.transform = 'rotate(30deg)';

case 190:

if(ds[31].className == 'red') {

ds[31].className = 'white';

ds[31].style.transform = 'rotate(30deg)';

case 191:

if(ds[32].className == 'red') {

ds[32].className = 'white';

ds[32].style.transform = 'rotate(30deg)';

for(var i = 0; i < ds.length; i++) {

if(String.fromCharCode(e.which).toLowerCase() == ds[i].innerHTML) {

if(ds[i].className == 'red') {

ds[i].className = 'white';

ds[i].style.transform = 'scale(1.8)';

var num = e.keyCode; //检测

var en = String.fromCharCode(e.which); //检测

console.log(num); //检测

console.log(String(en)); //检测

//暂停状态

pause: function() {

this.state = this.PAUSE; //暂停状态

go.innerHTML = 'pause';

go.style.opacity = 0.5;

go.style.background = '#fff';

clearInterval(this.timer);

//游戏结束

gameOver: function() {

this.state = this.GAMEOVER;

go.style.opacity = 1;

go.innerHTML = 'OVER';

go.style.background = '#000';

case 83:

score.innerHTML = 'SCORE:' + 0;

level.innerHTML = 'LEVEL:' + 1;

};

go.onclick = function(){

//等级得分机制

createLevel: function() {

this.sc += 5;

this.many++;

if(this.many == this.MANYS) {

this.many = 0;

this.level++;

if(this.interval >= this.MIN) {

this.interval -= this.LINTERVAL;

clearInterval(this.timer); //清除定时器

destroy.start(); //重新启动定时器

if(this.level >= 10) {

level.innerHTML = '您已打破世界纪录';

//音频

playAudio: function() {

music.pause();

music.load();

music.play();

//运行

window.onload = function() {

destroy.ready();

html部分可以用js来生成，其中加入了H5中的audio元素，按键音效，后续还可以增加背景音乐，或者再来一个升级音效，一直没有增加的原因是，没有找到满意的音乐，看来想做一个全能大神还是有难度的，哈哈！css建议用BEM或OOCSS设计模式便于维护和模块化扩展。js注释的很明白，还可以添加很多功能，得分也可以更加复杂，可以生成随机数0~99，或增加生成黄色按键几率10%得分10，或增加生成蓝色按键几率5%得分30，增加趣味性，只需要调整升级机制。越来越有趣了，有时候开发要保持童心不是么？

后续将继续改进扩展，欢迎指导交流！

JavaScript小游戏，键盘英雄！

继续阅读

nodejs微信开发---授权登录+获取用户信息微信网页授权

debian9升级4.9.0内核到4.19.2内核过程

[转]iOS微信小视频优化心得

Javascript构建Bingo卡片游戏

JavaScript的那些坑之事件代理事件代理事件阶段

javascript的for (var i in data)慎用javascript中的for (var i in data)谨慎用

tab鼠标经过菜单切换

vue （vue2.0）使用总结(从大体结构总结)

vue搭建过程及出现问题

/\B(?=(?:\d{3})+$)/g 一条令人费解的正则表达式

android 主线程的相关问题

适用于JavaScript的ECMAScript 2020规范向前发展

JS生成uuid的四种方法

工厂模式-三种类型

layui多任务上传添加进度条