前言

　　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文件。

init.js

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

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

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

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

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

game.js

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

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

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

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

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

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...

打字机游戏Ⅱ之手速pk相关推荐

计算机练手速的游戏,玩手速的游戏有哪些手机上练手速的游戏推荐
玩手速的游戏有哪些,手速游戏顾名思义就是需要玩家有着敏捷快的反应和手速才能应对的游戏了,跑跑车为您带来手机上练手速的游戏推荐. 点杀泰坦2 作为剑圣来防卫世界的战斗还在持续,但是更多全新的更加危险的巨 ...
jquery制作html小游戏,JQuery手速测试小游戏实现思路详解
(-1)写在前面我用的chrome49,jquery3.0,我得到过399分,信不信由你. (1)设计思路两个p元素放在div里,每个p元素的高度和宽度都和div一样,当鼠标放在div上时,第一个 ...
用JAVA制作抓老鹰游戏_Java制作最难练手速游戏，Faker都坚持不了一分钟
原标题:Java制作最难练手速游戏,Faker都坚持不了一分钟想练手速,来啊,互相伤害啊 Java制作最难练手速游戏,目测Faker也坚持不了一分钟制作思路:只靠Java实现.Java.Java. ...
Alex - 用python来写测手速游戏
# 测手速游戏 # 文字:按钮:0 次/s # 按钮 import time import tkinter # 1.初始化 mywindow = tkinter.Tk() # 3.设置标题 mywin ...
Deqin- 升级版测手速游戏
import tkinter import time import cct = tkinter.Tk() t.geometry("500x500") t.title("反 ...
succi -测手速游戏
import tkinter as tk import time window=tk.Tk() window.title('测手速游戏') window.geometry('600x500') # L ...
【Python】利用tkinter开发测手速小游戏
一.简介利用tkinter开发测手速的小游戏,大家10s内可以点击鼠标多少次呢?想测试一下吗?来试试测手速下游戏吧!仅供娱乐~ 试玩视频: 测手速小游戏游戏截图: 二.代码分模块介绍 2.1 导入 ...
CocosCreator拼手速小游戏（教程 + 源码）TS实现小游戏
CocosCreator拼手速小游戏(教程 + 源码)TS实现小游戏前言游戏完成后的样子玩法:在10秒内点击屏幕中间的按钮,最终记录一共点击了多少下源码在Q群:1130122408 这个游戏比 ...
奥运测手速小游戏（傅女神）
看到傅园慧女神的洪荒之力,心中也充满了洪荒之力,顺势做一个测手速的小游戏,虽然做的有点渣.谁让我既不会美术又不会动画,图还得自己做.动画还得自己截,差点折腾死我. 下面展示(轻吐槽,我知道做得难看): ...
ziheng - 测手速游戏
import tkinter as tk import timet1 = time.time()dian = 0 def zan():global dian # 全球的变暖把一个变量变成全局变量d ...

打字机游戏Ⅱ之手速pk

前言

过程

总结

打字机游戏Ⅱ之手速pk相关推荐

最新文章

热门文章