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，增加趣味性，只需要调整升级机制。越来越有趣了，有时候开发要保持童心不是么？ 后续将继续改进扩展，欢迎指导交流！
