javascript版愤怒的小鸟

2011-12-15 14:35:01

最近两天B9一直在更换路由,于是宅在寝室打算用js搞一个愤怒的小鸟,看到IamZhangLei.com写的关于重力的代码于是更加坚信js可以实现angrybird。
首页使用了大量的层元素,使得更有空间感,可以在多种浏览器下运行,话说最初的首页那几层只是用repeat-x来着,最初那几只鲤鱼跳龙门一样的小鸟,setInterval时间设定的很短,后来观察一下游戏后,发现的确应该慢一些,于是开始得意了一下,因为蹦的太猛容易卡坏浏览器。
晚上一直琢磨着怎么把浏览器跟着鸟儿一起灰过去,早上就用了scroll(x,y)这个,二姑看了game那页,觉得屏幕应该以鸟为中心,于是又改了一下下,让bird飞过600px开始进行滚屏。
接下来是时候把萌猪头推倒了。样品在这里
angrybird

Read Me

2011-11-04 10:57:15


2008-2010:www.angeledwina.com 当年的集华客栈 现在看上去这个域名还是觉得因为太长了才换的。早期玩discuz的。
2010-2011:www.web55u.com  转向55u.me,并且发现wp这玩意又小又环保又耐玩。
2011-2015:55u.me 这个玉米够短!
2015-今天 orz-i.com
各种IM联系方式统一 : i#orz-i.com (#-->@)
https://github.com/skua
 

常用的js正则表达式

2011-10-18 09:55:28

•g (全文查找) •i (忽略大小写) •m (多行查找) 字符 描述 \n 换行符 \r 回车符 \t 制表符 \f 换页符(Tab) \cX 与X对应的控制字符 \b 退格符(BackSpace) \v 垂直制表符 \0 空字符("") 代码 等同于 匹配 . IE下[^\n],其它[^\n\r] 匹配除换行符之外的任何一个字符 \d [0-9] 匹配数字 \D [^0-9] 匹配非数字字符 \s [ \n\r\t\f\x0B] 匹配一个空白字符 \S [^ \n\r\t\f\x0B] 匹配一个非空白字符 \w [a-zA-Z0-9_] 匹配字母数字和下划线 \W [^a-zA-Z0-9_] 匹配除字母数字下划线之外的字符 代码 描述 * 匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。 * 等价于{0,}。 + 匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。 ? 匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。 {n} n 是一个非负整数。匹配确定的 n 次。例如,'o{2}' 不能匹配 "Bob" 中的 'o',但是能匹配 "food" 中的两个 o。 {n,} n 是一个非负整数。至少匹配n 次。例如,'o{2,}' 不能匹配 "Bob" 中的 'o',但能匹配 "foooood" 中的所有 o。 'o{1,}' 等价于 'o+'。'o{0,}' 则等价于 'o*'。 {n,m} m 和 n 均为非负整数,其中n <= m。最少匹配 n 次且最多匹配 m 次。刘, "o{1,3}" 将匹配 "fooooood" 中的前三个 o。 'o{0,1}' 等价于 'o?'。请注意在逗号和两个数之间不能有空格。
常用js验证正则表达式

闭包呀,内存泄漏呀神马的

2011-10-17 10:11:39

度娘百科关于闭包的解释
function a(){ var i=0; function b(){ alert(++i); } return b; } var c = a(); c(); 这段代码有两个特点: 1、函数b嵌套在函数a内部; 2、函数a返回函数b。
在javascript中内部函数可以访问外部函数,但是外部函数是不可以访问内部函数的。
关于内存泄漏 的产生原因(某某IT公司近期笔试题)
1 JavaScript 引起的内存对象,比如声明全局的array ,给这个数组赋值了,但是没有去释放他。
2 闭包引起的内存泄露(上面说的那个)
3 DOM操作引起的内存泄露。

TTS的发音很是诡异啊

2011-10-15 18:44:53

