代码改变世界

AMD and CMD are dead之KMD.js依赖可视化工具发布

2014-06-20 11:34 by 【当耐特】, 1409 阅读, 0 推荐, 收藏, 编辑
摘要:使用 require("MyAapp.DepTree", function (DepTree) { DepTree(({ renderTo: "holder", width: "820", height: "580", data: [ { "name": "System" }, { "nam... 阅读全文

AMD and CMD are dead之KMD规范

2014-06-20 09:26 by 【当耐特】, 2835 阅读, 1 推荐, 收藏, 编辑
摘要:What’s KMD? 乱世出英雄,KMD名字的由来充满了杀气。 Kill AMD and CMD KMD为替代混乱的AMD和CMD世界而生,一统天下。或者让这个混乱的世界更加混乱,导致: KMD AMD CMD三分天下 KMD的目标从来都是远大的: JS工程化终极解决方案 使用KMDjs的工程师从来都是: 尼玛,什么东西,这么NB? KMD规范 0.KMD只暴露两个关键字,一个是def... 阅读全文

AMD and CMD are dead之js模块化黑魔法

2014-06-16 09:28 by 【当耐特】, 6630 阅读, 8 推荐, 收藏, 编辑
摘要:缘由 在2013-03-06 13:58的时候,曾甩下一片文章叫:《为什么不使用requirejs和seajs》,并放下豪言说发布一款完美的模块化库,再后来就把那篇文章删了,再然后就没有然后。该用seajs还用seajs,甚至我码的SCJ都是用requirejs组织起来的。 时光飞逝,岁月流... 阅读全文

码农干货系列【20】--add gtTime to Promise.js

2013-06-20 15:46 by 【当耐特】, 1629 阅读, 2 推荐, 收藏, 编辑
摘要:使用场景 在一些时候,希望一件task不能太快完成,需要大于多少时间才可以执行,就可以使用Promise的gtTime方法. 使用方式 Promise.gtTime(f1(), 5000).then(f2); function f1() { var promise = Promise(); setTimeout(fun... 阅读全文

码农干货系列【19】--Promise.js with AJAX

2013-05-05 10:12 by 【当耐特】, 3516 阅读, 2 推荐, 收藏, 编辑
摘要:更新 新增Promise.timeout方法,检测task执行超时并且自动reject使用 Promise.timeout(f1(), 2000).then(f2, function () { alert("timeout"); }).wait(5000).then(f3); function f1() { var promise = Promise(); setTimeout(function () { console.... 阅读全文

码农干货系列【18】--getting started with Promise.js(总)

2013-05-03 15:30 by 【当耐特】, 4311 阅读, 2 推荐, 收藏, 编辑
摘要:引用Promise.js 你可以点击这里下载。ps:如果使用了SCJ Framework,请使用SCJ.createPromise代替下面的Promisedone/resolvepromise.js提供了done和resolve方法,done负责注册成功的回调函数,resolve负责触发。 function cb() { alert('success') } var prms = Promise() prms.done(cb) setTimeout(function() { ... 阅读全文

码农干货系列【17】--Wind.js与Promise.js

2013-05-01 12:01 by 【当耐特】, 2278 阅读, 0 推荐, 收藏, 编辑
摘要:示例 先引入wind.js与promise.js: <script src="wind-all-0.7.3.js"></script> <script src="promise.js"></script>然后create: Wind.Promise.create = function (fn) { var prms = Pro... 阅读全文

码农干货系列【10】--光线追踪进阶:javascript玩转3D纹理映射

2013-03-18 07:59 by 【当耐特】, 7355 阅读, 13 推荐, 收藏, 编辑
摘要:简介 本文在光线追踪的基础之上,为了追求渲染速度和效率,去除了光线的反射、去除了透视投影(如我前面两篇干货8和干货9,所以渲染虽然是3D场景,其实不是真实看到的,但不影响实验),进行了一些有趣的尝试。此文将分享这两天尝试的成果:3D雕刻。 3D雕刻,顾名思义--在... 阅读全文

码农干货系列【9】--javascript光线追踪基础

2013-03-12 16:31 by 【当耐特】, 3626 阅读, 4 推荐, 收藏, 编辑
摘要:简介 光线追踪(ray tracing)(也叫raytracing或者光束投射法)是一个在二维(2D)屏幕上呈现三维(3D)图像的方法。为了尝试光线追踪算法,并且尽可能得保证javascript代码精炼,我做了一些尝试。 射线与球体相交检测 最开始尝试了射线与球体的相交检测(不计算交点),只判断相交还是未相交。代码如下所示: var Vector3 = function (x, y, z)... 阅读全文

码农干货系列【8】--世界上最简单的3D渲染(no webgl)

2013-03-10 21:02 by 【当耐特】, 4634 阅读, 4 推荐, 收藏, 编辑
摘要:简介 进行上图所示的3D格子地板的渲染,需要进行Canvas的像素级别操作,从视点连接屏幕(屏幕就是canvas)中的所有像素点,形成大量的射线,倘若射线与地板相交,把交点以及交点的颜色反馈给屏幕(canvas)。如下图所示: 像素操作 在进行3D渲染之前,必须了解Canvas的像素操作相关概念。在给定了width和height的canvas上,在坐标(x ,y)上的像素的inde... 阅读全文

码农干货系列【6】--javascript异步编程之:世界上最短的Promise库

2013-02-24 21:12 by 【当耐特】, 6608 阅读, 2 推荐, 收藏, 编辑
摘要:类库源码 var Promise = function () { this.thens = []; }; Promise.prototype = { resolve: function () { var t = this.thens.shift(), n; t && (n = t.apply(null, ... 阅读全文

码农干货系列【5】--lambda in js:lambda.js 1.0.0发布

2012-12-27 21:55 by 【当耐特】, 6548 阅读, 9 推荐, 收藏, 编辑
摘要:lambda.js的由来 作为一个当耐特程序员,对lambda一定不陌生。随着当耐特版本的更新迭代,C#也由委托==〉匿名委托==〉lambda表达式。由于javascript语言的约束,没有提供相应的lambda的机制,所以就有了lambda.js,让广大jser也可以 (a,b)=>a.xx==”yyy”&&b>11 一把! Query Operator 而lambda最常用的地方就是... 阅读全文

码农干货系列【4】--图像识别之矩形区域搜索

2012-07-23 07:37 by 【当耐特】, 9402 阅读, 10 推荐, 收藏, 编辑
摘要:简介 定位某个图片的矩形区域是非常有用的,这个可以通过手动的选择某个区域来实现定位,图片相关的软件都提供了这个功能;也可以像本篇一个通过程序来实现智能定位。前者会有误差,效率低下;后者选区精度高,效率高。 应用场景 1.精灵编辑器或者css sprites辅助工具(当我们需要逆着TexturePacker行事的时候),如下图所示: 2.手写识别输入 因为我们不能保证用户输入... 阅读全文

赠书:血战HTML5消除游戏,赢《HTML5实验室:Canvas世界》

2012-07-03 08:00 by 【当耐特】, 10971 阅读, 33 推荐, 收藏, 编辑
摘要:简介近日,《HTML5实验室:Canvas世界》已经出版了。欲赠送园友,思来想去,还是以游戏比拼的方式赠送园友,既然是一本HTML5的书(其实是本跨平台的书),那就用一款HTML5游戏作为竞技游戏,所以就花了几个小时的时间做了一款消除游戏(新浪小游戏总排名第一的那款)。暂时定为3---7本(个人赠送)。如果出版社支持的话,将赠送更多更多。赠送的标准是:分数从高至低排序,取排名靠前的几位园友。如果某个园友很厉害,占据了榜单前几名怎么办?没有关系,同一个博客园ID只赠送一本。所以记得先登录哦!!ps1:如果随机数被破解,园友保存好高分截图备用有关本书本书使用HTML5的Canvas作为实验平台,J 阅读全文

码农干货系列【3】--割绳子(cut the rope)制作点滴:旋转(rotation)

2012-06-11 07:44 by 【当耐特】, 6335 阅读, 13 推荐, 收藏, 编辑
摘要:旋转 在大量的游戏开发过程当中,旋转是经常被开发者使用的,通常需要得到旋转后目标点的坐标。旋转分很多种类:2D游戏世界中,以某一点为旋转目标;3D游戏世界中,以轴为旋转目标。所以本文将旋转分为四类,涵盖所有旋转的情况: 绕点旋转(2D) 绕坐标轴(x/y/z)旋转(3D) 绕坐标轴的平行轴旋转(3D) 绕任意轴旋转(3D) 绕点旋转 在绕点旋转的时候,需... 阅读全文

码农干货系列【2】--由关节(Joint)说到割绳子(cut the rope)

2012-06-08 08:03 by 【当耐特】, 4968 阅读, 22 推荐, 收藏, 编辑
摘要:简介 关节是相互连结且互相约束的物体,常见于各类物理引擎当中。关节的运用非常广泛,例如人体模拟、动物行走模拟、器材、绳子、机关、链桥等都可以灵活利用关节去模拟。 普通的关节分两种,一种是有固定点,一种没有固定点。本文分别对两种关节进行计算并且输出图片进行模拟。 关节 关节通常用下面这种表达方式: (function (window) { var Joint = functi... 阅读全文

码农干货系列【1】--方向包围盒(OBB)碰撞检测

2012-06-07 11:40 by 【当耐特】, 32792 阅读, 36 推荐, 收藏, 编辑
摘要:干货 最近一直在删文章,不是要关博洗手什么的,而是被删的文章没有达到“干货”的标准。干货的反义词是水货,比如我们经常吃的注水猪肉,它就是水货,非干货。什么是“干货”。?经过一番搜寻,标准的描述是:实用性比较强的,不含任何吹嘘水分,也没有虚假的成分,所以业内人士通常把这一类分享活动称之为“干货”。 文章是否是干货做如下几点要求: 必备条件: 1.整体样式风格整齐美观; 2.实... 阅读全文

HTML5 OO实践

2012-03-29 08:42 by 【当耐特】, 8168 阅读, 24 推荐, 收藏, 编辑
摘要:简介人工智能(Artificial Intelligence) ,英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴,但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令(智商),本篇内容中相关算法适用于子弹追踪等塔防类游戏当中。基础类二维向量(2D vector)可谓2D游戏或是动画里最常用型别了。这里二维向量用Vector2类实现,用(x, y)表示。 Vector2亦用来表示空间中的点(point),而不另建类。先看代码:1 (function(window){2varVector2=fu 阅读全文

HTML5 Canvas【所见===所得】编程工具正式发布

2012-03-28 08:28 by 【当耐特】, 11381 阅读, 34 推荐, 收藏, 编辑
摘要:+ - 使用指南 基本使用: var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18... 阅读全文

HTML5 Canvas开发者和读者的福音

2012-03-27 12:25 by 【当耐特】, 5354 阅读, 5 推荐, 收藏, 编辑
摘要:演示今天看到可见即可得的编程 ,其中是在svg中实现的。理所当然,它可以搬到 canvas当中,而且支持canvas动画播放,而不是仅仅是静态的svg。效果如下所示: Your browser does not support the canvas element. 修改颜色(fillsStyle)或者count或者angle等值试试!var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext("2d");function taiji(x, y, radius, a 阅读全文

HTML5 【IE9割绳子】制作教程来袭····

2012-03-26 08:04 by 【当耐特】, 8424 阅读, 24 推荐, 收藏, 编辑
摘要:回顾 与“Angry Birds”一样,2010年发布的“割绳子”是一款火爆的手机游戏,首先推出的是iOS版,于去年6月份推出Android版。它的游戏内容是:一个叫Om Nom的绿怪兽饿了,你必须喂他糖果,而要得到糖果,你要先割断绳子以及操纵安全气袋和泡泡,过程中还要收集星星来获取额外积分。 为了进一步宣传IE9和华丽的Web应用程序,微软与该款游戏的开发商ZeptoLab联合推出了HTML... 阅读全文

HTML5热门游戏制作---没有99美元的Impact也行

2012-03-06 08:38 by 【当耐特】, 8761 阅读, 13 推荐, 收藏, 编辑
摘要:Impact 简介Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers.Impact 一款让开发者在桌面浏览器和移动终端浏览器开发优秀的HTML5游戏的javascript游戏引擎。官网地址:http://impactjs.com/售价:99美元其中的最受欢迎且耳熟能详的莫过于下面这款:这是一个打字射击游戏,该游戏被国外很多网站评选为二十款优秀游戏之一。综合分析了一下该款游戏,总体感觉----注重细节。游戏技术要素1.资 阅读全文

repeater 模拟器 in winform

2012-02-08 17:27 by 【当耐特】, 2970 阅读, 3 推荐, 收藏, 编辑
摘要:需求 有一个这样的需求,根据给定的数据源和html模板生成html,强大的All in one code中的代码不能满足需求,所以就有了RepeaterSimulate. 其中涉及:反射、泛型、正则表达式等基础知识。 RepeaterSimulate使用 RepeaterSimulate r = new RepeaterSimulate(); ... 阅读全文

ProgressForm

2012-01-16 19:00 by 【当耐特】, 3066 阅读, 3 推荐, 收藏, 编辑
摘要:简介 在winform项目中,我们常常需要弹出一个窗体显示处理的进度,All in one code中的progress不能满足我们的需求,所以就有了ProgressForm. ProgressForm对外开放了一个DoExecute抽象方法,以便使用者override . public abstract class Action<TResult> { ... 阅读全文

绕中心旋转

2011-12-12 07:33 by 【当耐特】, 22876 阅读, 17 推荐, 收藏, 编辑
摘要:一.简介 本文告诉读者在Canvas中怎么绕中心旋转,通过此方法模拟出一个2D平面内的水珠,涉及的知识点和技巧包括:Jscex基础知识,贝塞尔曲线的绘制,合理利用CanvasRenderingContext2D的translate和rotate等API。 二.绘制椭圆 在模拟水滴之前,我们先思考一下怎么在canvas当中绘制一个椭圆。 大家可以很容易想到 下面几种方案: 1.根据椭圆笛卡尔坐标系方程绘制 2.根据椭圆极坐标方程绘制 3.根据椭圆曲率变化绘制 4.利用四条贝塞尔曲线绘制 第四中,也是性能最好的一种,这样可以避免复杂的计算,充分利用Ca... 阅读全文

HTML5游戏制作完全指南

2011-12-08 18:28 by 【当耐特】, 19023 阅读, 23 推荐, 收藏, 编辑
摘要:简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的Canvas制作一款游戏吗?跟着这个教程,你将立刻上道儿。 阅读该教程需要至少熟悉javascript相关知识。 你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。 创建画布 在画任何东西之前,我们必须创建一个画布。因... 阅读全文

怎么把CanvasLoading插件嵌入你的游戏

2011-12-07 17:01 by 【当耐特】, 3450 阅读, 3 推荐, 收藏, 编辑
摘要:一.简介 CanvasLoading插件适用于任何基于Canvas游戏的loading过程展示。 二.插件源码 Loading = function (text, fontSize,baseFontSize, color, position, interval, font, bolder) { this.text = text; this.fontSize = fontSize; this.baseFontSize=baseFontSize; this.color = colo... 阅读全文

Jscex版Loading插件V11.12.05发布

2011-12-05 17:22 by 【当耐特】, 2979 阅读, 4 推荐, 收藏, 编辑
摘要:一.简介 本插件适用于基于Canvas的游戏loading过程中的显示。 更新内容: a.loading显示的文字可配置 b.文字大小可配置 c.文字位置可配置 d.文字与文字的间距可配置 e.文字颜色、字体、是否加粗可配置 二.插件源码 Vector2 = function (x, y) { this.x = x || 0; this.y = y || 0; }; Loading = function (text, fontSize, color, pos... 阅读全文

Jscex版Loading插件预览版本抢先看

2011-12-04 17:30 by 【当耐特】, 2801 阅读, 5 推荐, 收藏, 编辑
摘要:一.简介 在大量游戏制作过程当中,必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到,比如《XXX》的Loading 一个好的Loading,可以给用户不错... 阅读全文

借来的创意

2011-12-01 08:54 by 【当耐特】, 4200 阅读, 9 推荐, 收藏, 编辑
摘要:一.简介 计数是一种最简单基本的运算,计数器就是实现这种运算的逻辑电路,计数器在数字系统中主要是对脉冲的个数进行计数,以实现测量、计数和控制的功能,同时兼有分频功能,计数器是由基本的计数单元和一些控制门所组成,计数单元则由一系列具有存储信息功能的各类触发器构成,这些触发器有RS触发器、T触发器、D触发器及JK触发器等。计数器在数字系统中应用广泛,如在电子计算机的控制器中对指令地址进行计数,以便顺序取出下一条指令,在运算器中作乘法、除法运算时记下加法、减法次数,又如在数字仪器中对脉冲的计数等等。计数器可以用来显示产品的工作状态,一般来说主要是用来表示产品已经完成了多少份的折页配页工作。它主... 阅读全文

你必须知道的10个提高Canvas性能技巧

2011-11-29 17:07 by 【当耐特】, 24221 阅读, 13 推荐, 收藏, 编辑
摘要:你还在抱怨自己写的canvas demo徘徊在10帧以下吗?你还在烦恼打开自己写的应用就听见CUP风扇转吗?你正在写一个javascript Canvas库吗?那么下面九点就是你必须知道的! 一.预渲染 错误代码: var canvas = document.getElementById("myCanvas"); var context = this.canvas.getContext('2d'); var drawAsync = eval(Jscex.compile("async", function () { while (true) 阅读全文

Text Particle Systems

2011-11-25 08:41 by 【当耐特】, 2921 阅读, 7 推荐, 收藏, 编辑
摘要:一.简介 在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择: 1.Flash制作的文字特效 2.制作一个动态的GIF 3.Javascript+dom+css 4.SVG 二.javascript+Canvas文字特效 这篇我为大家介绍第五种,也是最强大的一种,上面四种都有局限性。 我使用的是javascript+Canvas,当然我们依然用Jscex,为什么Canvas制作文字特效最强大?? 因为Canvas支持像素级别操作,它不仅可以宏观上制作一些文字特效,也可以深入实现文字粒子系统特效----Text Particle Systems。 当然... 阅读全文

每周优秀代码赏析—Jscex内核【一】

2011-11-24 08:49 by 【当耐特】, 5224 阅读, 8 推荐, 收藏, 编辑
摘要:一.简介 Jscex is JavaScript implementation of F#'s Computation Expressions. 它的灵感的源于F#,它为JavaScript语... 阅读全文

参赛作品

2011-11-22 07:29 by 【当耐特】, 6314 阅读, 9 推荐, 收藏, 编辑
摘要:一.简介 3D贪吃蛇是贪吃蛇游戏的3D版本。通过摄取食物,累积数量来通关,随着摄取食物的增加,蛇身体会慢慢变长变肥大。游戏开放了许多快捷键,方便玩家操作。游戏一共七个关卡,一关比一关难。最后一关的随机障碍物更加是玩家的噩梦。为了获取更好的游戏体验,推荐使用谷歌浏览器或者枫树浏览器。 二.游戏框架和开发团队 这个游戏是使用Jscex作为动画引擎,使用Three.js框架作为3D引擎开发的HTML5游戏. 使用到的HTML5特性主要包括Canvas, CSS3 (按钮),没有使用WebGL。后期打算加入localStorage存储关卡信息。 在游戏中, 控制小蛇躲避前方的障碍物... 阅读全文

Canvas+Video打造酷炫播放体验

2011-11-21 08:32 by 【当耐特】, 17135 阅读, 14 推荐, 收藏, 编辑
摘要:一.简介 直到现在,仍然不存在一项旨在网页上显示视频的标准。 今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。如: <video src="movie.ogg" controls="controls"></video>二.Canvas+VideoHTML5中引入新的元素canvas,其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。 drawImage函数有三种函数原 阅读全文

Jscex没有xxxAsync().stop()怎么办?

2011-11-17 22:09 by 【当耐特】, 2612 阅读, 1 推荐, 收藏, 编辑
摘要:今天一同事问我Jscex怎么没有stop啊? 异步任务就像断线的风筝,我们没法让它说停就停,但是我们在放飞它之前,可以装个定时炸弹。 通常我们可以这样退出一个异步任务: va... 阅读全文

令人震撼的表白,你hold住吗?

2011-11-15 09:02 by 【当耐特】, 17269 阅读, 18 推荐, 收藏, 编辑
摘要:一.简介 为什么程序员单身的多呢?因为面向对象的编程中,经常会遇到一个错误:找不到对象。 本文也属于单身程序员的福音范畴,让单身程序员勇敢示爱·····,但是老天保佑你的示爱对象不要用IE678~~ 本文动画效果全部基于Jscex,然后结合一些函数、粒子系统、重力场实现。下一篇带来作品讲解,本篇先饱饱眼福。 二.作品一:心碎 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head& 阅读全文

爱♥曲线,单身程序猿福音

2011-11-07 08:41 by 【当耐特】, 10330 阅读, 28 推荐, 收藏, 编辑
摘要:一.笛卡尔♥ 笛卡尔(René Descartes)是17 世纪著名的法国哲学家、数学家,有着“现代哲学之父”的称号。笛卡尔对数学的贡献也是功不可没,他创造了解析几何,开创了数学、物理学、天文学、地质学等诸多学科的新时代。 传闻,笛卡尔曾流落到瑞典,邂逅美丽的瑞典公主克里斯蒂娜(Christina)。笛卡尔发现克里斯蒂娜公主聪明伶俐,便做起了 公主的数学老师, 于是两人完全沉浸在了数学的世界中。国王知道后,认为笛卡尔配不上自己的女儿,不但强行拆散他们,还没收了之后笛卡尔写给公主的所有信件。后来,笛卡尔染上黑死病,在临死前给公主寄去了最后一封信,信中只有一行字:r=a(1-sinθ)。 阅读全文

再说AutoComplete

2011-11-04 12:16 by 【当耐特】, 5392 阅读, 6 推荐, 收藏, 编辑
摘要:一.简述 昨天support一同事,帮她的客户做类似下面的效果(自动完成): 以前在搜房的时候,弄过这个,调用楼盘字典: 这是一个小功能,也是一个大功能。因为它可以做大,也可以做小。 二.搜房的AutoComplete 比如上面我们看到搜房的这个就做大了,你要看到这样一个效果,其实搜房做了这么几件事: 1.数据库作业。把每天的楼盘字典存入XML,每个城市的对应一个X... 阅读全文

2011-11-01 13:57 by 【当耐特】, 3882 阅读, 5 推荐, 收藏, 编辑
摘要:一.简介 圆锥,数学领域术语,有两种定义。 解析几何定义:圆锥面和一个截它的平面(满足交线为圆)组成的空间几何图形叫圆锥。 立体几何定义:以直角三角形的一条直角边所在直线为旋转轴,其余两边旋转形成的面所围成的旋转体叫做圆锥。该直角边叫圆锥的轴 。 二.圆锥模拟 通过以上两个定义,我可以模拟出圆锥上所有的点: var pointPositions = []; for (var i = -100; i < 200; i += 10) { var xTemp = getRandomNumber(-i, i); ... 阅读全文