本月博客排行
-
第1名
龙儿筝 -
第2名
lerf -
第3名
fantaxy025025 - johnsmith9th
- xiangjie88
- zysnba
年度博客排行
-
第1名
青否云后端云 -
第2名
宏天软件 -
第3名
gashero - wy_19921005
- vipbooks
- benladeng5225
- e_e
- wallimn
- javashop
- ranbuijj
- fantaxy025025
- jickcai
- gengyun12
- zw7534313
- qepwqnp
- 解宜然
- ssydxa219
- zysnba
- sam123456gz
- sichunli_030
- arpenker
- tanling8334
- gaojingsong
- kaizi1992
- xpenxpen
- 龙儿筝
- jh108020
- wiseboyloves
- ganxueyun
- xyuma
- xiangjie88
- wangchen.ily
- Jameslyy
- luxurioust
- lemonhandsome
- mengjichen
- jbosscn
- zxq_2017
- lzyfn123
- nychen2000
- forestqqqq
- wjianwei666
- ajinn
- zhanjia
- Xeden
- hanbaohong
- java-007
- 喧嚣求静
- mwhgJava
- kingwell.leng
最新文章列表
Canvas做游戏实践分享(十)
6 用户交互——移动物体
游戏的核心在于交互,很多时候需要用户动手来操作游戏对象,很基本的一个操作就是移动物体。接下来我们会介绍如何拖动物体,在画布上扔物体等。
6.1 选择与释放对象
使用鼠标对物体的拖拽操作主要有三个步骤——鼠标进入物体范围并按下,鼠标移动及鼠标释放。这涉及到三个鼠标事件:mousedown,mousemove,mouseup。我们按 ...
Canvas做游戏实践分享(八)
5.边界控制与摩擦力
在大多数的游戏设计中,会有环境边界控制来帮助我们保证画布中的对象在运动的过程中不会脱离画面。同时,对象的运动环境很少会是真空的情况,所以就会存在着摩擦力阻碍物体的速度变化。
5.1 环境边界控制
如果我们关注的运动对象在移动的过程中消失在了视窗之外,我们有两大类的选择:一种是将对象重新移动到当前的视窗中或者不再关注此对象,另一种方式是使当前的 ...
Canvas做游戏实践分享(七)
4.2 加速度
加速度是改变速度大小及方向的一个属性,在物体受力的过程中,会产生加速度来改变速度的大小及方向。加速度的处理与速度的处理非常类似。
一维坐标系统下的加速度
一维坐标系统下加速度的实现很简单,我们仍然使用小球系统来模拟,为小球对象添加X轴与Y轴上的加速度属性。实现起来有两步:初始化加速度值,在每一帧开始时为速度增加加速度的值。如下:
ball.ax=INITIAL ...
Canvas做游戏实践分享(六)
4.1速度
运动最基本的属性就是速度。注意这里的速度是物理中所说的速度(Velocity),它包括大小及方向两部分组成。在动画中,如果我们已知当前一帧对象的位置以及速度,那在下一帧我们就能计算出物体所在的位置。在大多数情况下,速度的大小是按像素/帧为单位的,但实际运行中,由于浏览器的帧率不稳定性,会出现小的差别。如果应用对于统一帧率要求很严格,可以使用其它的方式来处理,之后我们会介绍这 ...
Canvas做游戏实践分享(三)
3. Canvas 常见用法
3.1 canvas中的色彩
对于canvas中色彩的表示,主要沿用CSS的四种方式:
#RRGGBB 十六进制表示法
#RGB 上述十六进制中特殊色彩的简写表达,两种表示法的对应关系为复制R,G,B位上的数值,如#0bf是#00bbff的简写表达方式
rgb(R,G,B) 函数式的表达方式,各色彩取值为0~255
rgba(R ...
Canvas做游戏实践分享(二)
2.游戏中的数学知识
在游戏的开发中,数学知识特别是其中的三角函数使用特别广泛
2.1 角度
在使用canvas来制作动画的过程中,我们使用到的角度都是以弧度为单位的,角度与弧度之间的换算单位如下:
radians=degrees*Math.PI/180
同时,在canvas中的坐标系是以右上角为原点(0,0),向左为x轴增加方向,向下为y轴增加方向。因此,需 ...