零基础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);
}

更多相关文章

随机推荐

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

更多相关文章

随机推荐

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