手机浏览 RSS 2.0 订阅 膘叔的简单人生 , 腾讯云RDS购买 | 超便宜的Vultr , 注册 | 登陆
浏览模式: 标准 | 列表分类:Javascript

JS实现的街头霸王

Submitted by gouki on 2011, April 11, 10:21 AM

自从canvas越来越被大多数人接受后，基于它的游戏也越来越多了。。。
而这个，居然没用canvas也能实现这样的效果，看这里：http://www.cnblogs.com/Random/archive/2011/04/11/2011962.html

作者这么说了：
继 《天机》 之后，这次又山寨了个名为《街斗霸主》的经典格式游戏《街头霸王》的模仿版Demo，花了几个月的业余时间写了这么个东西，算是对目前的技术学习的一种练习吧。

其实这种练习的结果不是很重要，主要是体会其中的过程，虽然大部分的时间是在痛苦中渡过，但也是有很多收获的，同时也暴露出很多技术方面的不足，也为以后的学习明确了一些目标。

技术方面因为考虑到大部分IE用户（而且是非IE9），所以没有用HTML5的canvas，用的div的方式处理的，这样挑战也相对大了一些，

不过确实，性能上还是不理想，IE下的表现还是比较糟糕（特别是IE6。。。恩。。。- -！）。
目前兼容IE6/7/8(理论上也兼容IE9，只是没有测试)，safari，FF3.5+(因为FF2.0/3.0不支持水平翻转的样式。。- -！)，Chrome，Opera。
自己写了一个小型框架，包括了开发流程和js类库，类库用了OOP Like的方式包了个语法糖衣，看上去还算是像个OOP的样子，不过因为为了追求“优雅”，直接扩展了function的prototype，所以不建议在其它地方使用。
框架开发的整体思路就是用PHP作后端代码合并输出，js代码里用$import去建立了各个代码文件之间的关系，然后页面引用合并js的PHP文件，该模式需要在本地建立一个web服务器才能作测试，并且需要设置hosts为 127.0.0.1 aralork

　　游戏说明

 

　　　　游戏是一个Demo版本，实现了核心的整体流程。游戏分为“单人游戏”模式、“双人对战”模式和“练习模式”三种玩法，不过其实实现都是一样，只是改改初始化的参数而已，挺坑爹的。。。

　　　　游戏只需要键盘操作，不需要鼠标，

　　　　菜单的操作是方向键移动，Enter键选择，ESC键取消；

　　　　玩家1的操作:

　　　　   上：W，下：S，左：A，右：D，拳：J / K / L，腿：U / I / O

 　　　　玩家2的操作:

　　　　  上：↑，下：↓，左：←，右：→，拳：小键盘 1 / 2 / 3，腿：小键盘 4 / 5 / 6

　　　　这里的 ↑ ↓ ← → 代表方向键。

　　　　游戏演示地址

 　　　　完整源代码下载

Tags: js, 街霸, div, canvas

Javascript | 评论:1 | 阅读:19768

浏览器对JavaScript代码执行的限制

Submitted by gouki on 2011, March 21, 11:36 PM

这是相对比较值得关注的内容，要知道浏览器对JS的解析都是通过他们自带的一些引擎来牏的。比如chrome所谓的V8引擎，都会有针对性的进行加速和处理，再者比如说IE对JS的规范支持又是比较延后的。因此，了解一下各个浏览器对JS代码执行的限制等，对于开发中遇到的问题也会有一定的了解。。

好吧，原文来自于：“http://rockux.com/archives/%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AF%B9javascript%E4%BB%A3%E7%A0%81%E6%89%A7%E8%A1%8C%E7%9A%84%E9%99%90%E5%88%B6”

浏览器的用户界面和JavaScript代码共享同一个处理进程。无论是浏览器需要响应一个菜单的点击，还是渲染一个页面或者执行Ajax请求，每一个事件都会添加到一个队列中。当浏览器空闲的时候，就会继续执行队列中的任务。

浏览器的线程

实际上，在高端一些的浏览器中都不是只有一个线程。作为极端的例子，IE9和Chrome会为每一个tab生成一个系统的进程。然而，对于每一个页 面来说，仍然只有一个事件处理的队列，也就意味着一次只能执行一个任务。这很必要，因为浏览器或者你的JS都可能会去更改HTML的内容。

不难理解，浏览器必须要限制你的JS执行的时间。如果执行时间很长，会锁死进程甚至导致系统崩溃。这就是你会看到这个“无响应的脚本”的对话框原因。

但是浏览器怎么来决定一个代码是不是执行的时间超长了呢？正如你所想的，5个流行的浏览器的处理方式都不一样。

IE

IE对JS代码的限制是500万条。

Firefox

FireFox使用时间来限制，最多是10秒。

Safari

Safari也是限制5秒。

Chrome

Chrome没有特别的限制，但是他会去检测浏览器是否崩溃或者没有响应。

Opera

Opera也没有限制。但是浏览器不会引起系统的崩溃，你在这个停止响应的时候还可以继续开Tab。

