代码改变世界

随笔分类 -  HTML5

移动Web利器transformjs入门

2016-11-25 11:06 by 【当耐特】, 8627 阅读, 收藏, 编辑
摘要: 简介 在过去的两年,越来越多的同事、朋友和其他不认识的童鞋进行移动web开发的时候,都使用了 "transformjs" ,所有必要介绍一下,让更多的人受益,提高编程效率,并享受编程乐趣。(当然transformjs不仅仅支持移动设备, "支持CSS3 3D Transforms的浏览器" 都能正常 阅读全文

超小Web手势库AlloyFinger原理

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

时光倒流程序设计-AlloyTicker

2016-07-25 11:10 by 【当耐特】, 1821 阅读, 收藏, 编辑
摘要: 熵与负熵 熵遵循熵增原理,即无序非热能与热能之间的转换具有方向性。薛定谔说过:生命本质在于负熵。熵代表的是无序,负熵就是熵的对立,而负熵表示的则是有序。汲取负熵(米饭、面包、牛奶、鸡蛋),可以简单的理解为从外界吸收了物质或者能量之后,转化成负熵流,使系统的熵降低,人体变得更加有序。 那么一直吃饭为何 阅读全文

AlloyRenderingEngine燃烧的进度条

2015-05-25 09:25 by 【当耐特】, 2538 阅读, 收藏, 编辑
摘要: 写在前面Github: https://github.com/AlloyTeam/AlloyGameEngineHTML 5新增了progress标签,那么再去使用AlloyRenderingEngine去模拟进度条是否多余? 不多余。有四大好处: 样式更加灵活(想怎么绘制就怎么绘制) ... 阅读全文

AlloyRenderingEngine文本框组件

2015-05-20 09:36 by 【当耐特】, 1078 阅读, 收藏, 编辑
摘要: 写在前面Github: https://github.com/AlloyTeam/AlloyGameEngine在dom元素里,自带了input标签,设置其type为text,它就是一个文本框。那么在Canvas中模拟input文本框是不是闲的没事找事?绝对不是!因为在游戏当中可以统一化像素管理,具... 阅读全文

AlloyRenderingEngine继承

2015-04-28 14:59 by 【当耐特】, 1075 阅读, 收藏, 编辑
摘要: 写在前面不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine然后star一下,多谢支持:)。前几天发了篇向ES6靠齐的Class.js,当初jr为什么不把父类的实例暴露给子类,其原因还是为了延续原型继承的习惯,子类重写就... 阅读全文

AlloyRenderingEngine之Shape

2015-04-23 16:49 by 【当耐特】, 1035 阅读, 收藏, 编辑
摘要: 写在前面不读文章,只对代码感兴趣可以直接跳转到这里 https://github.com/AlloyTeam/AlloyGameEngine然后star一下,多谢支持:)。游戏或者应用中,不是所有的地方都是贴图,Shape 也有很常见的应用场景,如游戏中显示HP的血条。大量的Shape可以组成矢量图... 阅读全文

spritecow改造

2015-03-09 09:47 by 【当耐特】, 2416 阅读, 收藏, 编辑
摘要: 快速入口 不读文章可以直接拐向这里: spritecow二代:https://kmdjs.github.io/arejs tool sprite/ 写在前面 工欲善其事必先利其器,最近fork了一份spritecow代码进行了大量升级改造, 作为 "AlloyRenderingEngine"... 阅读全文

一步一步HTML5粒子编辑器

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

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

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

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

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

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

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

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

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

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

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

HTML5 OO实践

2012-03-29 08:42 by 【当耐特】, 8168 阅读, 收藏, 编辑
摘要: 简介人工智能(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 阅读, 收藏, 编辑
摘要: + - 使用指南 基本使用: 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 阅读, 收藏, 编辑
摘要: 演示今天看到可见即可得的编程 ,其中是在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 阅读, 收藏, 编辑
摘要: 回顾 与“Angry Birds”一样,2010年发布的“割绳子”是一款火爆的手机游戏,首先推出的是iOS版,于去年6月份推出Android版。它的游戏内容是:一个叫Om Nom的绿怪兽饿了,你必须喂他糖果,而要得到糖果,你要先割断绳子以及操纵安全气袋和泡泡,过程中还要收集星星来获取额外积分。 为了进一步宣传IE9和华丽的Web应用程序,微软与该款游戏的开发商ZeptoLab联合推出了HTML... 阅读全文

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

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