12、开源游戏-“胡子”地图绘制和游戏主循环设计
在前面中我们初始化了游戏的资源,这次我们来说下地图的绘制和游戏主循环设计。 地图 绘制 以前说过地图是用tiled画好,导出为图片形式的,所以地图的绘制,就是把这个图片绘制到canvas的过程。这样绘制地图就简单了,使用drawImage方法绘制即可。 这里有个2问题,1是地图的大小一般肯定是大于canvas的,所以我们只是把地图的一部分绘制到了canvas上,2是地图的移动。1中的地图的复制位置是根据2中地图的移动距离来确定的。我们的思路如下:记录鼠标移动的xy坐标值,然后根据xy值和 canvas边缘做比较,当靠近边缘时,我们就移动地图一段距离,重复这个过程,直到地图绘制完。 其实我们上面的思路中,就是在改变 drawImage方法的参数过程,那么来看下 drawImage方法: 定义和用法 drawImage() 方法绘制一幅图像。 语法 drawImage( image , x , y ) drawImage( image , x , y , width , height ) drawImage( image , sourceX , sourceY , sourceWidth , sourceHeight , destX , destY , destWidth , destHeight ) image 所要绘制的图像。 这必须是表示 <img> 标记或者屏幕外图像的