有的浏览器允许你自己配置限制的数额，但是不推荐这样改。这样有的人可能用这种办法来修复“不能响应”的页面。你可以搜一下，但是通过修改浏览器的配置来解决响应的问题不是最终的解决办法。

那么如何才能防止JavaScript抛出这样的错误呢？最佳的解决办法就是避免在客户端执行需要长时间运行的函数。理想情况下，所有的函数都应该在几十毫秒内解决问题。更多更复杂的计算应该交给后端然后通过刷新页面或者异步方法来处理。

然而，我们应该意识到减少客户端的压力在现在这种JS大型应用中不是最佳的办法。还有一些别的办法，我们后面会讲到。

 

Javascript | 评论:0 | 阅读:18234

收藏的关于JS的一些文章

Submitted by gouki on 2011, March 19, 9:53 PM

这是一些链接，纯收藏，其实我都用firefox的read it later保存下来过，只是我在这里做一点分享罢了。。。

好了。。先贴这么多。。。

 

 

Tags: 收藏, js

Javascript | 评论:0 | 阅读:17677

变量的顺序

Submitted by gouki on 2011, March 11, 4:37 PM

我是在一个博客上看到这个代码的。同时也理所当然的认为值是我想象中的那样，然而，现实无情的击破了我的幻想。。代码如下：

JavaScript代码
  1. var x = 1; 
  2. function fn(){  
  3.     alert(x);  
  4.     var x = 2; 
  5. }  
  6. fn();  
  7. alert(x);  

看到上面的代码，如果清楚全局变量和局部变量的或许都会说，输出1,1，但事实真是这样的吗？COPY出来到浏览器中运行一下，你会发现，第一次alert居然是undefined。。。这是为什么 ？真相呢？真相在哪时在？？？

让我们翻开这篇博客看一下。。。http://www.cnblogs.com/snandy/archive/2011/03/11/1980399.html ，作者的标题是JavaScript中同名标识符优先级。

一，局部变量先使用后声明，不影响外部同名变量（代码略，就是我上面那一段 ）

第一点，函数fn内第一句输出x，x是在第二句才定义的。这在JS中是允许的，这里的允许是指不会出现语法错误程序可以运行。
但在其它语言如C，Java中却是不允许的。变量必须先声明后使用，如

Java代码
  1. public class Test {  
  2.     public static void main(String[] args) {  
  3.         System.out.println(x); // 先使用  
  4.         int x = 10; // 后声明  
  5.     }  
  6. }  

Java中编译器会提示错误，程序无法运行。
第二点，函数fn内的局部变量x不会影响到外部的变量x。即fn内alert输出不是1，而是undefined。

二，形参优先级高于函数名

JavaScript代码
  1. function fn(fn){  
  2.     alert(fn);  
  3. }  
  4. fn('hello'); // --> "hello"  
可以看到函数名和形参同名都是fn，输出的是字符串"hello"，却不是函数fn的函数体(fn.toString())。

三，形参优先级高于arguments

JavaScript代码
  1. function fn(arguments){  
  2.     alert(arguments);  
  3. }  
  4. fn('hello'); // --> "hello"<br>  

arguments对象可以直接在函数内使用，是语言本身提供的一个 特殊标识符 。
这里刚好将形参声明成与其同名。输出可以看到是"hello"而非"[object Object]"，即形参arguments覆盖了语言本身提供的真正的arguments。

四，形参优先级高于只声明却未赋值的局部变量

JavaScript代码
  1. function fn(a){  
  2.     var a;  
  3.     alert(a);  
  4. }  
  5. fn('hello'); // --> "hello"  

函数fn形参为a，函数内第一句仅声明局部变量a，却并未赋值。从输出结果是"hello"而非undefined可以看出形参a优先级高于仅声明却未赋值的局部变量a。

五，声明且赋值的局部变量优先级高于形参

JavaScript代码
  1. function fn(a){  
  2.     var a = 1;  
  3.     alert(a);  
  4. }  
  5. fn('hello'); // --> "1"  

 

函数fn形参为a，函数内第一句仅声明局部变量a，赋值为1。从输出结果是"1"而非"hello"可以看出声明且赋值的局部变量a优先级高于形参a。

 

六，形参赋值给同名局部变量时

JavaScript代码
  1. function fn(a){  
  2.     var a = a;  
  3.     alert(a);  
  4. }  
  5. fn('hello');  
暂不运行，猜测下结果。如果按照第五点：声明且赋值的局部变量优先级高于形参。那么a将是undefined。但实际上a是"hello"，即右a是形参a，左a才是局部变量a。

大小: 13.82 K 尺寸: 454 x 96 浏览: 1645 次 点击打开新窗口浏览全图

这里的两个a互不干扰，谁也没覆盖谁。这与刚刚说的赋值的局部变量优先级高于形参又矛盾了。但引擎这样做的确是我们想要的，因为并不希望var a = a后a是undefined。

