摘要：
简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。 阅读该教程需要至少熟悉javascript相关知识。 你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。 创建画布 在画任何东西之前，我们必须创建一个画布。因... 阅读全文
随笔分类 - HTML5
怎么把CanvasLoading插件嵌入你的游戏
2011-12-07 17:01 by 【当耐特】, 3453 阅读, 收藏, 编辑
摘要：
一.简介 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 【当耐特】, 2979 阅读, 收藏, 编辑
摘要：
一.简介 本插件适用于基于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 【当耐特】, 2801 阅读, 收藏, 编辑
摘要：
一.简介 在大量游戏制作过程当中，必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到，比如《XXX》的Loading 一个好的Loading,可以给用户不错... 阅读全文
借来的创意
2011-12-01 08:54 by 【当耐特】, 4200 阅读, 收藏, 编辑
摘要：
一.简介 计数是一种最简单基本的运算，计数器就是实现这种运算的逻辑电路，计数器在数字系统中主要是对脉冲的个数进行计数，以实现测量、计数和控制的功能，同时兼有分频功能，计数器是由基本的计数单元和一些控制门所组成，计数单元则由一系列具有存储信息功能的各类触发器构成，这些触发器有RS触发器、T触发器、D触发器及JK触发器等。计数器在数字系统中应用广泛，如在电子计算机的控制器中对指令地址进行计数，以便顺序取出下一条指令，在运算器中作乘法、除法运算时记下加法、减法次数，又如在数字仪器中对脉冲的计数等等。计数器可以用来显示产品的工作状态，一般来说主要是用来表示产品已经完成了多少份的折页配页工作。它主... 阅读全文
你必须知道的10个提高Canvas性能技巧
2011-11-29 17:07 by 【当耐特】, 24226 阅读, 收藏, 编辑
摘要：
你还在抱怨自己写的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 【当耐特】, 2921 阅读, 收藏, 编辑
摘要：
一.简介 在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择： 1.Flash制作的文字特效 2.制作一个动态的GIF 3.Javascript+dom+css 4.SVG 二.javascript+Canvas文字特效 这篇我为大家介绍第五种，也是最强大的一种，上面四种都有局限性。 我使用的是javascript+Canvas,当然我们依然用Jscex,为什么Canvas制作文字特效最强大?? 因为Canvas支持像素级别操作，它不仅可以宏观上制作一些文字特效，也可以深入实现文字粒子系统特效----Text Particle Systems。 当然... 阅读全文
参赛作品
2011-11-22 07:29 by 【当耐特】, 6314 阅读, 收藏, 编辑
摘要：
一.简介 3D贪吃蛇是贪吃蛇游戏的3D版本。通过摄取食物，累积数量来通关，随着摄取食物的增加，蛇身体会慢慢变长变肥大。游戏开放了许多快捷键，方便玩家操作。游戏一共七个关卡，一关比一关难。最后一关的随机障碍物更加是玩家的噩梦。为了获取更好的游戏体验，推荐使用谷歌浏览器或者枫树浏览器。 二.游戏框架和开发团队 这个游戏是使用Jscex作为动画引擎，使用Three.js框架作为3D引擎开发的HTML5游戏. 使用到的HTML5特性主要包括Canvas, CSS3 （按钮），没有使用WebGL。后期打算加入localStorage存储关卡信息。 在游戏中, 控制小蛇躲避前方的障碍物... 阅读全文
Canvas+Video打造酷炫播放体验
2011-11-21 08:32 by 【当耐特】, 17146 阅读, 收藏, 编辑
摘要：
一.简介 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。如： <video src="movie.ogg" controls="controls"></video>二.Canvas+VideoHTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。 drawImage函数有三种函数原 阅读全文
令人震撼的表白,你hold住吗？
2011-11-15 09:02 by 【当耐特】, 17270 阅读, 收藏, 编辑
摘要：
一.简介 为什么程序员单身的多呢？因为面向对象的编程中，经常会遇到一个错误：找不到对象。 本文也属于单身程序员的福音范畴，让单身程序员勇敢示爱·····，但是老天保佑你的示爱对象不要用IE678~~ 本文动画效果全部基于Jscex，然后结合一些函数、粒子系统、重力场实现。下一篇带来作品讲解，本篇先饱饱眼福。 二.作品一：心碎 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head& 阅读全文
爱♥曲线,单身程序猿福音
2011-11-07 08:41 by 【当耐特】, 10330 阅读, 收藏, 编辑
摘要：
一.笛卡尔♥ 笛卡尔（René Descartes）是17 世纪著名的法国哲学家、数学家，有着“现代哲学之父”的称号。笛卡尔对数学的贡献也是功不可没，他创造了解析几何，开创了数学、物理学、天文学、地质学等诸多学科的新时代。 传闻，笛卡尔曾流落到瑞典，邂逅美丽的瑞典公主克里斯蒂娜（Christina）。笛卡尔发现克里斯蒂娜公主聪明伶俐，便做起了 公主的数学老师， 于是两人完全沉浸在了数学的世界中。国王知道后，认为笛卡尔配不上自己的女儿，不但强行拆散他们，还没收了之后笛卡尔写给公主的所有信件。后来，笛卡尔染上黑死病，在临死前给公主寄去了最后一封信，信中只有一行字：r=a(1-sinθ)。 阅读全文
锥
2011-11-01 13:57 by 【当耐特】, 3882 阅读, 收藏, 编辑
摘要：
一.简介 圆锥，数学领域术语，有两种定义。 解析几何定义：圆锥面和一个截它的平面（满足交线为圆）组成的空间几何图形叫圆锥。 立体几何定义：以直角三角形的一条直角边所在直线为旋转轴，其余两边旋转形成的面所围成的旋转体叫做圆锥。该直角边叫圆锥的轴 。 二.圆锥模拟 通过以上两个定义，我可以模拟出圆锥上所有的点： var pointPositions = []; for (var i = -100; i < 200; i += 10) { var xTemp = getRandomNumber(-i, i); ... 阅读全文
WAVE
2011-10-31 10:53 by 【当耐特】, 3757 阅读, 收藏, 编辑
摘要：
一.简介 波，在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播，这个物理量（或其扰动，下同）成为空间位置和时间的函数,而且是这样的函数,即在时间t出现在空间r处周围的分布,会在时间(t+t┡)出现在空间(r+vt┡)的周围。 v一般说是个常矢量,就是有关物理量（或其扰动）的传播速度。物理量函数称为波函数，数学上它是一个叫波动方程的在特定边界条件下的解。 物理定义：某一物理量的扰动或振动在空间逐点传递时形成的运动。不同形式的波虽然在产生机制、传播方式和与物质的相互作用等方面存在很大差别，但在传播时却表现出多方面的共性，可用相同的数学方法描述和处理。 二.实现 ... 阅读全文
世界上最短的时钟代码！更短的，有木有？
2011-10-16 09:15 by 【当耐特】, 15883 阅读, 收藏, 编辑
摘要：
一.简介Processing.js作者是John Resig，这是继Jquery之后，他的第二个力作。Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。Processing.js是一个开放的编程... 阅读全文
javascript异步编程系列【十一】----HTML5 canvas编程入门游戏发布
2011-10-08 07:41 by 【当耐特】, 6464 阅读, 收藏, 编辑
摘要：
一.简介1976年，Gremlin平台推出了一款经典街机游戏Blockade。游戏中，两名玩家分别控制一个角色在屏幕上移动，所经之处砌起围栏。角色只能向左、右方向90度转弯，游戏目标保证让对方先撞上屏幕或围栏。 听起来有点复杂？其实就是下面这个样子： 基本上就是两条每走一步都会长大的贪吃蛇比谁后完蛋，玩家要做的就是避免撞上障碍物和越来越长的身体。更多照片、视频可以看 GamesDBase 的介绍。 Blockade 很受欢迎，类似的游戏先后出现在 Atari 2600、TRS-80、苹果 2 等早期游戏机、计算机上。但真正让这种游戏形式红遍全球的还是21年后随诺基亚手机走向世界的贪吃蛇游戏—— 阅读全文
摄像机、投影、3D旋转、缩放
2011-09-23 08:18 by 【当耐特】, 20670 阅读, 收藏, 编辑
摘要：
简述3D效果分两种，一种是伪3D骨架，一种是3D实体.3D骨架：是通过大量的计算将3D世界中所有点投影到二维平面中。3D实体:通过摄像机向投影面发射射线与世界中的物体交汇，把与物体交汇点的颜色渲染到投影面（光线追踪的基础） 。本系列的所有演示都是3D骨架，非3D实体。本文将穿插图片、公式、代码、演示... 阅读全文