代码改变世界

随笔分类 - Jscex

绕中心旋转

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

HTML5游戏制作完全指南

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

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

2011-12-07 17:01 by 【当耐特】, 3155 阅读, 收藏, 编辑
摘要:一.简介 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 【当耐特】, 2760 阅读, 收藏, 编辑
摘要:一.简介 本插件适用于基于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 【当耐特】, 2611 阅读, 收藏, 编辑
摘要:一.简介 在大量游戏制作过程当中,必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到,比如《XXX》的Loading 一个好的Loading,可以给用户不错... 阅读全文

借来的创意

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

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

2011-11-29 17:07 by 【当耐特】, 22555 阅读, 收藏, 编辑
摘要:你还在抱怨自己写的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 【当耐特】, 2752 阅读, 收藏, 编辑
摘要:一.简介 在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择: 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 【当耐特】, 4925 阅读, 收藏, 编辑
摘要:一.简介 Jscex is JavaScript implementation of F#'s Computation Expressions. 它的灵感的源于F#,它为JavaScript语... 阅读全文

参赛作品

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

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

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

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

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

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

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

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

WAVE

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

javascript异步编程系列【十一】----HTML5 canvas编程入门游戏发布

2011-10-08 07:41 by 【当耐特】, 6062 阅读, 收藏, 编辑
摘要:一.简介1976年,Gremlin平台推出了一款经典街机游戏Blockade。游戏中,两名玩家分别控制一个角色在屏幕上移动,所经之处砌起围栏。角色只能向左、右方向90度转弯,游戏目标保证让对方先撞上屏幕或围栏。 听起来有点复杂?其实就是下面这个样子: 基本上就是两条每走一步都会长大的贪吃蛇比谁后完蛋,玩家要做的就是避免撞上障碍物和越来越长的身体。更多照片、视频可以看 GamesDBase 的介绍。 Blockade 很受欢迎,类似的游戏先后出现在 Atari 2600、TRS-80、苹果 2 等早期游戏机、计算机上。但真正让这种游戏形式红遍全球的还是21年后随诺基亚手机走向世界的贪吃蛇游戏—— 阅读全文

CnBlogs博文demo演示技巧比较:jsfiddle完胜

2011-10-07 20:46 by 【当耐特】, 20272 阅读, 收藏, 编辑
摘要:一.简介如果你是一名前端博主,你希望通过代码+演示来透彻的讲解一些技巧,并且无缝嵌入你的博客,那么jsfiddle是一个很好的选择。本文将比较博客园前端dev们各种演示方式,大家可以挑选自己喜欢的方式。二.jsFiddle简介jsFiddle的官方网站:http://jsfiddle.net/它包括了顶端的控制按钮,如下图:分别代表:运行、保存、重置、代码格式化,代码语法错误检查下面的4个windows你可以分别调试HTML,CSS,Javascript,右下角显示代码的运行结果。在左边的操作区,你可以选择相关的js类库,支持的还是相当全的。当然,也支持自定义的类库,这个很不错。这个工具可以有 阅读全文

HTML5实验室系列【目录】

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

摄像机、投影、3D旋转、缩放

2011-09-23 08:18 by 【当耐特】, 19373 阅读, 收藏, 编辑
摘要:简述3D效果分两种,一种是伪3D骨架,一种是3D实体.3D骨架:是通过大量的计算将3D世界中所有点投影到二维平面中。3D实体:通过摄像机向投影面发射射线与世界中的物体交汇,把与物体交汇点的颜色渲染到投影面(光线追踪的基础) 。本系列的所有演示都是3D骨架,非3D实体。本文将穿插图片、公式、代码、演示... 阅读全文

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

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

javascript异步编程系列【八】--Jscex版火拼俄罗斯

2011-09-09 07:13 by 【当耐特】, 6038 阅读, 收藏, 编辑
摘要:一.简介俄罗斯方块(Tetris, 俄文:Тетрис)是一款风靡全球的电视游戏机和掌上游戏机游戏,它由俄罗斯人阿列克谢·帕基特诺夫发明,故得此名。俄罗斯方块的基本规则是移动、旋转和摆放游戏自动输出的各种方块,使之排列成完整的一行或多行并且消除得分。由于上手简单、老少皆宜,从而家喻户晓,风靡世界。 二.需求分析(完全按照QQ游戏的制作,如下图:)三.技术分析与实现1.方块位置定位解决方案:建立盒子... 阅读全文

javascript异步编程系列【七】----扫盲,我们为什么要用Jscex

2011-09-07 08:45 by 【当耐特】, 5559 阅读, 收藏, 编辑
摘要:有人问我,不用Jscex是怎么把算法拆烂拆散的?为什么要用Jscex?为什么不用? 那么就从高中演讲冒泡培训说起吧··· 【冒泡排序】基本思想(以升序举例):§形象比喻:像水面冒泡一样每次从水底浮到水面.§具体而言:比较相邻的两个数据元素,反序则交换。经过一趟排序后,最小值元素移到最上位置,其他较小的元素也向最上端位置移动(一趟起泡) 。 §代码实现:对于有n个数据元素的数据序列,共需n-1趟排序... 阅读全文

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

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

javascript异步编程系列【五】----Jscex制作愤怒的小鸟

2011-08-24 08:01 by 【当耐特】, 7969 阅读, 收藏, 编辑
摘要:Jscex真的能制作愤怒的小鸟?在我没有接触Jscex之前,我也不相信!但是只要解决了重力场运动和碰撞的两大物理问题,Jscex版的愤怒小鸟,那就是囊中之物。如果关注这个系列的话,在javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较中,模拟了苹果在重力场下的自由落体运动。那么我们可以轻松的帮它扩展一个水平方向上的速度.看效果请按: 可以看得出来,有点... 阅读全文

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

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

javascript异步编程系列【二】----自由落体

2011-08-19 07:49 by 【当耐特】, 5964 阅读, 收藏, 编辑
摘要:重力场:地球重力作用的空间。在该空间中,每一点都有惟一的一个重力矢量与之相对应。各种网络游戏,不管是3D的还是第一视角的,或者横版游戏(如冒险岛),模拟一个重力场是必须的。先回顾一下谷歌在牛顿诞辰,logo换成了自由落体的苹果。<html><scriptlanguage="javascript">varh=0,v=1;window.setTimeout(aa,2000);functionaa(){vari=self.setInterval("bb()",25);}functionbb(){varf=document.getElem 阅读全文

javascript异步编程系列【一】----用Jscex画圆

2011-08-16 08:54 by 【当耐特】, 12928 阅读, 收藏, 编辑
摘要:一.简介 关注老赵的jscex很久了,jscex利用eval(str)的无限可能,从“$async” 到“async”,从不支持if else等 到支持 if else等·,jscex正在不断完善和优化当中。jscex完全可以投入生产环境了··二.画圆 昨天讲完pi,今天来画圆吧! 在支持html5的浏览器中执行下面代码:<!DOCTYPEHTML><html><body><canvasid="myCanvas"width="480"height="300"sty 阅读全文