摘要：使用 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 【當耐特】, 2923 閱讀, 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 【當耐特】, 6666 閱讀, 8 推薦, 收藏,
摘要：緣由 在2013-03-06 13:58的時候，曾甩下一片文章叫：《為什么不使用requirejs和seajs》，并放下豪言說發布一款完美的模塊化庫，再后來就把那篇文章刪了，再然后就沒有然后。該用seajs還用seajs，甚至我碼的SCJ都是用requirejs組織起來的。 時光飛逝，歲月流... 閱讀全文
碼農干貨系列【20】--add gtTime to Promise.js
2013-06-20 15:46 by 【當耐特】, 1647 閱讀, 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 【當耐特】, 3525 閱讀, 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 【當耐特】, 4347 閱讀, 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 【當耐特】, 2313 閱讀, 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 【當耐特】, 7394 閱讀, 13 推薦, 收藏,
摘要：簡介 本文在光線追蹤的基礎之上，為了追求渲染速度和效率，去除了光線的反射、去除了透視投影（如我前面兩篇干貨8和干貨9，所以渲染雖然是3D場景，其實不是真實看到的，但不影響實驗），進行了一些有趣的嘗試。此文將分享這兩天嘗試的成果：3D雕刻。 3D雕刻，顧名思義--在... 閱讀全文
碼農干貨系列【9】--javascript光線追蹤基礎
2013-03-12 16:31 by 【當耐特】, 3716 閱讀, 4 推薦, 收藏,
摘要：簡介 光線追蹤(ray tracing)（也叫raytracing或者光束投射法)是一個在二維(2D)屏幕上呈現三維(3D)圖像的方法。為了嘗試光線追蹤算法，并且盡可能得保證javascript代碼精煉，我做了一些嘗試。 射線與球體相交檢測 最開始嘗試了射線與球體的相交檢測（不計算交點），只判斷相交還是未相交。代碼如下所示: var Vector3 = function (x, y, z)... 閱讀全文
碼農干貨系列【8】--世界上最簡單的3D渲染(no webgl)
2013-03-10 21:02 by 【當耐特】, 4698 閱讀, 4 推薦, 收藏,
摘要：簡介 進行上圖所示的3D格子地板的渲染，需要進行Canvas的像素級別操作，從視點連接屏幕（屏幕就是canvas）中的所有像素點，形成大量的射線，倘若射線與地板相交，把交點以及交點的顏色反饋給屏幕(canvas)。如下圖所示: 像素操作 在進行3D渲染之前，必須了解Canvas的像素操作相關概念。在給定了width和height的canvas上，在坐標(x ,y)上的像素的inde... 閱讀全文
碼農干貨系列【6】--javascript異步編程之:世界上最短的Promise庫
2013-02-24 21:12 by 【當耐特】, 6636 閱讀, 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 【當耐特】, 6590 閱讀, 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 【當耐特】, 9525 閱讀, 10 推薦, 收藏,
摘要：簡介 定位某個圖片的矩形區域是非常有用的，這個可以通過手動的選擇某個區域來實現定位，圖片相關的軟件都提供了這個功能；也可以像本篇一個通過程序來實現智能定位。前者會有誤差，效率低下；后者選區精度高，效率高。 應用場景 1.精靈編輯器或者css sprites輔助工具（當我們需要逆著TexturePacker行事的時候），如下圖所示： 2.手寫識別輸入 因為我們不能保證用戶輸入... 閱讀全文
贈書:血戰HTML5消除游戲,贏《HTML5實驗室:Canvas世界》
2012-07-03 08:00 by 【當耐特】, 11038 閱讀, 33 推薦, 收藏,
摘要：簡介近日，《HTML5實驗室:Canvas世界》已經出版了。欲贈送園友，思來想去，還是以游戲比拼的方式贈送園友,既然是一本HTML5的書（其實是本跨平臺的書），那就用一款HTML5游戲作為競技游戲,所以就花了幾個小時的時間做了一款消除游戲（新浪小游戲總排名第一的那款）。暫時定為3---7本（個人贈送）。如果出版社支持的話,將贈送更多更多。贈送的標準是：分數從高至低排序,取排名靠前的幾位園友。如果某個園友很厲害，占據了榜單前幾名怎么辦？沒有關系，同一個博客園ID只贈送一本。所以記得先登錄哦！！ps1:如果隨機數被破解,園友保存好高分截圖備用有關本書本書使用HTML5的Canvas作為實驗平臺，J 閱讀全文
碼農干貨系列【3】--割繩子(cut the rope)制作點滴:旋轉(rotation)
2012-06-11 07:44 by 【當耐特】, 6401 閱讀, 13 推薦, 收藏,
摘要：旋轉 在大量的游戲開發過程當中，旋轉是經常被開發者使用的，通常需要得到旋轉后目標點的坐標。旋轉分很多種類：2D游戲世界中，以某一點為旋轉目標；3D游戲世界中，以軸為旋轉目標。所以本文將旋轉分為四類，涵蓋所有旋轉的情況： 繞點旋轉（2D） 繞坐標軸（x/y/z）旋轉（3D） 繞坐標軸的平行軸旋轉（3D） 繞任意軸旋轉（3D） 繞點旋轉 在繞點旋轉的時候，需... 閱讀全文
碼農干貨系列【2】--由關節(Joint)說到割繩子(cut the rope)
2012-06-08 08:03 by 【當耐特】, 5020 閱讀, 22 推薦, 收藏,
摘要：簡介 關節是相互連結且互相約束的物體，常見于各類物理引擎當中。關節的運用非常廣泛，例如人體模擬、動物行走模擬、器材、繩子、機關、鏈橋等都可以靈活利用關節去模擬。 普通的關節分兩種，一種是有固定點，一種沒有固定點。本文分別對兩種關節進行計算并且輸出圖片進行模擬。 關節 關節通常用下面這種表達方式： (function (window) { var Joint = functi... 閱讀全文
碼農干貨系列【1】--方向包圍盒(OBB)碰撞檢測
2012-06-07 11:40 by 【當耐特】, 34133 閱讀, 36 推薦, 收藏,
摘要：干貨 最近一直在刪文章，不是要關博洗手什么的，而是被刪的文章沒有達到“干貨”的標準。干貨的反義詞是水貨，比如我們經常吃的注水豬肉，它就是水貨，非干貨。什么是“干貨”。？經過一番搜尋，標準的描述是：實用性比較強的，不含任何吹噓水分，也沒有虛假的成分，所以業內人士通常把這一類分享活動稱之為“干貨”。 文章是否是干貨做如下幾點要求： 必備條件： 1.整體樣式風格整齊美觀； 2.實... 閱讀全文
HTML5 OO實踐
2012-03-29 08:42 by 【當耐特】, 8206 閱讀, 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 【當耐特】, 11402 閱讀, 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 【當耐特】, 5371 閱讀, 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 【當耐特】, 8521 閱讀, 24 推薦, 收藏,
摘要：回顧 與“Angry Birds”一樣，2010年發布的“割繩子”是一款火爆的手機游戲，首先推出的是iOS版，于去年6月份推出Android版。它的游戲內容是：一個叫Om Nom的綠怪獸餓了，你必須喂他糖果，而要得到糖果，你要先割斷繩子以及操縱安全氣袋和泡泡，過程中還要收集星星來獲取額外積分。 為了進一步宣傳IE9和華麗的Web應用程序，微軟與該款游戲的開發商ZeptoLab聯合推出了HTML... 閱讀全文
HTML5熱門游戲制作---沒有99美元的Impact也行
2012-03-06 08:38 by 【當耐特】, 8845 閱讀, 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 【當耐特】, 3006 閱讀, 3 推薦, 收藏,
摘要：需求 有一個這樣的需求，根據給定的數據源和html模板生成html，強大的All in one code中的代碼不能滿足需求，所以就有了RepeaterSimulate. 其中涉及：反射、泛型、正則表達式等基礎知識。 RepeaterSimulate使用 RepeaterSimulate r = new RepeaterSimulate(); ... 閱讀全文
ProgressForm
2012-01-16 19:00 by 【當耐特】, 3134 閱讀, 3 推薦, 收藏,
摘要：簡介 在winform項目中，我們常常需要彈出一個窗體顯示處理的進度，All in one code中的progress不能滿足我們的需求，所以就有了ProgressForm. ProgressForm對外開放了一個DoExecute抽象方法，以便使用者override . public abstract class Action<TResult> { ... 閱讀全文
繞中心旋轉
2011-12-12 07:33 by 【當耐特】, 23011 閱讀, 17 推薦, 收藏,
摘要：一.簡介 本文告訴讀者在Canvas中怎么繞中心旋轉，通過此方法模擬出一個2D平面內的水珠，涉及的知識點和技巧包括：Jscex基礎知識，貝塞爾曲線的繪制，合理利用CanvasRenderingContext2D的translate和rotate等API。 二.繪制橢圓 在模擬水滴之前，我們先思考一下怎么在canvas當中繪制一個橢圓。 大家可以很容易想到 下面幾種方案： 1.根據橢圓笛卡爾坐標系方程繪制 2.根據橢圓極坐標方程繪制 3.根據橢圓曲率變化繪制 4.利用四條貝塞爾曲線繪制 第四中，也是性能最好的一種，這樣可以避免復雜的計算，充分利用Ca... 閱讀全文
HTML5游戲制作完全指南
2011-12-08 18:28 by 【當耐特】, 19246 閱讀, 23 推薦, 收藏,
摘要：簡介 創建畫布 游戲循環 Hello world 創建player 鍵盤控制 a:使用jQuery Hotkeys b:移動player 添加更多游戲元素 炮彈 敵人 使用圖片 碰撞檢測 聲音 簡介 你想使用HTML5的Canvas制作一款游戲嗎？跟著這個教程，你將立刻上道兒。 閱讀該教程需要至少熟悉javascript相關知識。 你可以先玩這款游戲或者直接閱讀文章并且下載游戲源碼。 創建畫布 在畫任何東西之前，我們必須創建一個畫布。因... 閱讀全文
怎么把CanvasLoading插件嵌入你的游戲
2011-12-07 17:01 by 【當耐特】, 3486 閱讀, 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 【當耐特】, 3005 閱讀, 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 【當耐特】, 2816 閱讀, 5 推薦, 收藏,
摘要：一.簡介 在大量游戲制作過程當中，必不可少的一個重要元素就是Loading.在大量的flash游戲當中我們經常可以看到，比如《XXX》的Loading 一個好的Loading,可以給用戶不錯... 閱讀全文
借來的創意
2011-12-01 08:54 by 【當耐特】, 4254 閱讀, 9 推薦, 收藏,
摘要：一.簡介 計數是一種最簡單基本的運算，計數器就是實現這種運算的邏輯電路，計數器在數字系統中主要是對脈沖的個數進行計數，以實現測量、計數和控制的功能，同時兼有分頻功能，計數器是由基本的計數單元和一些控制門所組成，計數單元則由一系列具有存儲信息功能的各類觸發器構成，這些觸發器有RS觸發器、T觸發器、D觸發器及JK觸發器等。計數器在數字系統中應用廣泛，如在電子計算機的控制器中對指令地址進行計數，以便順序取出下一條指令，在運算器中作乘法、除法運算時記下加法、減法次數，又如在數字儀器中對脈沖的計數等等。計數器可以用來顯示產品的工作狀態，一般來說主要是用來表示產品已經完成了多少份的折頁配頁工作。它主... 閱讀全文
你必須知道的10個提高Canvas性能技巧
2011-11-29 17:07 by 【當耐特】, 24305 閱讀, 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 【當耐特】, 2965 閱讀, 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 【當耐特】, 5240 閱讀, 8 推薦, 收藏,
摘要：一.簡介 Jscex is JavaScript implementation of F#'s Computation Expressions. 它的靈感的源于F#，它為JavaScript語... 閱讀全文
參賽作品
2011-11-22 07:29 by 【當耐特】, 6369 閱讀, 9 推薦, 收藏,
摘要：一.簡介 3D貪吃蛇是貪吃蛇游戲的3D版本。通過攝取食物，累積數量來通關，隨著攝取食物的增加，蛇身體會慢慢變長變肥大。游戲開放了許多快捷鍵，方便玩家操作。游戲一共七個關卡，一關比一關難。最后一關的隨機障礙物更加是玩家的噩夢。為了獲取更好的游戲體驗，推薦使用谷歌瀏覽器或者楓樹瀏覽器。 二.游戲框架和開發團隊 這個游戲是使用Jscex作為動畫引擎，使用Three.js框架作為3D引擎開發的HTML5游戲. 使用到的HTML5特性主要包括Canvas, CSS3 （按鈕），沒有使用WebGL。后期打算加入localStorage存儲關卡信息。 在游戲中, 控制小蛇躲避前方的障礙物... 閱讀全文
Canvas+Video打造酷炫播放體驗
2011-11-21 08:32 by 【當耐特】, 17322 閱讀, 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 【當耐特】, 2648 閱讀, 1 推薦, 收藏,
摘要：今天一同事問我Jscex怎么沒有stop啊？ 異步任務就像斷線的風箏，我們沒法讓它說停就停，但是我們在放飛它之前，可以裝個定時炸彈。 通常我們可以這樣退出一個異步任務： va... 閱讀全文
令人震撼的表白,你hold住嗎？
2011-11-15 09:02 by 【當耐特】, 17331 閱讀, 18 推薦, 收藏,
摘要：一.簡介 為什么程序員單身的多呢？因為面向對象的編程中，經常會遇到一個錯誤：找不到對象。 本文也屬于單身程序員的福音范疇，讓單身程序員勇敢示愛·····，但是老天保佑你的示愛對象不要用IE678~~ 本文動畫效果全部基于Jscex，然后結合一些函數、粒子系統、重力場實現。下一篇帶來作品講解，本篇先飽飽眼福。 二.作品一：心碎 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head& 閱讀全文
愛?曲線,單身程序猿福音
2011-11-07 08:41 by 【當耐特】, 10415 閱讀, 28 推薦, 收藏,
摘要：一.笛卡爾? 笛卡爾（René Descartes）是17 世紀著名的法國哲學家、數學家，有著“現代哲學之父”的稱號。笛卡爾對數學的貢獻也是功不可沒，他創造了解析幾何，開創了數學、物理學、天文學、地質學等諸多學科的新時代。 傳聞，笛卡爾曾流落到瑞典，邂逅美麗的瑞典公主克里斯蒂娜（Christina）。笛卡爾發現克里斯蒂娜公主聰明伶俐，便做起了 公主的數學老師， 于是兩人完全沉浸在了數學的世界中。國王知道后，認為笛卡爾配不上自己的女兒，不但強行拆散他們，還沒收了之后笛卡爾寫給公主的所有信件。后來，笛卡爾染上黑死病，在臨死前給公主寄去了最后一封信，信中只有一行字：r=a(1-sinθ)。 閱讀全文
再說AutoComplete
2011-11-04 12:16 by 【當耐特】, 5403 閱讀, 6 推薦, 收藏,
摘要：一.簡述 昨天support一同事，幫她的客戶做類似下面的效果（自動完成）： 以前在搜房的時候，弄過這個，調用樓盤字典： 這是一個小功能，也是一個大功能。因為它可以做大，也可以做小。 二.搜房的AutoComplete 比如上面我們看到搜房的這個就做大了，你要看到這樣一個效果，其實搜房做了這么幾件事： 1.數據庫作業。把每天的樓盤字典存入XML,每個城市的對應一個X... 閱讀全文
錐
2011-11-01 13:57 by 【當耐特】, 3909 閱讀, 5 推薦, 收藏,
摘要：一.簡介 圓錐，數學領域術語，有兩種定義。 解析幾何定義：圓錐面和一個截它的平面（滿足交線為圓）組成的空間幾何圖形叫圓錐。 立體幾何定義：以直角三角形的一條直角邊所在直線為旋轉軸，其余兩邊旋轉形成的面所圍成的旋轉體叫做圓錐。該直角邊叫圓錐的軸 。 二.圓錐模擬 通過以上兩個定義，我可以模擬出圓錐上所有的點： var pointPositions = []; for (var i = -100; i < 200; i += 10) { var xTemp = getRandomNumber(-i, i); ... 閱讀全文
浙公網安備 33010602011771號