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 id="pg">

<div>

<div id="esc">Esc</div>

</div>

<div id="key">

<div class="white">q</div>

<div class="white">w</div>

<div class="white">e</div>

<div class="white">r</div>

<div class="white">t</div>

<div class="white">y</div>

<div class="white">u</div>

<div class="white">i</div>

<div class="white">o</div>

<div class="white">p</div>

<div class="white">[</div>

<div class="white">]</div>

<div class="white">a</div>

<div class="white">s</div>

<div class="white">d</div>

<div class="white">f</div>

<div class="white">g</div>

<div class="white">h</div>

<div class="white">j</div>

<div class="white">k</div>

<div class="white">l</div>

<div class="white">;</div>

<div class="white">'</div>

<div class="white">z</div>

<div class="white">x</div>

<div class="white">c</div>

<div class="white">v</div>

<div class="white">b</div>

<div class="white">n</div>

<div class="white">m</div>

<div class="white">,</div>

<div class="white">.</div>

<div class="white">/</div>

</div>

<p id="score">-</p>

<p id="level">-</p>

<i id="go"></i>

</div>

<!--<audio id="music" src="18839369087.mp3"></audio>-->

 

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-family: helvetica;

font-size: 36px;

font-weight: bold;

color: #fff;

opacity: 0.5;

cursor: pointer;

}

 

#pg p+p {

top: 430px;

}

 

.red {

background: #f00;

opacity: 0.5;

color: #fff;

}

 

#go {

display: none;

width: 800px;

height: 600px;

position: absolute;

top: 0;

left: 0;

text-align: center;

line-height: 600px;

font-size: 160px;

font-weight: bold;

font-family: helvetica;

color: red;

cursor: pointer;

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();

//destroy.playAudio();

}

document.onkeydown = function(e) {

switch(e.keyCode) {

case 27:

esc.style.color = '#f00';

destroy.pause();

//destroy.playAudio();

break;

case 219:

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

ds[10].className = 'white';

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

destroy.createLevel();

//destroy.playAudio();

}

break;

case 221:

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

ds[11].className = 'white';

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

destroy.createLevel();

//destroy.playAudio();

}

break;

case 186:

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

ds[21].className = 'white';

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

destroy.createLevel();

//destroy.playAudio();

}

break;

case 222:

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

ds[22].className = 'white';

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

destroy.createLevel();

//destroy.playAudio();

}

break;

case 188:

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

ds[30].className = 'white';

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

destroy.createLevel();

//destroy.playAudio();

}

break;

case 190:

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

ds[31].className = 'white';

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

destroy.createLevel();

//destroy.playAudio();

}

break;

case 191:

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

ds[32].className = 'white';

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

destroy.createLevel();

//destroy.playAudio();

}

break;

 

}

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)';

destroy.createLevel();

//destroy.playAudio();

}

}

}

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.display = 'block';

go.style.background = '#fff';

clearInterval(this.timer);

document.onkeydown = function(e) {

switch(e.keyCode) {

case 27:

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

go.style.display = 'none';

destroy.start();

//destroy.playAudio();

}

}

},

//游戏结束

gameOver: function() {

this.state = this.GAMEOVER;

clearInterval(this.timer);

go.style.opacity = 1;

go.innerHTML = 'OVER';

go.style.display = 'block';

go.style.background = '#000';

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

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

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

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

document.onkeydown = function(e) {

switch(e.keyCode) {

case 83:

go.style.display = 'none';

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

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

ds[i].className = 'white';

}

score.innerHTML = 'SCORE:' + 0;

level.innerHTML = 'LEVEL:' + 1;

destroy.start();

//destroy.playAudio();

}

};

go.onclick = function(){

go.style.display = 'none';

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

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

ds[i].className = 'white';

}

score.innerHTML = 'SCORE:' + 0;

level.innerHTML = 'LEVEL:' + 1;

destroy.start();

//destroy.playAudio();

};

},

//等级得分机制

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(); //重新启动定时器

}

 

}

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

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

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，增加趣味性，只需要调整升级机制。越来越有趣了，有时候开发要保持童心不是么？

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