该游戏仅供探讨交流。
该游戏可随意传播，请保留声明与出处。
几年前的一个夜晚孤枕难眠，突然来了灵感。创作游戏的初衷是巩固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，增加趣味性，只需要调整升级机制。越来越有趣了，有时候开发要保持童心不是么？
后续将继续改进扩展，欢迎指导交流！
