代码改变世界

阅读排行榜

零基础制作物理引擎--创造力量

2016-01-07 09:41 by 【当耐特】, 5941 阅读, 收藏,
摘要: 写在前面 "上篇" 其实有重力,但是重力是经过重心,可以把物体看出质点,问题就变得简单,经过重心只产生线速度,不产生角速度。 这篇文章的力量其实是指:力(Force)和冲量(Impulse),不一定过重心。 边写引擎过程中,边补习牛顿经典力学体系,但是依然记得大学时候物理老师反复强调:“牛顿错了,牛 阅读全文

javascript异步编程系列【十】—Jscex+Easeljs制作坦克大战

2011-09-15 08:01 by 【当耐特】, 5574 阅读, 收藏,
摘要: 一.简介为了利用当今和未来的硬件,您可以对代码进行并行化,以将工作分摊在多个处理器上。 往往,并行化需要线程和锁的低级操作,但是Jscex不用,因为javascript这种解释型语言,仅仅需要一个线程来解释它,已其他线程无关,且不冲突!二.回顾上面介绍了一下Easeljs以及其优势,并且利用Easeljs+Jscex实现了坦克的右移以及开炮,但是还存在许多问题,比如移动不能开炮,开炮不能移动。这篇主要利用Jscex并行编程模型搭起游戏的基本框架,并且解决坦克的转弯和开火。三.架构设计昨天我仔细想了想,不管是任何东西,拆得越细就越好控制。如果使用Easeljs的tick(也就相当于Jscex的. 阅读全文

再说AutoComplete

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

HTML5 Canvas开发者和读者的福音

2012-03-27 12:25 by 【当耐特】, 5371 阅读, 收藏,
摘要: 演示今天看到可见即可得的编程 ,其中是在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 阅读全文

强大的observejs

2015-05-07 17:39 by 【当耐特】, 5285 阅读, 收藏,
摘要: ##写在前面各大MVVM框架的双向绑定太难以观察,很难直观地从业务代码里知道发生了什么,我不是双向绑定的反对者,只是认为双向绑定不应该糅合进底层框架,而应该出现在业务代码中,或者是业务和框架之间的代码上,由开发者实现,由开发者决定观察什么,决定响应什么。以及Object.observe的支持度不够好... 阅读全文

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

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

HTML5 Canvas玩转酷炫大波浪进度图

2016-12-13 11:52 by 【当耐特】, 5191 阅读, 收藏,
摘要: 如上图所见,本文就是要实现上面那种效果。 由于最近 "AlloyTouch" 要写一个下拉刷新的酷炫loading效果。所以首选大波浪进度图。 首先要封装一下大波浪图片进度组件。基本的原理是利用Canvas绘制矢量图和图片素材合成出波浪特效。 本文的代码你可以在这里 "https://github. 阅读全文

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

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

javascript异步编程系列【四】----Jscex+Jquery UI打造游戏力度条

2011-08-23 07:55 by 【当耐特】, 4779 阅读, 收藏,
摘要: 如果大家玩过桌球类游戏的话,对力度条的概念一定不会陌生,如下图:还有竖直方向上的力度条,如下图:其实,类似的条条无处不在!比如进游戏时候的进度条、魔兽世界里法师施法过程中读的条等等······引入jquery ui,我们可以轻松得到下面这个静止的力度条:html: <div class="progressbar" style="width: 20%"></div>js: $(function(){$(".progressbar").progressba 阅读全文

一步一步HTML5粒子编辑器

2015-01-24 08:44 by 【当耐特】, 4767 阅读, 收藏,
摘要: 写在前面大家阅读此文之前,可以先看一篇MiloYip的文章:用JavaScript玩转游戏物理(一)运动学模拟与粒子系统,看完之后再看此文,更加容易理解。MiloYip使用的粒子是canvas中绘制的圆,还有一些粒子效果是基于 像素级别的,如:火焰字 ,但是使用像素的计算成本太大,因为需要的粒子数量... 阅读全文

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

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

javascript异步编程系列【六】----Jscex版愤怒的小鸟之冲锋陷阵鸟

2011-08-25 07:48 by 【当耐特】, 4653 阅读, 收藏,
摘要: 上一篇的的主角=红色小鸟:体型小,重量轻,进击弱,无殊效,可在迁移转变时祛除绿猪。 合适进击玻璃与木头,进击混凝土较弱。 黄色小鸟:体型较小,重量较轻,殊效为加快,应用进步击弱,应用掉队击中等。进击木头较强,进击玻璃与混凝土很弱。 对,没有错,它就这这篇文章的主角!   需求解析:冲锋陷阵鸟,在不点击加快的景象下,和红色小鸟样,当点击了加快按钮,X轴标的目标速度变成本来的3倍,Y轴标的目标变... 阅读全文

新浪网易的评论块制作

2010-06-30 20:39 by 【当耐特】, 4442 阅读, 收藏,
摘要: 最近老在项目表现层折腾,sql好久没写。不过没关系,产品要数据的时候也就是select xxx from tablename,然后身后苦苦等待数据的姑娘看见了select xxxx from tablename,身不由己地一阵狂赞-----好厉害啊。我猜她们在想:写一句话能出来这么多数据,技术牛B啊。隔行如隔山,这些赞美全当“春风过驴儿”。新浪的评论块如下图:网易的如下图:我做的的如下(借用了园里的页面哈):技术要点:1。因为 textarea里面不能放图片,所以和新浪的做法一样,选用iframe放内容,然后隐藏一个textarea用于提交。2 。JQqery tab 插件的使用(文盲... 阅读全文

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

2013-05-03 15:30 by 【当耐特】, 4359 阅读, 收藏,
摘要: 引用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() { ... 阅读全文

借来的创意

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

HTML5实验室系列【目录】

2011-09-30 19:23 by 【当耐特】, 4179 阅读, 收藏,
摘要: 阅读全文

.NET简陋服务器

2010-01-08 17:40 by 【当耐特】, 4128 阅读, 收藏,
摘要: 服务器是干啥子用滴?监听客户端,响应客户端用滴!虽然是世界上最简陋的服务器,但是也有几个注意点:1.因为要一个死循环监听客户端响应,也就是说无法和用户进行交互了,所以防止前台假死就要为监听新起一个线程;2.要把新起的线程td.IsBackground = true;设置为后台线程,这样的话线程才会随着应用程序的关闭而关闭,不然的话关了窗体,它还在运行;3.跨线程问题,在新的线程里改变UI会报跨线程改变UI的错误,所以要用Invoke;4.在监听的死循环中加入 Thread.Sleep(1);这样可以提高应用程序性能,不要担心当服务的线程正在Sleep的时候来了个请求服务器会收不到,其实是收得到 阅读全文

腾讯AlloyTeam移动Web裁剪组件AlloyCrop正式开源

2016-11-17 11:12 by 【当耐特】, 4111 阅读, 收藏,
摘要: 传送门 Github地址: "https://github.com/AlloyTeam/AlloyFinger/tree/master/alloy_crop" 在线Demo演示: 简介 裁剪图片的应用场景有头像编辑、图像编辑,在移动端要配合手势以及进行触摸反馈来进行变形以确认用户的选区进行裁剪。Al 阅读全文

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

折线转曲线

2015-09-15 10:12 by 【当耐特】, 3867 阅读, 收藏,
摘要: 写在前面 这个东西其实是有价值的东西。因为在软体模拟、数学方程可视化、流体模拟、数据可视化等等方面都有其用武之地。 如水的模拟: 心形函数方程转图像 线性报表 其原理都是通过三次贝塞尔曲线将有限个数的点平滑化。 问题建模 已知若干个点,绘制出该点连接的曲线。 这里实验平台使用浏览器环境,即Canva 阅读全文

react动画难写?试试react版transformjs

2016-12-19 09:37 by 【当耐特】, 3849 阅读, 收藏,
摘要: 简介 "transformjs" 在非react领域用得风生水起,那么react技术栈的同学能用上吗?答案是可以的。junexie童鞋已经造了个 "react版本" 。 动画实现方式 传统 web 动画的两种方式 : 1. 纯粹的CSS3 :如:transition/animation+transf 阅读全文

WAVE

2011-10-31 10:53 by 【当耐特】, 3840 阅读, 收藏,
摘要: 一.简介 波,在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播,这个物理量(或其扰动,下同)成为空间位置和时间的函数,而且是这样的函数,即在时间t出现在空间r处周围的分布,会在时间(t+t┡)出现在空间(r+vt┡)的周围。 v一般说是个常矢量,就是有关物理量(或其扰动)的传播速度。物理量函数称为波函数,数学上它是一个叫波动方程的在特定边界条件下的解。 物理定义:某一物理量的扰动或振动在空间逐点传递时形成的运动。不同形式的波虽然在产生机制、传播方式和与物质的相互作用等方面存在很大差别,但在传播时却表现出多方面的共性,可用相同的数学方法描述和处理。 二.实现 ... 阅读全文

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

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

单机版扫雷

2010-01-06 08:12 by 【当耐特】, 3708 阅读, 收藏,
摘要: 今天的主要任务就是把单击版的搞定,这是过渡到网络版的必备过程。如果没有玩过扫雷的,建议先去体验一下;体验完后,自己尝试写出扫雷的算法;经过思考揣摩推敲才能有收获。不建议一上来就下载源码剖析,跟踪代码!【一】单机版扫雷划为两层第一层为Button,Button盖在Lable上,Lable被隐藏在Button下面;第二层为Lable, Lable上的背景图片改成地雷图案表示有雷。雷区的大家我定为20*20.Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-- 阅读全文

超级小的web手势库AlloyFinger发布

2016-05-26 09:50 by 【当耐特】, 3660 阅读, 收藏,
摘要: 简介 针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持,也不用再担心click 300ms的延迟了。拥有两个版本,无依赖的独立版和react版本。除了Dom对象,也可监听Canvas内元素的手势(需要Canvas引擎内置对象支持addEventListener绑定touch相 阅读全文

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

2013-05-05 10:12 by 【当耐特】, 3529 阅读, 收藏,
摘要: 更新 新增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.... 阅读全文

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

2011-12-07 17:01 by 【当耐特】, 3491 阅读, 收藏,
摘要: 一.简介 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... 阅读全文

腾讯AlloyTeam正式发布Canvas魔幻线条 - curvejs

2017-04-21 10:19 by 【当耐特】, 3471 阅读, 收藏,
摘要: "【原文链接】" 写在前面 "curvejs" 中文读["克js"],是腾讯AlloyTeam打造的一款魔幻线条框架,让线条成为一名优秀的舞者,让线条们成为优秀的舞团,HTML5 Canvas就是舞台。 官网: "https://alloyteam.github.io/curvejs/" 你还记得 阅读全文

每周优秀代码赏析系列【二】----Jif

2011-10-30 12:06 by 【当耐特】, 3455 阅读, 收藏,
摘要: 一.简介 Jif是一个轻量级的events,Jif提供了事件监听on、发送send和清空clear接口,我们可以为其扩展remove 等接口。 Jif也是观察者模式的一种优雅实现。 二.... 阅读全文

超小Web手势库AlloyFinger原理

2016-11-11 10:01 by 【当耐特】, 3374 阅读, 收藏,
摘要: 目前 "AlloyFinger" 作为腾讯手机QQ web手势解决方案,在各大项目中都发挥着作用。 感兴趣的同学可以去Github看看: "https://github.com/AlloyTeam/AlloyFinger" 在腾讯,如:兴趣部落、QQ群、QQ动漫、腾讯学院、TEDxTencent、 阅读全文

Wechart 饼图

2018-07-31 11:10 by 【当耐特】, 3331 阅读, 收藏,
摘要: 预览 "Preview" | "Usage Source" | "Pie Source" | "Tutorial" "Wechart by Cax" "Cax" 众所周知 Cax 既能开发游戏、又能开发图表。本文将从饼图开始 Wechart 的图表之旅。 Wechart 完全基于 Group 体系构 阅读全文

移动web开发调试工具AlloyLever介绍

2016-05-10 13:27 by 【当耐特】, 3220 阅读, 收藏,
摘要: 简介 web调试有几个非常频繁的刚需:看log、看error、看AJAX发包与回包。其他的如timeline和cookie以及localstorage就不是那么频繁,但是AlloyLever都支持。如你所见: 特征 点击alloylever按钮之间切换显示或隐藏工具面板 Console会输出所有用户 阅读全文

ProgressForm

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

腾讯AlloyTeam正式发布omi-cli脚手架 - 创建网站无需任何配置

2017-06-05 12:06 by 【当耐特】, 3125 阅读, 收藏,
摘要: omi cli "omi cli" "omi cli命令" "omi框架" 用户指南 "文件目录" "npm 脚本" "npm start" "npm run dist" "代码分割" "兼容 IE8" "插入 CSS" "插入组件局部 CSS" "局部CSS使用图片" "插入 Less" "插入组 阅读全文

repeater 模拟器 in winform

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

Jscex版Loading插件V11.12.05发布

2011-12-05 17:22 by 【当耐特】, 3009 阅读, 收藏,
摘要: 一.简介 本插件适用于基于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... 阅读全文

SQL跨服查询

2010-05-05 08:56 by 【当耐特】, 2998 阅读, 收藏,
摘要: 今日产品部要导批数据,但是需要连接查询查询的几个表不在同一服务器上。所以我开始是这么干的:1.查询一台服务器的数据,并导入本地Excel2.查询另一台服务器的数据,并导入本地Excel3.Excle导入数据库,数据库自带了Excel导入数据库的功能4.连接查询,OVER!后来才知道产品部要全国50多个城市的数据,所以每个城市的我都要重复这样干一遍。这时才想起跨库查询了。1.开通分布式查询权限exe... 阅读全文

Text Particle Systems

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

AMD and CMD are dead之KMD规范

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

腾讯 AlloyCrop 1.0 发布

2017-08-02 11:10 by 【当耐特】, 2894 阅读, 收藏,
摘要: 写在前面 "AlloyCrop" 这个项目是8个月前发布的,作为 "AlloyFinger" 的典型案例,发布之后被BAT等其他公司广泛使用。但是发布之后,有两个问题一直没有抽出时间去解决: 裁剪图像的分辨率太小,是否可配? pinch双指放大的时候,放大的中心不是双指中心,是否可以优化? 现在很高 阅读全文