摘要：
简介 光线追踪(ray tracing)（也叫raytracing或者光束投射法)是一个在二维(2D)屏幕上呈现三维(3D)图像的方法。为了尝试光线追踪算法，并且尽可能得保证javascript代码精炼，我做了一些尝试。 射线与球体相交检测 最开始尝试了射线与球体的相交检测（不计算交点），只判断相交还是未相交。代码如下所示: var Vector3 = function (x, y, z)... 阅读全文
随笔分类 - Javascript
码农干货系列【8】--世界上最简单的3D渲染(no webgl)
2013-03-10 21:02 by 【当耐特】, 4651 阅读, 收藏, 编辑
摘要：
简介 进行上图所示的3D格子地板的渲染，需要进行Canvas的像素级别操作，从视点连接屏幕（屏幕就是canvas）中的所有像素点，形成大量的射线，倘若射线与地板相交，把交点以及交点的颜色反馈给屏幕(canvas)。如下图所示: 像素操作 在进行3D渲染之前，必须了解Canvas的像素操作相关概念。在给定了width和height的canvas上，在坐标(x ,y)上的像素的inde... 阅读全文
码农干货系列【6】--javascript异步编程之:世界上最短的Promise库
2013-02-24 21:12 by 【当耐特】, 6624 阅读, 收藏, 编辑
摘要：
类库源码 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 【当耐特】, 6565 阅读, 收藏, 编辑
摘要：
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 【当耐特】, 9458 阅读, 收藏, 编辑
摘要：
简介 定位某个图片的矩形区域是非常有用的，这个可以通过手动的选择某个区域来实现定位，图片相关的软件都提供了这个功能；也可以像本篇一个通过程序来实现智能定位。前者会有误差，效率低下；后者选区精度高，效率高。 应用场景 1.精灵编辑器或者css sprites辅助工具（当我们需要逆着TexturePacker行事的时候），如下图所示： 2.手写识别输入 因为我们不能保证用户输入... 阅读全文
HTML5 OO实践
2012-03-29 08:42 by 【当耐特】, 8181 阅读, 收藏, 编辑
摘要：
简介人工智能(Artificial Intelligence) ，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴，但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令（智商），本篇内容中相关算法适用于子弹追踪等塔防类游戏当中。基础类二维向量(2D vector)可谓2D游戏或是动画里最常用型别了。这里二维向量用Vector2类实现，用(x, y)表示。 Vector2亦用来表示空间中的点(point)，而不另建类。先看代码：1 (function(window){2varVector2=fu 阅读全文
HTML5 Canvas【所见===所得】编程工具正式发布
2012-03-28 08:28 by 【当耐特】, 11386 阅读, 收藏, 编辑
摘要：
+ - 使用指南 基本使用： var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18... 阅读全文
HTML5 【IE9割绳子】制作教程来袭····
2012-03-26 08:04 by 【当耐特】, 8445 阅读, 收藏, 编辑
摘要：
回顾 与“Angry Birds”一样，2010年发布的“割绳子”是一款火爆的手机游戏，首先推出的是iOS版，于去年6月份推出Android版。它的游戏内容是：一个叫Om Nom的绿怪兽饿了，你必须喂他糖果，而要得到糖果，你要先割断绳子以及操纵安全气袋和泡泡，过程中还要收集星星来获取额外积分。 为了进一步宣传IE9和华丽的Web应用程序，微软与该款游戏的开发商ZeptoLab联合推出了HTML... 阅读全文
HTML5热门游戏制作---没有99美元的Impact也行
2012-03-06 08:38 by 【当耐特】, 8785 阅读, 收藏, 编辑
摘要：
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.资 阅读全文
绕中心旋转
2011-12-12 07:33 by 【当耐特】, 22933 阅读, 收藏, 编辑
摘要：
一.简介 本文告诉读者在Canvas中怎么绕中心旋转，通过此方法模拟出一个2D平面内的水珠，涉及的知识点和技巧包括：Jscex基础知识，贝塞尔曲线的绘制，合理利用CanvasRenderingContext2D的translate和rotate等API。 二.绘制椭圆 在模拟水滴之前，我们先思考一下怎么在canvas当中绘制一个椭圆。 大家可以很容易想到 下面几种方案： 1.根据椭圆笛卡尔坐标系方程绘制 2.根据椭圆极坐标方程绘制 3.根据椭圆曲率变化绘制 4.利用四条贝塞尔曲线绘制 第四中，也是性能最好的一种，这样可以避免复杂的计算，充分利用Ca... 阅读全文
HTML5游戏制作完全指南
2011-12-08 18:28 by 【当耐特】, 19136 阅读, 收藏, 编辑
摘要：
简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。 阅读该教程需要至少熟悉javascript相关知识。 你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。 创建画布 在画任何东西之前，我们必须创建一个画布。因... 阅读全文
怎么把CanvasLoading插件嵌入你的游戏
2011-12-07 17:01 by 【当耐特】, 3465 阅读, 收藏, 编辑
摘要：
一.简介 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 【当耐特】, 2988 阅读, 收藏, 编辑
摘要：
一.简介 本插件适用于基于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 【当耐特】, 2808 阅读, 收藏, 编辑
摘要：
一.简介 在大量游戏制作过程当中，必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到，比如《XXX》的Loading 一个好的Loading,可以给用户不错... 阅读全文
借来的创意
2011-12-01 08:54 by 【当耐特】, 4214 阅读, 收藏, 编辑
摘要：
一.简介 计数是一种最简单基本的运算，计数器就是实现这种运算的逻辑电路，计数器在数字系统中主要是对脉冲的个数进行计数，以实现测量、计数和控制的功能，同时兼有分频功能，计数器是由基本的计数单元和一些控制门所组成，计数单元则由一系列具有存储信息功能的各类触发器构成，这些触发器有RS触发器、T触发器、D触发器及JK触发器等。计数器在数字系统中应用广泛，如在电子计算机的控制器中对指令地址进行计数，以便顺序取出下一条指令，在运算器中作乘法、除法运算时记下加法、减法次数，又如在数字仪器中对脉冲的计数等等。计数器可以用来显示产品的工作状态，一般来说主要是用来表示产品已经完成了多少份的折页配页工作。它主... 阅读全文
你必须知道的10个提高Canvas性能技巧
2011-11-29 17:07 by 【当耐特】, 24250 阅读, 收藏, 编辑
摘要：
你还在抱怨自己写的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 【当耐特】, 2937 阅读, 收藏, 编辑
摘要：
一.简介 在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择： 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 【当耐特】, 5231 阅读, 收藏, 编辑
摘要：
一.简介 Jscex is JavaScript implementation of F#'s Computation Expressions. 它的灵感的源于F#，它为JavaScript语... 阅读全文
参赛作品
2011-11-22 07:29 by 【当耐特】, 6335 阅读, 收藏, 编辑
摘要：
一.简介 3D贪吃蛇是贪吃蛇游戏的3D版本。通过摄取食物，累积数量来通关，随着摄取食物的增加，蛇身体会慢慢变长变肥大。游戏开放了许多快捷键，方便玩家操作。游戏一共七个关卡，一关比一关难。最后一关的随机障碍物更加是玩家的噩梦。为了获取更好的游戏体验，推荐使用谷歌浏览器或者枫树浏览器。 二.游戏框架和开发团队 这个游戏是使用Jscex作为动画引擎，使用Three.js框架作为3D引擎开发的HTML5游戏. 使用到的HTML5特性主要包括Canvas, CSS3 （按钮），没有使用WebGL。后期打算加入localStorage存储关卡信息。 在游戏中, 控制小蛇躲避前方的障碍物... 阅读全文
Canvas+Video打造酷炫播放体验
2011-11-21 08:32 by 【当耐特】, 17269 阅读, 收藏, 编辑
摘要：
一.简介 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。如： <video src="movie.ogg" controls="controls"></video>二.Canvas+VideoHTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。 drawImage函数有三种函数原 阅读全文