摘要: GruntMate是什么? 一个基于Grunt的项目管理可视化工具(还不知道Grunt是什么?可以谷歌一下就知道了!)GruntMate有哪些功能?方便的管理基于Grunt的项目方便统一管理Grunt插件提供可视化启动、停止Grunt项目监听Gruntfile.js文件变化,自动重启Grunt任务方便搜索定位Grunt日志uglifyjs的压缩/美化图片转base64雪碧图合并功能GruntMate下载在使用中有任何问题,欢迎反馈给我博客园文件上传大小,弄不上去,大家可以到github上下github:https://github.com/floydcash/gruntmate欢迎大家X一下.阅读全文
posted @ 2013-11-14 10:53 Floyd 阅读(1886) 评论(5) 编辑
摘要: 之前写的小游戏,要么就比较简单,要么就是比较难看,或者人物本身是不会动的。结合了其它人的经验,研究了一下精灵运动,就写一个简单的小游戏来试一下。介绍一下几个主要的类:Frame:帧的定义,主要描述动画的一帧Animation:动画的定义,主要描述一个连贯的动画,由多个帧组成Sprite:精灵的定义,主要描述一个完整的实体,由多个动画组成TimeProcess:时间管理,由requestAnimationFrame完成Person:一个完整人定义,就是主人公--男人BlockBase:块的基类,下降中的障碍物基类,包含一些基本的参数与方法NormalBlock:普通块,继承于BlockBase,阅读全文
posted @ 2013-09-10 20:16 Floyd 阅读(2507) 评论(13) 编辑
摘要: 使用Grunt遇到的问题?必须要安装NodeJS必须安装grunt-cli需要编写复杂的Gruntfile.js规则每个项目中必须存在nodejs的grunt模块不方便管理每一个包含grunt的项目无法快速开始一个项目解决思路直接把NodeJS跟grunt-cli包含进去?弄个有UI的界面来管理?用程序简化gruntfile的规则?将所有项目中需要的grunt模块包含到一起?默认内置一些常用功能模块?解决方案 -- nodewebkit集成了nodejs,省去NodeJS安装集成webkit内核,方便编写界面适合前端人员开发一次开发,兼容三大平台window/mac/linux遇到问题一.如何阅读全文
posted @ 2013-09-09 12:49 Floyd 阅读(2553) 评论(5) 编辑
摘要: 很久没有更新博客了,最近比较忙,而且也没什么idea!最近看了一个坦克大战的html5源码,发觉颇有收获。所以抽空写了一个相对于以前的小游戏复杂些的塔防游戏!也算是一种对于自身的突破!虽然是demo版,也不能太丑,所以我还是找了一些素材图片,找素材图片还真麻烦!本次用到了5个canvas画布标签!map:用于绘制背景地图,基本上画上一次就不会重画。main:用于绘制敌人与子弹,因为这两个基本上会一...阅读全文
posted @ 2011-06-18 16:46 Floyd 阅读(7242) 评论(26) 编辑
摘要: 当我们需要连续执行几个函数,而这几个函数会一直对页面元素进行操作时,很可能页面会出现短暂的卡,然后,一下子爆炸性的出现所有信息。一般我们会用setTimeout(fn,0);这种来执行,其实js的setTimeout,特别是IE6的,响应时间最快也要17毫秒左右,所以,设置成0,意义不大。而且,这种做法,存在不连续,不连贯性。所以,自己写了个简单的。1/**2*@authorfloyd3*@name异步处理事件队列4*@examplevarqe=newQueneEnginer();qe.add(fn,context,arrParam);qe.start();5*/67varQueneEngin阅读全文
posted @ 2011-03-24 14:46 Floyd 阅读(2132) 评论(8) 编辑
摘要: 最近在android手机上,发现一款小游戏,叫跳云,玩法很简单,点击一下屏幕,小人就会往下跳,要站在云上,不然就结束了,在跳的过程中,会收到风的影响,使下落偏移。所以我就想用js来迅速山寨一个来试试。发觉以前的js游戏,都是用了很多个setTimeout的计时器,效率不咋D,所以采用html5的写法来写js游戏,用一个setInterval来实现。思路跟以前很不同。玩法很简单,单击游戏屏幕就可以了,注意风向。风向:无层数:0UI就做得比较粗糙啦。。。BUG也会有的。。。希望大家会喜欢。。。注释源码上都有完整源码>>顺带说一句,在偶然的机会,发现,竟然有人用我的js小游戏去参加IE9阅读全文
posted @ 2011-02-21 14:49 Floyd 阅读(2742) 评论(10) 编辑
摘要: 好久没写过小游戏了,最近抽时间写了一个,看了一些高人写的游戏,无限感慨呀。。。也从中学到了不少东西。我不会写什么大的游戏,因为需要很多时间与精力,而且自认水平有限,个人喜欢写些小游戏。这次的游戏是【是男人就忍30秒】,游戏玩法很简单,就是用键盘控制飞机,飞来飞去,躲开子弹,看你能撑多久。本来是打算写一个教程来一步步说明的,但后来想了想,还是算了,免得误人子弟,在源码上加些注释就可以。没有测试过IE...阅读全文
posted @ 2011-01-17 18:25 Floyd 阅读(5131) 评论(31) 编辑
摘要: 自己总结出来的使用方法。。。。Mark一下!1。循环绑定No Use:[代码]结果:点击每一个li,都是弹出lists.length的值。原因:onclick事件中的i值只是引用,最后循环执行完了,i = lists.length。 Use:[代码]结果:点击每一个li,弹出对应li的编号i值。原因:将i值传递进内部的函数中,此时函数已经执行了,所以,i这个值就是当时的值。2。配置对应访问No Use:[代码]结果:返回需要的配置值。分析:每次调用都需要重新定义list变量以及赋值; Use:[代码]结果:返回需要配置值。分析:只需要定义与赋值一次list变量。3。封装类No Use:[代码]阅读全文
posted @ 2011-01-06 23:30 Floyd 阅读(837) 评论(8) 编辑
摘要: 延迟执行,其实就是用到了setTimeout这个函数。善于利用这个函数,可以减少很多ajax的请求,以及dom操作。1。延迟切换tab需求:页面上有几个tab,切换tab的时候,会对某个特定区域的数据进行拉取更新。弊端:用户从第一个tab切换一直快速切到尾,就会产生n个ajax请求。其实用户只是需要看到最后一个tab的数据。[代码]一个比较简单的例子,绑定在tab上的onmouseover,如果用户不停的来回切换tab,ajax请求不会执行,只有停顿500毫秒后,才会执行,500毫秒,其实蛮短的,基本上不会影响到用户体验。2。延迟自动完成需求:在文本输入框中,监听用户输入,实现自动完成功能。弊阅读全文
posted @ 2010-12-30 00:13 Floyd 阅读(10873) 评论(2) 编辑
摘要: 在这个万恶的IE6还生存的年代,我们很多时候都会遇到一些莫名其怪的诡异bugs,而这些很大部分都是来源与IE6。1。神奇的cursor[代码]这段看起来很普通的代码,却蕴藏着一个bug,就是在IE6下,当鼠标离开时,a标签的样式cursor:url("none");同时会产生一个404的请求,其它浏览器,一切正常。解决方案:cursor="default";就没事了。2。神奇的a标签地址[代码]当动态修改A标签的href的值,其值存在email的格式,IE6就会很智能的把innerHTML的值也改为href的值,其它浏览器一切正常。解决方案:在email地址前加个空格就可以了。3。神奇的a标签阅读全文
posted @ 2010-12-11 16:32 Floyd 阅读(2439) 评论(9) 编辑