Javascript 小游戏,“是男人坚持 100 次”
作者:grace 来源:grace 发布时间:2009-01-22 14:25:00
标签:小游戏,游戏,JavaScript,代码
佛爷去了公司的年夜饭,我有点无聊就在公司 Coding 点东西玩玩,于是就有了这玩意。请允许我很猥·琐得将这个游戏称之为“是男人坚持 100 次”(坦白讲,我是死活玩不到这个级别了)。
原定两个小时搞定的脚本,结果花了我将近三个小时的时间。完事后我在 Twitter 上记录下心得结果被群殴(看来 Twitter 不能当作笔记本),还是记录到 Blog 里比较靠谱
设计模式和算法很重要,在前期打“腹稿”的时候就应该搞定那玩意。
按需加载,特别是在大量的 DOM 操作时,这时候就要体现算法的力量了。
命名很重要,能避免很多问题。比如遇到了不大不小的 Bug,原因是我作孽得将某个变量命名为 “class” 了。
效率优先是没有错,可怜我一开始就考虑这些而忽略了其他更重要的事情,绕了很多的弯路。
结构尽量精炼,能用 CSS 实现的效果尽量用 CSS 实现。
将“杂碎”的处理拉出来或者再细分整理下,不要写“一坨”很长的 function,自己看着都累。
对技术实现有兴趣的朋友可以看下核心的 Javascript 代码,欢迎提任何建议。PS,在内测的时,虽然这小游戏是我写的,但发现谁都比我玩得好,真是没有脸活了。
1 /**
2 * 考验眼力和反应能力的小游戏
3 *
4 * @author i.feelinglucky@gmail.com
5 * @date 2009-01-21
6 * @link http://www.gracecode.com/
7 *
8 * @change 2009-01-22
9 * 增加 3 次出错机会,增加 this.score 属性
10 * @change 2009-01-21
11 * 完成基本逻辑 @TODO 代码需要优化
12 */
13 (function(_scope) {
14 var defConfig = {group: 10, step: 1.25, life: 3};
15 var arrow = ['up', 'down', 'left', 'right'];
16 var keyCode = {'38': 'up', '40':'down', '37': 'left', '39': 'right'};
17
18 _scope.Dazing = function(container, config) {
19 this.container = container;
20 this.config = config || defConfig;
21 this.container.style.overflow = 'hidden';
22 this.container.style.paddingLeft = this.container.clientWidth + 'px';
23 this.init();
24 };
25
26 var proto = _scope.Dazing.prototype;
27
28 proto.init = function() {
29 this.container.innerHTML = '';
30 this.score = this.current = this.life = 0;
31 this.step = this.config.step || 1.25;
32 this.container.scrollLeft = 0;
33 var _self = this;
34 document.onkeydown = function(e) {
35 e = e || window.event;
36 var className = keyCode[e.keyCode];
37 if (className) { _self.judge(className); }
38 };
39 };
40
41 proto.build = function() {
42 for (var i = 0; i < this.config.group*2; i++) {
43 var node = document.createElement('li');
44 node.className = arrow[Math.round((Math.random()*100))%4];
45 node.innerHTML = '<span>' + node.className.toUpperCase() + '</span>';
46 this.container.appendChild(node);
47 };
48 };
49
50 proto.judge = function(className) {
51 var node = this.container.childNodes[this.current], answerName = node.className;
52 if (answerName == className) {
53 node.className += ' done';
54 } else {
55 if (this.life < this.config.life) {
56 node.style.visibility = 'hidden';
57 this.life++;
58 } else {
59 this.stop();
60 if ('function' == typeof this.config.onFinished) {
61 this.config.onFinished.call(this);
62 }
63 return;
64 }
65 }
66 this.current++;
67 };
68
69 proto.scrolling = function() {
70 var _self = this, f = arguments.callee;
71 this.container.scrollLeft += (this.level + 1) * this.step;
72
73 var node = this.container.childNodes[this.current];
74 if (node && (this.container.scrollLeft > node.offsetLeft)) {
75 this.stop();
76 if ('function' == typeof this.config.onFinished) {
77 this.config.onFinished.call(this);
78 }
79 return;
80 } else {
81 this.level = Math.floor((this.current) / this.config.group);
82 var needNodes = (this.level + 2) * this.config.group;
83 if (needNodes >= this.container.childNodes.length) {
84 this.build();
85 };
86 this.timer = setTimeout(function() {f.call(_self);}, 20);
87 }
88 this.score = this.current - this.life;
89
90 if ('function' == typeof this.config.onScrolling) {
91 this.config.onScrolling.call(this);
92 }
93 };
94
95 proto.stop = function() {
96 clearTimeout(this.timer); document.onkeydown = null;
97 };
98
99 proto.start = function() {
100 this.scrolling();
101 };
102 })(window);
103 // vim: set et sw=4 ts=4 sts=4 fdm=marker ff=unix fenc=utf8
顺便八卦:Javascript 做游戏并不是不可能。从目前的情况以及效果和成本看,还是使用 Flash 比较得当。到 HTML5 以及 Canvas 普及以后,这情况可能会有所改变,不过在这之前谁又能等的了呢。
最后,游戏地址:
http://www.gracecode.com/demo/dazing/
您坚持了多少次?亮出来看看?
0
投稿
猜你喜欢
- // 格式化字符串 Fmt("{0}.[{id}].{name}",{id:1,name:'
- 译者按:我们时常能看到不同JavaScript库/框架之间的各种比较,但这次 YUI3 架构师和 jQuery 之父的直接对话却非常难得,也
- 问:怎样才能指定MySQL只监听某个特定地址?答:比较常见的办法是,在my.cnf之mysqld节,添加bind-address=127.0
- 新云4.0模版标签是全新改的了,加了前缀。如果你怀旧,请查看新云CMS3.1常用模板标签。下面的标签说明,后台就有,为了方便查看转到这里。{
- 问:怎样解决mysql连接过多的错误?答:系统不能连接数据库,关键要看两个数据:1、数据库系统允许的最大可连接数max_connection
- 看了不少朋友的个人网站,有一个小问题,似乎很多朋友都忽略了,那就是版权声明的写法。虽然那只是一小行字,不过作为设计师也好,作为个人的爱好也好
- <style> body {margin:10px;background-color:#ffffff;margin-t
- 一、多行函数又称组合函数(Group Functions)、聚合函数 1、 Types of Group Functions avg、cou
- 购物车的设计目标 从程序员的观点来看,购物车是维护购物者商品选购、允许察看、允许修改的一个对象。购物车本身是一个非常简单的程序,但开发者要考
- 相信认真做过网页设计(Web Design),或者关注过页面设计的同行都对“空格”不陌生。“空格”属于一类细节,很容易被忽略,但又比较影响效
- QQ影音至9月发布之后一直口碑很好,视觉界面和交互设计也颇受好评,这是设计师们努力的结果,也是众多用户反馈的功劳。我们希望可以提供更多价值回
- IE 浏览器中 CSS Expression 特性的最大的问题:会反复执行,每秒钟可能执行了成百上千次,有严重的性能问题。如何对 CSS E
- 当我们使用一个数据库时,总希望数据库的内容是可靠的、正确的,但由于计算机系统的故障(包括机器故障、介质故障、误操作等),数据库有时也可能遭到
- 今天在开发一个手机短信通讯录的前端界面时,界面中使用了checkbox,来做为各项的选择控件,但是操作时,除了点差子。由于逻辑需要,需要预先
- asp中怎么替换最后一个逗号为空字符串?举例 aaa,bbb,ccc,eee, 这个字符串怎么让最后一个逗号变没,其他的不变啊 ?问题补充:
- 代码如下:Set Catalog_object= Server.CreateObject("ADO
- 这里说的“相对路径”是相对于“主调文件”所在的文件夹。#include file #include file后面跟的是文件的“相对路径”,不
- 密码保护是注册过程中的关键环节,尤其是对帐户安全级别比较高的网站,尤其在账号被盗或者涉及安全登录等问题的情况下,密码保护问题作为用户身份识别
- 首先说明一下SQL Server内存占用由哪几部分组成。SQL Server占用的内存主要由三部分组成:数据缓存(Data Buffer)、
- 问:假如我的一个表里含有(a,b,c,d)和(a,b)形成组合键。我能在列值中写这个查询吗?例如: select a,c,d from my