![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas游戏开发
文章平均质量分 79
blessdyb
这个作者很懒,什么都没留下…
展开
-
Canvas做游戏实践分享(一)
近期看了几本老外的书,学习了一些大神们的博客,接触了一下火的不得了的canvas做游戏,把自己的学习过程分享出来。1.游戏的基本内容1.1什么是动画 动画是通过连续播放一系列画面,给视觉造成连续变化的图画。它的基本原理与电影、电视一样,都是视觉原理。医学已证明,人类具有视觉暂留的特性,就是说人的眼睛看到一幅画或一个物体后,在1/24秒内不会消失。利用这一原理,在一幅画还没...2012-02-08 21:23:24 · 261 阅读 · 0 评论 -
Canvas做游戏实践分享(十一)
7 缓冲和弹跳 下面我们来介绍一下很常用的缓冲和弹跳的处理。在我们实现复杂运动时,这两种技术会处理大多种的情况。缓冲与弹跳非常均是用来处理将一个对象从已知起点移动到给定终点的技术——缓冲是指对象滑动到目标位置并停止,而弹跳是指对象做有摩擦力的弹簧振子运动。它们有一些共同点:已知初始位置与目标位置运动参数与距离成正相关具体原理是缓冲的速度大小与距离成正相关,而...2012-03-19 14:59:04 · 170 阅读 · 0 评论 -
Canvas做游戏实践分享(十)
6 用户交互——移动物体 游戏的核心在于交互,很多时候需要用户动手来操作游戏对象,很基本的一个操作就是移动物体。接下来我们会介绍如何拖动物体,在画布上扔物体等。6.1 选择与释放对象 使用鼠标对物体的拖拽操作主要有三个步骤——鼠标进入物体范围并按下,鼠标移动及鼠标释放。这涉及到三个鼠标事件:mousedown,mousemove,mouseup。我们...2012-02-17 07:17:25 · 114 阅读 · 0 评论 -
Canvas做游戏实践分享(九)
反弹 反弹的处理原理很简单,在运动对象碰到边界后,我们将其放置到与边缘紧貼的位置,之后将其方向反向即可(因为边界是水平或竖直的,我们只需要考虑一个方向上的分速度反向,如果碰撞面是倾斜的,就需要进行坐标系统的旋转,这个之后会专门介绍)。 仍然拿小球系统来分析,只需要在每一帧绘制小球前执行以下代码即可:if (ball.x + ball.radius > righ...2012-02-16 00:38:21 · 103 阅读 · 0 评论 -
Canvas做游戏实践分享(八)
5.边界控制与摩擦力 在大多数的游戏设计中,会有环境边界控制来帮助我们保证画布中的对象在运动的过程中不会脱离画面。同时,对象的运动环境很少会是真空的情况,所以就会存在着摩擦力阻碍物体的速度变化。5.1 环境边界控制 如果我们关注的运动对象在移动的过程中消失在了视窗之外,我们有两大类的选择:一种是将对象重新移动到当前的视窗中或者不再关注此对象,另一种方式是使当前...2012-02-14 23:57:08 · 175 阅读 · 0 评论 -
Canvas做游戏实践分享(七)
4.2 加速度 加速度是改变速度大小及方向的一个属性,在物体受力的过程中,会产生加速度来改变速度的大小及方向。加速度的处理与速度的处理非常类似。一维坐标系统下的加速度 一维坐标系统下加速度的实现很简单,我们仍然使用小球系统来模拟,为小球对象添加X轴与Y轴上的加速度属性。实现起来有两步:初始化加速度值,在每一帧开始时为速度增加加速度的值。如下:ball.ax=INITIA...2012-02-13 23:08:12 · 115 阅读 · 0 评论 -
Canvas做游戏实践分享(六)
4.1速度 运动最基本的属性就是速度。注意这里的速度是物理中所说的速度(Velocity),它包括大小及方向两部分组成。在动画中,如果我们已知当前一帧对象的位置以及速度,那在下一帧我们就能计算出物体所在的位置。在大多数情况下,速度的大小是按像素/帧为单位的,但实际运行中,由于浏览器的帧率不稳定性,会出现小的差别。如果应用对于统一帧率要求很严格,可以使用其它的方式来处理,之后我们会介绍...2012-02-13 07:37:04 · 114 阅读 · 0 评论 -
Canvas做游戏实践分享(五)
3.5 渐变 Canvas的渐变有两各路 ,线性或径向。在使用gradient时,注意使用createLinearGradient与createRadiusGradient所创建的fillStyle均只在其指定的矩形/圆环区域内生效,如果要fill的图形处于gradient对象之后,...2012-02-12 11:44:02 · 103 阅读 · 0 评论 -
Canvas做游戏实践分享(四)
3.4 使用quadraticCurveTo绘制二次贝赛尔曲线 Canvas提供了一系列的方法来绘制曲线,比如quadraticCurveTo(通过起始两个点以及一个控制点来绘制,前两个参数为控制点横纵坐标,后两个参数为终点横纵坐标,使用的是数学上的二次贝赛尔方程)。下面我们来看一下常见的一些使用。 固定控制点 如下程序,我们实现了一个固定起始点,使用鼠...2012-02-12 09:03:33 · 104 阅读 · 0 评论 -
Canvas做游戏实践分享(三)
3. Canvas 常见用法3.1 canvas中的色彩 对于canvas中色彩的表示,主要沿用CSS的四种方式:#RRGGBB 十六进制表示法#RGB 上述十六进制中特殊色彩的简写表达,两种表示法的对应关系为复制R,G,B位上的数值,如#0bf是#00bbff的简写表达方式rgb(R,G,B) 函数式的表达方式,各色彩取值为0~255rgba(...2012-02-11 20:58:10 · 131 阅读 · 0 评论 -
Canvas做游戏实践分享(二)
2.游戏中的数学知识 在游戏的开发中,数学知识特别是其中的三角函数使用特别广泛2.1 角度 在使用canvas来制作动画的过程中,我们使用到的角度都是以弧度为单位的,角度与弧度之间的换算单位如下:radians=degrees*Math.PI/180 同时,在canvas中的坐标系是以右上角为原点(0,0),向左为x轴增加方向,向下为y轴增加方向。因此,...2012-02-08 23:21:30 · 165 阅读 · 0 评论 -
HTML5 WebGame开源工具之impactjs
随着浏览器(PC/Mobile)功能的不断增强,特别是近几年来HTML5系列技术,CSS3及JS引擎的快速发展,使用传统的Web前端开发技术来开发网页已经成为了一个新的趋势。就我个人个遇到的几个框架及近期别人推荐的进行一些分析。主要针对使用HTML+CSS+JavaScript技术来开发游戏的技术做一分类,其它第三方语言实现的中间件平台只在最后简要介绍。 HT...2012-08-28 09:36:26 · 1100 阅读 · 0 评论