19-渲染逻辑概述

9.3.10　渲染逻辑概述

每次游戏在屏幕上渲染对象的时候，都将运行render()函数的全部代码。这样可以确保能将非移动对象绘制在屏幕上。以下是render()函数的代码。

function renderPlayField(){
　 fillBackground();
　 drawPlayField();
　 drawPlayer();
　 drawEnemy();
　 drawExplosions();
}

首先绘制一个黑色的背景，然后绘制游戏区域，接着再绘制游戏对象。drawPlayField()函数在游戏屏幕上绘制区块的图片。这个函数与第4章的函数类似，但是游戏添加了一些额外的内容。下面看看代码是如何组织的。

function drawPlayField(){
　 for (rowCtr=0;rowCtr<15;rowCtr++){
　　　for (colCtr=0;colCtr<15;colCtr++){
　　　var sourceX = Math.floor((playField[rowCtr][colCtr])% 8)* 32;
　　　var sourceY = Math.floor((playField[rowCtr][colCtr])/8)*32;
　　　if (playField[rowCtr][colCtr] != roadTile){
　　　　　context.drawImage(tileSheet, 0, 0,32,32,colCtr*32,rowCtr*32,32,32);
　　　}
　　　context.drawImage(tileSheet, sourceX, sourceY, 32,32,
　　　 colCtr*32,rowCtr*32,32,32);
　　　 }
　　}
 }

drawPlayField()函数首先遍历 playfield 数组所有的行，然后再遍历行中的每一列。如果playField[rowCtr][colCtr]中的图片编号是一个道路图片，函数将在游戏区域的正确位置绘制图片。如果图片编号是一个游戏对象（不是道路图片），函数将在该位置上先绘制道路图片，再绘制对象图片。