前些天突然想到要把tts镶到网页上,貌似到处都在提到的可访问性总是拿盲人来举例子很是不好,尽管有屏幕阅读器这玩意但其实让网页直接阅读不是来的更痛快些么。
想起了牛X的谷歌童鞋有个叫谷歌翻译的神器,所以借此搞一下。
用chrome抓取到原来生成的tts地址是酱紫的
http://translate.google.cn/translate_tts?ie=UTF-8&amp;q=酱紫的&amp;tl=zh-CN;
这玩意到底用神马打开确实是个棘手的问题,但是无意间发现把它直接丢到网页里也好,就像扔图片一样,但是为了防止页面刷新,还是偷偷的用了下会遭w3c骂的iframe。but!
但是意淫着依旧要通过w3c于是用jquery    $("#元素").append(代码块);
最早的方案:
$("#click").click(function(){
	var $makeIframe =$("<iframe id='vc' border=1 name=lantk src='' width=4 height=4 frameBorder='0'></iframe>");
	$("#iframeBox").append($makeIframe);
	var googleUrl = "http://translate.google.cn/translate_tts?ie=UTF-8&q=";
	var mannaRead = $("#click a").text();
	var tail = "&tl=zh-CN";
	var mannaFood = googleUrl+mannaRead+tail;
	$("#vc").attr("src",mannaFood);
	});
看不到啊看不到。
可是在我可爱的chrome下还好,其他的一律不鸟我。
于是放弃iframe改用embed 结果同上,于是接着改成object,终于终于可以在opera下也出声了。
改进方案:
$("#click").click(function(){

//object块生成 var object_1 ="<object id='speaker' classid='2398E32F-5C6E-11D1-8C65-0060081841DE' width='17' height='15' ><embed src='http://translate.google.cn/translate_tts?ie=UTF-8&amp;q="; var mannaRead = $("#click a").text(); var object_2 ="&amp;tl=zh-CN' width='0' height='0'></embed> </object>"; var objectNew=object_1+mannaRead+object_2; //object结束 $("#iframeBox").append(objectNew);
});
目前支持的浏览器为  chrome     opera    safari
最新地址:http://orz-i.com/test/translate_test_02.html
一定要点击文字!important 才会读哦,尽管读的很蛋痛。
 

js倒计时

2011-10-12 16:26:07

