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/
您坚持了多少次?亮出来看看?


猜你喜欢
- 返回页面的类容,weburl为页面urlFunction GetBytes(weburl) '创建
- ASP中查询数据库记录写入XML文件示例,把下面代码保存为Asp_XML.asp运行即可: &
- 一,最常见MYSQL最基本的分页方式:select * from content order by id desc limit 0, 10在
- 1.1 什么是数据库数据库(database)是一个以某种有组织的方式存储的数据集合。 保存有组织的数据的容器(通常是一个文件或一组文件)注
- 如何获取实时股票信息股票信息的接口有很多,之前大家常用的是新浪的,但在年初的时候,新浪的接口突然不能使用,给大家造成了很大的困扰,为此网上也
- 什么是计算属性概念计算属性是vue里面为了简化在模板语法中对响应式属性做计算而存在的什么时候应该使用计算属性根据现有响应式的值得到一个新的值
- “到底是什么将艺术和设计分开的?”这样一个话题听起来费解,长时间以来, 也已经被讨论过无数次。艺术家和设计师都是通过共通的知识和素养来创造视
- 配置连接数据库DATABASES = { 'default': { 'ENGI
- 用css属性选择器可以有选择性地对链接样式进行控制,如让所有的外部链接都加一个小图标来标识其是一外部链接。但用css有弊端: 1、只支持Fi
- 本文实例讲述了Go语言函数基本用法。分享给大家供大家参考,具体如下:这里要说一下是Go函数和一些其他语言不一样的地方1 函数格式不同func
- 一、Eclipse 的安装Eclipse的安装是很容易的。Eclipse是基于java的一个应用程序,因此需要一个java的运行环境(JRE
- 本文实例讲述了python 正则表达式贪婪模式与非贪婪模式原理、用法。分享给大家供大家参考,具体如下:之前未接触过正则表达式,今日看pyth
- 作为一个测试人员,在学习的过程中,可能经常需要去在linux下安装一些软件,有的软件通过搜索别人的博客教程进行安装的话,随着一些软件的升级,
- 本文实例讲述了PHP实现通过正则表达式替换回调的内容标签。分享给大家供大家参考。具体实现方法如下:function my_wp_plugin
- 1.汇率换算程序案例描述设计一个汇率换算器程序,其功能是将外币换算成人民币,或者相反案例分析分析问题:分析问题的计算部分;确定问题:将问题划
- 使用索引时数据库性能优化的必备技能之一。在MySql数据库中,有四种索引:聚焦索引(主键索引)、普通索引、唯一索引以及我们这里将要介绍的全文
- Appium在前文的讲解中,我们学会了如何安装Appium,以及一些基础获取App元素内容的方式。但认真看过前文的读者,肯定在博主获取元素的
- 一 什么是XML?python与json数据的交互详情 在这篇文章中我们介绍了json是一种独立于编程语言和平台的数据存储和交换方
- 概述分库分表后设计到的第一个问题就是,如何选择路由key,应该如何对key进行路由。路由key应该在每个表中都存在而且唯一。路由策略应尽量保
- jquery有一个插件叫Timer,很有意思,咱来实现一个简版的yui3的node timer。但还是应当首先交代下yui3的node扩展的