第八回合中主要是完善游戏,给游戏加上开始按钮、生命数、得分
预期达到的效果:http://www.html5china.com/html5games/mogu/index7.html
一、添加开始按钮
A、html代码中加入开始按钮,并定位他于画布的中间
XML/HTML Code复制内容到剪贴板
<img id="BtnImgStart" style="position: absolute; left: 200px; top: 200px; cursor: pointer; float: left; display: block; " src="./images/START-Button.png">
开始图片下载地址:http://www.html5china.com/html5games/mogu/images/START-Button.png
B、全局变量
JavaScript Code复制内容到剪贴板
var gameRunning = false;//游戏运行状态
var gameloopId;//记住循环的变量
C、原来是游戏自己开始没有暂停的、写一个开始暂停的函数
XML/HTML Code复制内容到剪贴板
//开始或者暂停游戏
function ToggleGameplay()
{
gameRunning = !gameRunning;
if(gameRunning)
{
$("#BtnImgStart").hide();
gameloopId = setInterval(GameLoop, 10);
}else
{
clearInterval(gameloopId);
}
}
D、添加开始按钮事件
JavaScript Code复制内容到剪贴板
//事件处理
function AddEventHandlers()
{
//鼠标移动则蘑菇跟着移动
$("#container").mousemove(function(e){
mushroom.x = e.pageX - (mushroom.image.width/2);
});
//开始按钮
$("#BtnImgStart").click(function (){
ToggleGameplay();
});
}
注意,要把$(window).ready(function(){})函数中的setInterval(GameLoop, 10);去掉
二、添加生命数条
A、需要的全局变量
JavaScript Code复制内容到剪贴板
var lives=3;//3条生命数
var livesImages = new Array();//生命图片数组
B、生命图片初始化
JavaScript Code复制内容到剪贴板
//生命图片因为只有6个,所以最多只能6个
for(var x=0; x<6; x++)
{
livesImages[x] = new Image();
livesImages[x].src = "images/lives" + x + ".png";
}
C、绘制生命条
JavaScript Code复制内容到剪贴板
//描绘生命条
function DrawLives()
{
ctx.drawImage(livesImages[lives], 0, 0);
}
D、当熊碰到底线时,减一条生命
JavaScript Code复制内容到剪贴板
//熊碰到下面边界
if(animal.y>screenHeight - animal.image.height)
{
lives -=1;//生命减1
//当还有生命条时,暂停游戏,熊回到中间位置,显出开始按钮
if(lives>0)
{
horizontalSpeed = speed; //初始化水平速度
verticalSpeed = -speed; //初始化垂直速度
animal.x = parseInt(screenWidth/2); //初始化熊的x坐标
animal.y = parseInt(screenHeight/2); //初始化熊的y坐标
$("#BtnImgStart").show(); //显示开始按钮
ToggleGameplay(); //暂停游戏
GameLoop(); //初始化绘图
}
}
E、当生命条数等于0或者奖品消灭完,游戏结束
游戏结束函数
JavaScript Code复制内容到剪贴板
//结束游戏
function GameOver()
{
gameRunning = false;
clearInterval(gameloopId);
alert("游戏结束!");
}
在熊撞到底线的代码中,加入判断,当生命数=0时,游戏结束
JavaScript Code复制内容到剪贴板
if(lives<=0)
GameOver();
在绘制奖品函数中加入判断,当奖品被消灭完时,游戏结束
JavaScript Code复制内容到剪贴板
//绘制奖品,把奖品显示在画布上
function DrawPrizes()
{
for(var x=0; x<prizes.length; x++)
{
currentPrize = prizes[x];
//假如没有被撞击,则描绘
if(!currentPrize.hit)
{
ctx.drawImage(currentPrize.image, prizes[x].x, prizes[x].y);
}
}
if(AllPrizesHit())
{
GameOver();
}
}
//判断是否撞完奖品,假如其中有一个
function AllPrizesHit()
{
for(var c=0; c<prizes.length; c++)
{
checkPrize = prizes[c];
if(checkPrize.hit == false)
return false;
}
return true;
}
三、添加得分
A、定义全局变量
JavaScript Code复制内容到剪贴板
var score = 0;//分数
var scoreImg = new Image();//分数板
B、初始化分数板
JavaScript Code复制内容到剪贴板
scoreImg.src = "images/score.png";//分数板
C、给奖品加一个分数属性。这样在撞奖品时才能知道得到多少分
JavaScript Code复制内容到剪贴板
function Prize() {};
Prize.prototype = new GameObject();//继承游戏对象GameObject
Prize.prototype.row = 0;//奖品行位置
Prize.prototype.col = 0;//奖品列位置
Prize.prototype.hit = false;//是否被撞过
Prize.prototype.point = 0;//分数
D、在初始化奖品数组中加入分数
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;//鲜花放在第一行
prize.point = 3;//鲜花3分
}
if(x==1)
{
prize.image = acornImg;//豫子刚在第2行
prize.point = 2;//橡子2分
}
if(x==2)
{
prize.image = leafImg;//叶子放在第3行
prize.point = 1;//叶子1分
}
prize.row = x;
prize.col = y;
prize.x = 20 * prize.col + 10;//x轴位置
prize.y = 20 * prize.row + 40;//y轴位置
//装入奖品数组,用来描绘
prizes[count] = prize;
count++;
}
}
}
E、当熊撞到奖品时,根据碰撞奖品的分数增加总分
JavaScript Code复制内容到剪贴板
//撞到奖品
function HasAnimalHitPrize()
{
//取出所有奖品
for(var x=0; x<prizes.length; x++)
{
var prize = prizes[x];
//假如没有碰撞过
if(!prize.hit)
{
//判断碰撞
if(CheckIntersect(prize, animal, 0))
{
prize.hit = true;
//熊反弹下沉
verticalSpeed = speed;
//总分增加
score += prize.point;
}
}
}
}
F、绘制分数
JavaScript Code复制内容到剪贴板
//描绘分数
function DrawScore()
{
ctx.drawImage(scoreImg, screenWidth-(scoreImg.width),0);//分数板
ctx.font = "12pt Arial";
ctx.fillText("" + score, 425, 25); //得分
}
综合上面的代码, 到此第八回的完整代码如下:
展开XML/HTML Code复制内容到剪贴板
第八回讲完,整个游戏功能的基本已经做出来了。
到这里教程先告一段落先。
其实整个游戏其实还可以继续完善,比如说蘑菇被碰到后颤抖几下、碰撞声音、加入游戏帧数、加入关数、不同的关数、不同的动物和奖品、难度。。等等
假如后面有空的话我再继续完善这个游戏
大家有什么好建议的话,可以到论坛留言讨论交流:http://bbs.html5china.com/read.php?tid=2
转载请注明:睿美印象
网站建设工作室www.ruimeiyx.com