文档章节

JavaScript小游戏,后续将持续更新改进,欢迎指导交流!

甄佰匠人
 甄佰匠人
发布于 2016/09/28 10:50
字数 1539
阅读 37
收藏 0

1.该游戏由皇上洗碗原创制作,切勿用于任何商业用途。

2.该游戏仅供探讨交流。

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

        三个月前突然来了灵感,写了这个游戏取名destroy,制作游戏的初衷是练习打字速度,有朋友问我,为什么取这个名字呢?可以想象你是电影的主角,打字的速度已达到独孤求败的境界,狂风呼啸电闪雷鸣,键盘声响起,键盘在你指尖灵动肆意纷飞,眨眼的功夫一部20万字撰写完毕,当然这也是需要有想象力的。开发途中遇到了很多问题,遇山开路,遇河造桥。

        虽然最初的架构很简单,但是也经过一番推敲,引用渐进增强的理念进行开发。进入渐进增强的思维方法很简单:只要从基础往外想,在坚实的基石之上进行扩展,才能做得完美,这就像盖大楼一样。

上菜:

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部分用写的很随意,建议还是用类选择器,便于维护和代码复用,后期会做更改。js注释的很明白,还可以添加很多功能,得分也可以更加复杂,涉及到了算法,可以生成随机数0~99,如果0~10,生成黄色按键几率10%得分10,11~15,生成蓝色按键几率5%得分30,增加了趣味性。但是同时要改升级机制,因为我设置的升级是消除按键的个数,升级可以改为游戏得分,越来越有趣了,有时候开发要保持童心,不是么?

        后续将继续改进扩展,欢迎指导交流!

 

© 著作权归作者所有

甄佰匠人
粉丝 3
博文 154
码字总数 86632
作品 0
浦东
程序员
私信 提问
2014 不能错过的 10+ 个 JavaScript 游戏引擎

在过去几年里,JavaScript 变得越来越流行,现在被认为是 Github 上面最受欢迎的编程语言。JavaScript 和 HTML5 这个流行的组合和 HTML5 的最新发展催生了各种 JavaScript 游戏引擎。这个组合...

oschina
2014/03/20
6.4K
13
2015年10个最佳Web开发JavaScript库

现在的互联网可谓是无所不有,有大量的JavaScript项目开发工具充斥于网络中。我们可以参考网上的指导来获取构建代码项目的各种必要信息。如果你是搞Web开发的,那么大多更喜欢支持前端开发的...

IanSun
2015/03/14
67
0
微信demo小游戏:飞机大战从无到有

微信demo游戏飞机大战从无到有 现在创建新项目会默认给飞机大战的demo,这里给大家从基础开始讲解游戏的从无到有是怎么实现的。 具体实现步骤: 创建背景图->背景图运动起来->创建飞机并随背...

紫云之轩
06/09
0
0
解析JavaScript异步加载

本篇文章给大家分享了作者在学习JavaScript异步加载中遇到的问题,总结后给出了详细的处理方案,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下。如有不足之处,欢...

前端攻城老湿
2018/12/24
0
0
WarriorJS 0.4.0 发布,学习编程和 AI 的教学游戏

WarriorJS 是一个采用 JavaScript 开发的教学类游戏,用于学习 JavaScript 编程和人工智能。简单地说,WarriorJS 是一个需要靠编写 JS 来玩的小游戏,启动后你需要不断攀爬 JS 世界,最终爬上...

王练
2018/05/22
685
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
2.1K
14
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
38
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
40
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
61
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
21
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部