二分之一

Just Jason's Blog

javascript

js获取GET参数(简易正则实现方式)

js获取GET参数,比较常用到,一般的实现方式通过截取字符串,我用正则简单的实现了一下,在我目前的项目中基本通用,没有遇到问题。

下接上代码,如果获取的参数不存在时,返回空。

//window.location.href = test.html?uin=1000&skey=523
//window.location.href = test.html#uin=1000&skey=523

function getUrlArgs(_name){
    var url = window.location.href;
    if(new RegExp(".+"+_name+"=([^&]+).*","gi").test(url)){
        return RegExp.$1;
    }else{
        return "";
    }
}
alert(getUrlArgs("uin"));
alert(getUrlArgs("skey"));

Read more »

html5 canvas javascript游戏开发物理引擎box2d-js学习资料

box2作为一个优秀的物理引擎,目前被应用在很多游戏中游戏。什么box2d会被大众接受并得到广泛使用呢,首先给大家介绍一下box2d的优点:

市场的游戏大部分都用C++编写,而box2d的原始版本就是用C++实现的,大家只需下载CPP文件,并把它们加入自己的工程下刚可编译,在引入你创建物理模型头文件的情况下,你就可以实例化可以模拟模型运行的对象和场景了。当然box2d其他语言的用法也大同小意。现在有多种语言实现的box2d,包括C++,Java,javascript,flash,也有iphone版和Android版;在开发游戏过程中,利用此物理引擎开发会比较简单,学会了创建物理世界后,加上相应的物体就可以实现物理模仿。而box2d不仅支持的版本比较多,并且入手比较快,参考其用户手册可以很快的实现基本的物理世界。Box2d一个开源项目有很多专业牛人在维护,还有论坛帮助解答,你同时也可以加入他们的加发中。Box2D 是一个用于游戏的 2D 刚体仿真库。程序员可以在他们的游戏里使用它,它可以使物体的运动更加可信,让世界看起来更具交互性。从游戏的视角来看,物理引擎就是一个程序性动画(proceduralanimation)的系统,而不是由动画师去移动你的物体。你可以让牛顿来做导演。

1、源码及DEMO:

http://code.google.com/p/box2dweb/

2、微软官方的一个DEMO

http://ie.microsoft.com/testdrive/Graphics/CanvasPinball/Default.html

3、初级入门资料:

http://www.linuxgraphics.cn/physics/box2d_js_overview.html

http://box2d-js.sourceforge.net/(英文)

http://directguo.com/blog/index.php/2010/05/box2d_js_tutorials/

4、Box2d官方网站:http://www.box2d.org/

5、Google Demo:

http://mrdoob.com/projects/chromeexperiments/google_gravity/

http://mrdoob.com/projects/chromeexperiments/ball_pool/

Read more »

原生javascript API实现HTML5浏览器全屏

众说周知,html5的<video>标签是一个激动人心的技术革新,但同时因不能全屏而被诟病。

这一现状已经被改变,并将被越来越多的浏览器所支持。Firefox 10 的发布就开始支持全屏API,除FireFox 10外,Chrome 15与Safari 5.1或更高版本的浏览器也已经支持原生全屏API。

值得一提的差异,全屏退出,FireFox和Safari都是使用“ESC”键退出,而Chrome 15却采用“F11”退出全屏,这些微小的差别,却会给用户带来困扰,愿Chrome能改回“ESC”退出。

在2011年10月15日,W3C发布了一份全屏API草案(由Opera团队的一名成员编写),它跟Mozilla的草案有两个主要的不同点:

一、自定义API对象,以便兼容使用

var fullScreenApi = {
    supportsFullScreen: false, //是否支持全屏
    isFullScreen: function() { return false; }, //是否全屏状态
    requestFullScreen: function() {}, //触发全屏
    cancelFullScreen: function() {}, //取消全屏
    fullScreenEventName: '', //全屏事件名
    prefix: '' //浏览器前缀
}
var browserPrefixes = 'webkit moz o ms khtml'.split(' '); //浏览器前缀列表

Read more »

页面js和css加载顺序优化建议

body里dom渲染取决于head里的外联js加载完。

根据此原理,建议如下:

1、head里出现外联js,无论如何放,css文件都不能和body里的请求并行。

2、head里面内联js要在所有外联css文件前面,才能使css文件和body里面的请求并行,不然会堵塞。

因为内联js要等head里面所有外联css加载完后才会执行。

3、外联js放在页面最后,高级浏览器会自动做优化。

一般是放在body里面的最后几行。

4、长执行的内联js无论放在页面任何位置都会影响页面渲染。

长执行的js,比如监听事件的代码:

document.getElementById('bn').onclick = function() { alert(1); }

但这行代码写到外联JS中就不影响。

Read more »

浏览器本地存储兼容方案(html5、userData)

一、本地存储概况

目前支持以下方法,实现浏览器端的本地存储:

每个cookie的大小不能超过4K。

Cookie数:

每次的http请求,cookie都会包含在包头里发送给服务器,cookie在http请求中是明文传递的。

2、flash LSO ;

local shared objects (LSOs).

Flash的LSOs 就如同Web浏览器中的cookies,它们被一些开发者称为“超级cookies”,因为LSOs可以存储大量数据,且存储和读取的都是原生的ActionScript数据类型。LSOs 默认的空间大小100 KB, 用户可以通过Flash Player’s Settings Manager控制LSOs的使用空间大小,来严格限制被使用的空间。

3、userData ;

是微软为IE专门在系统中开辟的一块存储空间,所以说只支持Windows+IE的组合,实际测试在2000(IE5.5)、XP(IE6、IE7),Vista(IE7)下都是可以正常使用的。

单个文件的大小限制是128KB,一个域名下总共可以保存1024KB的文件,文件个数应该没有限制。在受限站点里这两个值分别是64KB和640KB,所以如果考虑到各种情况的话,单个文件最好能控制64KB以下。

Read more »

javascript音频管理方案:SoundManager2

在看下HTML5游戏源码时,看到这个JS库,查找了相关资料和大家分享一下:

SoundManager2提供一套在javascript中用来控制声音的API。使用HTML5和Flash,为Javascript提供跨平台的音频控制功能(支持PC、手机、PAD等其它移动终端)。

相关链接

一、使用入门

1、引用压缩无调试版的soundmanager库(只有33Kb);

<script type=”text/javascriptsrc=”script/soundmanager2-nodebug-jsmin.js”></script>

2、配置flash文件的路径(soundmanager提供的相应flash文件,并且会根据设备配置进行自动选择相应版本)的地址,并进行初始化。

soundManager.url = 'swf';
soundManager.onready(function(){
    //初始化完毕,准备播放
});

Read more »