<form name="form1"> <div align="center" align="center"> <center>离2010年还有:<br> <input type="textarea" name="left" size="35" style="text-align: center"> </center> </div> </form> <script LANGUAGE="javascript"> startclock() var timerID = null; var timerRunning = false; function showtime() { Today = new Date(); var NowHour = Today.getHours(); var NowMinute = Today.getMinutes(); var NowMonth = Today.getMonth(); var NowDate = Today.getDate(); var NowYear = Today.getYear(); var NowSecond = Today.getSeconds(); if (NowYear <2000) NowYear=1900+NowYear; Today = null; Hourleft = 23 - NowHour Minuteleft = 59 - NowMinute Secondleft = 59 - NowSecond Yearleft = 2009 - NowYear Monthleft = 12 - NowMonth - 1 Dateleft = 31 - NowDate if (Secondleft<0) { Secondleft=60+Secondleft; Minuteleft=Minuteleft-1; } if (Minuteleft<0) { Minuteleft=60+Minuteleft; Hourleft=Hourleft-1; } if (Hourleft<0) { Hourleft=24+Hourleft; Dateleft=Dateleft-1; } if (Dateleft<0) { Dateleft=31+Dateleft; Monthleft=Monthleft-1; } if (Monthleft<0) { Monthleft=12+Monthleft; Yearleft=Yearleft-1; } Temp=Yearleft+'年, '+Monthleft+'月, '+Dateleft+'天,

'+Hourleft+'小时, '+Minuteleft+'分, '+Secondleft+'秒' document.form1.left.value=Temp; timerID = setTimeout("showtime()",1000); timerRunning = true; } var timerID = null; var timerRunning = false; function stopclock () { if(timerRunning) clearTimeout(timerID); timerRunning = false; } function startclock () { stopclock(); showtime(); } // --> </script>

深度and广度优先

2011-10-10 16:44:40

深度优先遍历与广度优先遍历是图遍历的算法
深度优先遍历从某个顶点出发,首先访问这个顶点,然后找出刚访问这个结点的第一个未被访问的邻结点,然后再以此邻结点为顶点,继续找它的下一个新的顶点进行访问,重复此步骤,直到所有结点都被访问完为止。
广度优先遍历从某个顶点出发,首先访问这个顶点,然后找出这个结点的所有未被访问的邻接点,访问完后再访问这些结点中第一个邻接点的所有结点,重复此方法,直到所有结点都被访问完为止。
回忆起来了,的确够基础的。。。
另外补上面向对象:
首先根据客户需求抽象出业务对象;然后对需求进行合理分层,构建相对独立的业务模块;之后设计业务逻辑,利用多态继承封装、抽象的编程思想,实现业务需求;最后通过整合各模块,达到高类聚、低耦合的效果,从而满足客户要求

CSS Sprite

2011-09-25 21:01:09

比起CSS雪碧俺更喜欢可乐,好,废话少说,上正题!
按度娘百科的解释CSS雪碧就是酱紫滴: 把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。
比如:
<body>

<p>1234567890-123456789</p>
</body>
然后CSS里酱紫滴
p{
background-image:url(css.png);
background-repeat:no-repeat;
background-position:0 -450px; width: 400px; height: 400px; }
CSS雪碧

我们把CSS里的p{}改一下 p{ background-image:url(css.png); background-repeat:no-repeat; background-position:0 0; width: 400px; height: 400px;}CSS雪碧

上css.png图片,就是CSS拼合后的图片 CSS雪碧


.sprite-01{ background-position: 0 0; width: 400px; height: 400px; } .sprite-02{ background-position: 0 -450px; width: 400px; height: 400px; } .sprite-03{ background-position: 0 -900px; width: 400px; height: 400px; } .sprite-logo{ background-position: 0 -1350px; width: 600px; height: 600px; }从上至下每个图片的css 雪碧的“坐标” 这里留一个CSS sprite 在线生成的地址
CSS 图片拼合生成器

蝶梦---凶残的重构方案

2011-09-20 12:29:55

被肢解的黄油苍蝇
flash版本中的蝴蝶飞是件很飘飘的境界,所以一定要把它搞出来。
本着打死不用flash的原则萌生了一个邪恶的想法,那就是碎尸,直接吃果果的用PS砍刀把翅膀弄断
像左边这样子 :twisted:
有点电锯杀人狂的感觉,难怪叫butterfly呢,看时间长了有那么点苍蝇的意思。
接下来用Ps另外一个武器,改变宽度,俗称width,看着大小改吧,反正看了半小时也没看出黄油苍蝇飞到低分为几个步骤,总之人眼有延迟就好了,三张就可以搞定,就是如下酱紫酱紫和酱紫
黄油苍蝇03黄油苍蝇02
黄油苍蝇01
化蝶ok
接下来用Gif来搞记得是设定是5 ,8,20 单位是1/100秒 俺用的是GIF Movie Gear这个东西
于是就化蝶ok了
这个是样品而已,原版的是往对角线飞滴,继续搞,看蝴蝶想吐了
重构地址:http://orz-i.com/recode/r_1/recode.html
 

找回最初爱上网站的那个笨饼干站长

2011-09-20 11:59:08

由于最近校招填写简历顺便翻了翻这些年做站的东东,竟在箱底发现了一些当年流行并且大爱的flash网页,现在还很喜欢,但毕竟w3c觉得那样做是不对的,所以偶打算用Xhtml css js神马的重构那些最爱。
PN-1-蝶梦原图
 
project -No1 蝶梦
原图:
演示地址
重构:
蝶梦 演示地址
2015 我看吐了 都删了