摘要: 如果是单纯的运行一个node进程,那会比较简单,例如: node ./example.js 但是一般来说,当我们运行一个node进程之后,我们可能希望对这个进程进行更多的管理,例如,当node程序是一个server服务时,我们就有更多的需求。 例如: 1.服务挂掉的时候自动重启。 2.列出所有服务,包括服务的信息。 3.能够重启/终止某个服务。 4.为服务的运行记录日志。阅读全文
posted @ 2014-11-02 20:58 Cson 阅读(980) 评论(3) 编辑
摘要: 目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的script脚本中引入所用js就可以了。 但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以node作为后端为例): 1.spa的应用,需要同时支持服务端直出页面以及客户端pjax拉取数据渲染,客户端和服务器公用一套渲染模板并执行大部分类似的逻辑。 2.一个通过websocket对战的游戏,客户端和服务端可能需要进行类似的逻辑计算,两套代码分别用于对用户客户端的展示以及服务端实际数值的计算。 这些情况下,很可能希望我们客户端代码的逻辑能够同时无缝运行在服务端。阅读全文
posted @ 2014-10-20 23:04 Cson 阅读(1407) 评论(1) 编辑
摘要: cnGameJS是本人开发的一个基于HTML5的游戏框架,包括资源加载,碰撞检测,动画等模块。本系列文章主要介绍各个模块的开发流程,以及附上一个使用该框架进行开发的小游戏demo:《超级玛丽游戏demo》阅读全文
posted @ 2012-02-14 12:39 Cson 阅读(12628) 评论(8) 编辑
摘要: 功能说明: 基于HTML5的超级玛丽游戏的demo,方向键左右控制移动,方向键上控制跳跃,该游戏基于本人开发的HTML5游戏框架cnGameJS(详情点击这里:HTML5游戏框架cnGameJS开发实录)。 请用最新版本浏览器查看。效果展示:代码实现: 该游戏demo主要包含的元素有:资源加载,外部输入,碰撞检测,动画,游戏循环以及场景,我将一步步进行分析讲解。 1.资源加载: 我们首先要有一个游戏对象,代表一个关卡。该对象有如下三个方法:initialize,update和draw。它们分别的功能是初始化,更新所有游戏元素和绘制所有游戏元素。在游戏开始前,必须先加载所有图片资源...阅读全文
posted @ 2012-02-14 12:37 Cson 阅读(11373) 评论(4) 编辑
摘要: 功能说明: 通过鼠标移动,实时绘制出3d旋转的线条。 兼容IE 5 6 7 8 9 10 firefox chrome阅读全文
posted @ 2012-01-29 01:17 Cson 阅读(3833) 评论(23) 编辑
摘要: 效果预览:支持行拖动,列拖动的表格插件col1_headcol2_headcol3_headcol4_head12342345345645674678功能说明:当鼠标移动到表头区域时可以对列进行拖动排序,鼠标移动到行区域时可以对行进行拖动排序。支持IE6 7 8 firefox chrome实现原理:当鼠标在表头区域按下时,复制现有的table(不复制其后代结点),并把选择列的所有元素复制添加到新table中,通过按下时的鼠标位置和鼠标移动坐标,确定新table的位置,在行区域按下时同理。代码分析:var SortTable = (function() { returnfunction(...阅读全文
posted @ 2011-07-08 20:41 Cson 阅读(3052) 评论(40) 编辑
摘要: 效果预览:半径:颜色:速度:弹性(0-1):入射角(0-360):起始X坐标(0-400):起始Y坐标(0-400):功能说明:一个基于HTML5 canvas的小球物理测试系统,用户可以手动为新的小球设置不同的属性值(颜色,半径,速度等),从而在canvas中发射小球,小球在运动过程中会收到重力,弹性以及摩擦力的影响。实现原理:在小球飞行过程中,以初始速度,入射角以及重力系数作为依据,正交分解得出小球X轴和Y轴上的分速度,通过定时器不断刷新canvas,显示出小球飞行的动画。当小球和墙壁产生碰撞时,以小球弹性为依据计算能量损耗,当小球在墙壁滚动时,以墙壁摩擦系数为依据计算其能量损耗。代码分析阅读全文
posted @ 2011-06-30 17:57 Cson 阅读(2856) 评论(22) 编辑
摘要: 如果是单纯的运行一个node进程,那会比较简单,例如: node ./example.js 但是一般来说,当我们运行一个node进程之后,我们可能希望对这个进程进行更多的管理,例如,当node程序是一个server服务时,我们就有更多的需求。 例如: 1.服务挂掉的时候自动重启。 2.列出所有服务,包括服务的信息。 3.能够重启/终止某个服务。 4.为服务的运行记录日志。阅读全文
posted @ 2014-11-02 20:58 Cson 阅读(980) 评论(3) 编辑
摘要: 目前对于前端工程师而言,如果只针对浏览器编写代码,那么很简单,只需要在页面的script脚本中引入所用js就可以了。 但是某些情况下,我们可能需要在服务端也跑一套类似的逻辑代码,考虑如下这些情景(以node作为后端为例): 1.spa的应用,需要同时支持服务端直出页面以及客户端pjax拉取数据渲染,客户端和服务器公用一套渲染模板并执行大部分类似的逻辑。 2.一个通过websocket对战的游戏,客户端和服务端可能需要进行类似的逻辑计算,两套代码分别用于对用户客户端的展示以及服务端实际数值的计算。 这些情况下,很可能希望我们客户端代码的逻辑能够同时无缝运行在服务端。阅读全文
posted @ 2014-10-20 23:04 Cson 阅读(1407) 评论(1) 编辑
摘要: 在网上可以找到很多关于旋转矩形碰撞检测的方法,砖家也有文章对这种碰撞检测作过分析:方向包围盒(OBB)碰撞检测。本文主要是对其中的细节加上一些自己的分析,并结合网上另外一些关于旋转矩形碰撞检测的资料,和大家一起探讨实现的技术细节。阅读全文
posted @ 2012-08-15 00:59 Cson 阅读(3146) 评论(0) 编辑
摘要: 如果是涉及到游戏或动画的编程,我们很可能会用到几何变换。如果在大学过线性代数的话,我们就会知道,无论是2d还是3d的几何变换,矩阵都是实现线性变换的一个重要工具。任意线性变换都可以用矩阵表示为易于计算的一致形式,并且多个变换也可以很容易地通过矩阵的相乘连接在一起。本文章主要对如下的变换进行简单的封装,并简单阐述其中的变换原理:   1.平移变换:只改变图形的位置,不改变大小。   2.旋转变换:保持图形各部分之间的关系,变换后形状不变。   3.比例变换:可改变图形大小和形状。   4.错切变换:引起图形角度关系的改变,甚至导致图形发生畸变。   5.对称变换:使图形对称于x轴或y轴或y=x或y=-x的变换。阅读全文
posted @ 2012-05-06 18:41 Cson 阅读(1733) 评论(9) 编辑
摘要: 功能说明:   在一分钟内,使用鼠标圈泡泡,其中泡泡的分值分别为10、20、30、-10、-20、-30分,可以一次圈多个泡泡,倒计时结束即计算总分值,该游戏基于cnGameJS。阅读全文
posted @ 2012-04-09 20:05 Cson 阅读(2443) 评论(13) 编辑
摘要: 之前看过hongru的事情没有想象中那么难--JX官网首页3D粒子效果,和当耐特砖家的HTML5实验室【三十八】--玩转像素系列【二】,因此自己也试着利用getImageData写一下粒子效果。原理上应该和他们的差不多,不过采用了输入即可得的形式,在文本框输入任何内容,可以在画布中得出输入内容的粒子效果。由于前面两篇文章已经把粒子效果的实现原理阐述得比较清楚,因此这里就不再重新详述,只说说实现时的几个要点。阅读全文
posted @ 2012-04-02 11:23 Cson 阅读(4657) 评论(1) 编辑
摘要: 功能说明:   基于HTML5的横版射击游戏,参考自flash游戏《双面特工》。方向键控制移动,空格键射击。体验前请先关闭输入法。   该游戏基于自己开发的HTML5游戏框架cnGameJS。阅读全文
posted @ 2012-03-15 16:30 Cson 阅读(5233) 评论(34) 编辑
摘要: 功能说明:   游戏中在躲避敌人攻击的同时,需要收集三种不同的钥匙,开启对应的门,最后到达目的地。   该游戏同样基于自己开发的HTML5游戏框架cnGameJS。   推荐用chrome浏览器查看。阅读全文
posted @ 2012-03-05 22:31 Cson 阅读(3432) 评论(3) 编辑
摘要: 功能描述:   左右方向键控制玩家的方向,上下方向键控制玩家的前进和后退。 在上面的效果预览中,可以看到右边是2D的平面地图,而左边的则是第一人称的3D视图,这两幅图的关系是非常密切的,实质上,实现3D视觉的过程,就是依据2D地图把地图转换成第一人称视觉的过程。   在之前的一篇文章:《javascript实现3D房间》中,3D效果的实现只局限于平面(意思是从侧面看没有立体效果),在这种有局限性的3D效果中,我们以一个个物体为单位,通过不同物体平面之间的视觉差实现3D。而在这次的效果中,为了使物体从不同角度看都能具有立体效果,我们把单位从平面改成线。阅读全文
posted @ 2012-02-27 00:24 Cson 阅读(7737) 评论(6) 编辑
摘要: 功能描述: 结合A*算法和HTML5完成的一个寻路demo。 鼠标点击地图任意位置,飞鸟会寻找最短路程到达该位置。 阅读全文
posted @ 2012-02-22 00:19 Cson 阅读(3590) 评论(9) 编辑