零基础HTML5游戏制作教程 第3章 图形的移动

第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);
}

    这样，我们就得到一个不停向右移动的方块，如下图所示。

    在上一章，我们学会了绘制图形；在本章，我们成功地使这个图形运动起来了。但这还是很不够的，因为我们发现，我们只能看着这个方块自己移动，我们并不能控制她移动的方向或者速度。游戏很重要的一点就是交互，所以我们必须控制这个方块的运动。

    本来本章应该接下去讲怎么利用键盘控制图形的移动。但是为了使本“零起点”教程尽可能简单化，我倾向于把不同的内容放在独立的章节中单独讲，这样可以让每一章都只讲一个知识点。那么这章就这样了。