---EOF---
看了上面的内容，你懂了多少？

Javascript | 评论:0 | 阅读:17210

jQuery inViewport

Submitted by gouki on 2011, March 4, 11:11 PM

做前端的用户都会想过如何做lazyLoad，其实很多时候都有很多想法，比如占位图片，TEXTAREA后处理，根据滚动条的位置显示图片等。
介绍介绍上面的说法，因为这些名词是我自己想出来的。。。和一些标准的前端讲法可能是不一致的。
1、占位图片，这个用的比较多一点，即在页面还没有全部加载完的时候，涉及到图片的地方，先用占位图片（1X1大小的图片进行放大）占好，不影响整个DOM的加载，等全部加载完后，再慢慢加载图片。这样的方式优点在于，不影响DOM加载，代码修改量也最小，缺点是，其实还是加载了所有的图片。。。
2、teatarea后处理，这个，被用的比较明显的应该算是淘宝的trademark的页面上，当时在抢购活动的时候就用上了这个技巧，trademark这个页面全是图片，如果全部读出来并显示，很可能一下子就下载大约3M左右的图片，如果用第一种办法，那么占用的流量就非常夸张。于是淘宝当时的页面源码里就很明显的内容就是第一屏是正常的HTML代码，第二屏开始，把每一层的内容都放在textarea容器里。当滚动条滚动的时候，即当textarea开始出现在页面中时，就把textarea中的HTML代码转化成DOM，显示在页面上。它的优点是，textarea中的内容在初次加载时，不会被当成DOM被页面所加载。因此事实上首次加载的时候，只有第一屏的内容。缺点是需要写很多JS。（和第三点也有关）
3、根据滚动条的位置显示图片，这个其实是现在很多网站采用的技巧了，即滚动条滚动到哪里，图片就开始加载到哪里。和第二点其实有点象，只是处理的结构不一样而已。
介绍完这个，那就好好介绍一下第三点的技术了，原文从这里来：http://www.zhangjingwei.com/archives/jquery-inviewport/。

晚上在微博上“拔赤”写了个lazyload插件，发现其中用到一个很有意思的方法”div.inViewportRegion()”，字面意思就是在可视区域内。

在网上找了找，发现这是YUI提供的一个组件，觉得很有意思。
http://gillserver.com/yui/api/dom-region.js.html

如果jQ里面也包含类似的方法，可以做很多事，于是GG了一下，发现国外的同学写过这种选择器，代码表现上更直观。

代码如下：

JavaScript代码
  1. (function($) {  
  2.    
  3.     $.belowthefold = function(element, settings) {  
  4.         var fold = $(window).height() + $(window).scrollTop();  
  5.         return fold < = $(element).offset().top - settings.threshold;  
  6.     };  
  7.    
  8.     $.abovethetop = function(element, settings) {  
  9.         var top = $(window).scrollTop();  
  10.         return top >= $(element).offset().top + $(element).height() - settings.threshold;  
  11.     };  
  12.    
  13.     $.rightofscreen = function(element, settings) {  
  14.         var fold = $(window).width() + $(window).scrollLeft();  
  15.         return fold < = $(element).offset().left - settings.threshold;  
  16.     };  
  17.    
  18.     $.leftofscreen = function(element, settings) {  
  19.         var left = $(window).scrollLeft();  
  20.         return left >= $(element).offset().left + $(element).width() - settings.threshold;  
  21.     };  
  22.    
  23.     $.inviewport = function(element, settings) {  
  24.         return !$.rightofscreen(element, settings) && !$.leftofscreen(element, settings) && !$.belowthefold(element, settings) && !$.abovethetop(element, settings);  
  25.     };  
  26.    
  27.     $.extend($.expr[':'], {  
  28.         "below-the-fold": function(a, i, m) {  
  29.             return $.belowthefold(a, {threshold : 0});  
  30.         },  
  31.         "above-the-top": function(a, i, m) {  
  32.             return $.abovethetop(a, {threshold : 0});  
  33.         },  
  34.         "left-of-screen": function(a, i, m) {  
  35.             return $.leftofscreen(a, {threshold : 0});  
  36.         },  
  37.         "right-of-screen": function(a, i, m) {  
  38.             return $.rightofscreen(a, {threshold : 0});  
  39.         },  
  40.         "in-viewport": function(a, i, m) {  
  41.             return $.inviewport(a, {threshold : 0});  
  42.         }  
  43.     });  
  44.    
  45. })(jQuery);  

来源：http://www.appelsiini.net/projects/viewport

简单测了下，不错，呵呵~

Demo：http://www.zhangjingwei.com/inviewport.zip

------EOF--
事后测试了一下，加载了这段的JS后，剩下对代码的处理就其实不多了，只需要BIND一个in-viewport就OK了，也算是比较方便。值得推荐，不知道啥时候类似功能可以直接进jQuery类库

Tags: jquery, inviewport, lazyload

Javascript | 评论:0 | 阅读:18928

Records:305«‹17181920212223242526›»