第3章 图形的移动
一,移动的原理
其实无论你看电影也好,玩游戏也好,电影或游戏中的人物都是不会移动的。电影是一张张静态的照片,游戏是一个个静态的画面。你之所以觉得电影中的人物移动了,是因为很多张照片在很短时间内连续放映的结果。游戏也是同样道理。
所以,游戏的基本原理,其实就是每隔一小段时间(比如0.1秒),根据游戏数据(各物体的状态、坐标等)重新绘制整个游戏画面。
我们需要2个函数来完成这个目标:
context.clearRect()和setInterval()
context.clearRect(x,y,width,height)的作用是用于清空一片矩形范围内的图像。4个参数分别表示该清除区域的左上角的x坐标、y坐标、宽度、长度。如果把坐标改成0,0,以及canvas的宽度和高度,那么就可以清空整个画布内的图像。
setInterval(code,millisec)是一个用于每隔一定时间间隔就执行一遍特定代码的函数,可以将其用于定时刷新屏幕上的图像。
二,移动的实现
下面我们来绘制一个方块并使之移动。
var cvs=getElementById("canvas");
var ctx=cvs.getContext("2d");
cvs.fillStyle="green";
self.setInterval("move()",100);
function move()
{cvs.clearRect(0,0,cvs.width,cvs.height);
x=x+50;
ctx.fillRect(x,y,100,100);
}
这样,我们就得到一个不停向右移动的方块,如下图所示。
在上一章,我们学会了绘制图形;在本章,我们成功地使这个图形运动起来了。但这还是很不够的,因为我们发现,我们只能看着这个方块自己移动,我们并不能控制她移动的方向或者速度。游戏很重要的一点就是交互,所以我们必须控制这个方块的运动。
本来本章应该接下去讲怎么利用键盘控制图形的移动。但是为了使本“零起点”教程尽可能简单化,我倾向于把不同的内容放在独立的章节中单独讲,这样可以让每一章都只讲一个知识点。那么这章就这样了。