一步一步学做游戏 第六回：绘制奖品

第五回主要讲怎么把奖品描绘上去 预期达到的效果： http://www.html5china.com/html5games/mogu/index5.html 由于奖品特别多，而且是有序的，所以我们使用一个数组来装所有奖品的位置 一、需要到…

第五回主要讲怎么把奖品描绘上去

预期达到的效果：http://www.html5china.com/html5games/mogu/index5.html

由于奖品特别多，而且是有序的，所以我们使用一个数组来装所有奖品的位置

一、需要到的全局变量

JavaScript Code复制内容到剪贴板

var flowerImg = new Image();//奖品鲜花
var leafImg = new Image();//奖品叶子
var acornImg = new Image();//奖品橡子

鲜花图片下载：http://www.html5china.com/html5games/mogu/images/flower.png

叶子图片下载：http://www.html5china.com/html5games/mogu/images/leaf.png

橡子图片下载：http://www.html5china.com/html5games/mogu/images/acorn.png

二、初始化托全局变量

JavaScript Code复制内容到剪贴板

//加载图片
function LoadImages()
{
mushroomImg.src = "images/mushroom.png";//蘑菇
backgroundForestImg.src = "images/forest1.jpg";//森林背景图
bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的
flowerImg.src = "images/flower.png";//奖品花
acornImg.src = "images/acorn.png";//奖品橡子
leafImg.src = "images/leaf.png";//奖品叶子

mushroom.image = mushroomImg;
animal.image = bearEyesClosedImg;
}

三、定义奖品数据及实例

JavaScript Code复制内容到剪贴板

//定义奖品数组Prizes和对象Prize，继承游戏对象GameObject
var prizes = new Array();
function Prize() {};
Prize.prototype = new GameObject();//继承游戏对象GameObject
Prize.prototype.row = 0;//奖品行位置
Prize.prototype.col = 0;//奖品列位置

四、把奖品装进数组

JavaScript Code复制内容到剪贴板

//创建奖品数组
function InitPrizes()
{
var count=0;
//一共3行
for(var x=0; x<3; x++)
{
//一共23列
for(var y=0; y<23; y++)
{
prize = new Prize();
if(x==0)
prize.image = flowerImg;//鲜花放在第一行
if(x==1)
prize.image = acornImg;//豫子刚在第2行
if(x==2)
prize.image = leafImg;//叶子放在第3行

prize.row = x;
prize.col = y;
prize.x = 20 * prize.col + 10;//x轴位置
prize.y = 30 * prize.row + 20;//y轴位置
//装入奖品数组，用来描绘

prizes[count] = prize;
count++;
}
}
}

五、从数组中取出奖品并描绘

JavaScript Code复制内容到剪贴板

//绘制奖品，把奖品显示在画布上
function DrawPrizes()
{
for(var x=0; x<prizes.length; x++)
{
currentPrize = prizes[x];
ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);
}
}

六、在游戏循环GameLoop()中加入描绘奖品的函数，如下

JavaScript Code复制内容到剪贴板

function GameLoop()
{
//清除屏幕
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.save();
//绘制背景
ctx.drawImage(backgroundForestImg, 0, 0);
//绘制蘑菇
ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
//绘制奖品
DrawPrizes();
//绘制熊
//改变移动动物X和Y位置
animal.x += horizontalSpeed;
animal.y += verticalSpeed;
//改变翻滚角度
animal.angle += bearAngle;
//以当前熊的中心位置为基准
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
//根据当前熊的角度轮换
ctx.rotate(animal.angle * Math.PI/180);
//描绘熊
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));

ctx.restore();
//检测是否碰到边界
HasAnimalHitEdge();
//检测熊碰撞蘑菇
HasAnimalHitMushroom();

}

到此第六回的完整代码如下：

展开XML/HTML Code复制内容到剪贴板

第六回就讲到这了，第七回讲描绘熊碰到奖品，奖品消失的事件

大家有什么建议的话，可以到论坛留言讨论：http://bbs.html5china.com/read.php?tid=2

希望大家在其他地方引用的时候，注明引用来自html5中文网

--作者：深邃老马

-----------------逆水行舟，不进则退