JavaScript小游戏，键盘英雄！-低调大师

JavaScript小游戏，键盘英雄！

2018-08-29 609

该游戏仅供探讨交流。

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

几年前的一个夜晚孤枕难眠，突然来了灵感。创作游戏的初衷是巩固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>

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

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

微信关注我们

原文链接：https://yq.aliyun.com/articles/630626

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

java多线程系列：CountDownLatch

这篇文章将介绍CountDownLatch这个同步工具类的基本信息以及通过案例来介绍如何使用这个工具。 CountDownLatch是java.util.concurrent包下面的一个工具类，可以用来协调多个线程之间的同步，或者说起到线程之间的通信（而不是用作互斥的作用）。它可以允许一个或者多个线程等待其他线程完成操作。案例模拟游戏一开始需要加载一些基础数据后才能开始游戏，基础数据加载完可以继续加载其他数据。基础数据包含人物、地图、背景、物品等等。解决方案利用CountDownLatch来实现，基础数据加载完毕后，CountDownLatch计数器进行减一操作。当CountDownLatch计数器为0时，表示可以开始游戏。示意图如下定义抽象类定义抽象类AbstractDataRunnable并实现Runnable接口抽象类包含两个属性 private String name; private CountDownLatch count; 通过构造函数初始化两个属性 public AbstractDataRunnable(String name, CountDownLa...

2018-08-30

507

微信小程序跳转失效原因，跳转位置是否在app.json注册过，跳转位置是否写错，跳转位置是否在TabBar中，需要使用wx.switchTab 来跳转界面 <navigator url="/page/user/user"></navigator> <navigator url="/page/user/user" open-type="redirect"></navigator> <navigator url="/page/user/user" open-type="switchTab"></navigator>

2018-08-30

609

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。

Sublime Text

Sublime Text具有漂亮的用户界面和强大的功能，例如代码缩略图，Python的插件，代码段等。还可自定义键绑定，菜单和工具栏。Sublime Text 的主要功能包括：拼写检查，书签，完整的 Python API ， Goto 功能，即时项目切换，多选择，多窗口等等。Sublime Text 是一个跨平台的编辑器，同时支持Windows、Linux、Mac OS X等操作系统。