打字机游戏Ⅱ之手速pk

前言

  demo预览-> typewriter gameⅡ (chrome only 没做兼容

  别看一开始时速度不快,会线性增长的哦,反正楼主的score还没达到过40...

  为什么叫Ⅱ呢?之前写了个打字机游戏(试玩猛戳这里),数据上只是简单的手写了50个单词,全部输入正确即可过关,本来想改一下做成竞技类的(有分数的),但是一样的小游戏写俩没啥意思,正好最近看了下css3,突然有了某种灵感,于是typewriter gameⅡ粗线了。

过程

  之前的打字机游戏是基于canvas和粒子系统的,这次是基于dom和css3的,不过思路都是一样的。

  在看下文之前,可以先回顾下《Canvas之打字机游戏》和《css3实践之摩天轮式图片轮播+3D正方体+3D标签云(perspective、transform-style、perspective-origin)》,相同的内容就不多说了。

  html文件主要就是dom的一些css,核心文件主要就是两个js文件。

  初始化文件,主要构造单词数组以及整个游戏界面。

  单词直接从网上拉了个txt文件(看文件戳这里),然后用ajax和正则将里面的单词提取放在array数组中。

1
2
3
4
5
6
7
8
9
$.ajax ({
  type: 'GET',
  url: 'data.html',
  dataType: 'html',
  async: false,  // 异步
  success: function (msg) {
    window.array = msg.split(/[^A-z]+/)
  }
});

  不得不说正则表达式实在是太屌,有时间一定要好好看看。

  接着构造了游戏的主要界面,9个正方体围成的一个圈,构造方法和前文说的摩天轮式图片轮播类似,可以参考前文。

  游戏的核心文件,控制整个小游戏的逻辑。

  简单说说整个逻辑。监听键盘,当正确打字时,字的颜色发生变化,不断旋转,不断出现新的单词,旋转速度也不断变快,直到游戏结束。

  这之中最纠结的是写createWord方法。因为得找一个时机创造新的单词替换旧单词,最终我选择当旋转位置如下时调用方法:

  刚好这一位置该div即将处在盲区,经过实践发现旋转角度满足28+40*n 时调用方法即可,哈希角度去重。

  还有一个问题,因为创造新的单词前,先要去掉旧的单词,jquery可以用empty方法,如果用原生的js将dom一个一个remove,要倒序写:

1
2
3
4
5
var c = d[i].getElementsByClassName('cell');
// 必须倒着来 notice
for(var j = c.length - 1; j >= 0; j--) {
  d[i].removeChild(c[j]);
}

  其他的话,主要是对旋转速度的控制,以及游戏过程中的各种index的控制,只要逻辑正确,随便怎么写都行。

总结

  有兴趣看完整的代码可以猛戳:打字机游戏Ⅱ源码

  有任何bug或者其他问题麻烦给我留言。

  css3很强大,正则表达式很强大,感概ing...

posted on 2017-04-07 16:16  郑兴鹏  阅读(150)  评论(0编辑  收藏  举报

友情链接:上海回力鞋专卖店 | 中老年高档女装 | 新航道 | 雅思培训一般多少钱 | 托福网课