本帖最后由 蓝色力量1221 于 2012-11-29 01:26 编辑

游戏源码下载地址：http://l13.yunpan.cn/lk/QMQFfWQjvWGvg

该游戏教程主要参考了老外Jason Croucher的博客

http://jacebook.co.uk/blog/2010/09/11/html5-writing-a-game/

游戏代码也下载自他的博客。

本教程主要是分析这个游戏的代码，用我自己的语言告诉大家怎么来开发这个游戏

姑且称这个游戏为《蘑菇与熊》吧

游戏的介绍：

用蘑菇顶住熊不给落地，熊碰撞完顶部的奖品为赢。顶部的奖品有3种:叶子、鲜花、橡子

下面开始分析这个游戏解析来该做什么

我使用开发环境是：Dreamweaver

开发语言：HTML5,jquery

OK~废话少说了，分析游戏

由图我们可以分析出

1、游戏需要到的对象(即游戏物体)有

a、蘑菇 b、熊猫 c、奖品(叶子、鲜花、橡子)

2、html界面

a、画布(用来描绘游戏)

为了简单易懂~我们就不一下子定义完所有的对象和事件了

先从最简单的做起，第二回我们让蘑菇能够左右动起来~

===================================================

上回分析了游戏，在这一回我们将让蘑菇跟随鼠标动起来~

达到这个效果：http://www.html5china.com/html5games/mogu/index1.html

一、写html代码XML/HTML Code复制内容到剪贴板

用ID为container的DIV来获取鼠标移动画面的事件

canvas用来绘图

二、定义全局变量JavaScript Code复制内容到剪贴板

//全局变量

var backgroundForestImg = new Image();//森林背景图

var mushroomImg = new Image();//蘑菇图

var ctx;//2d画布

var screenWidth;//画布宽度

var screenHeight;//画布高度

赋予全局变量值JavaScript Code复制内容到剪贴板

mushroomImg.src = "images/mushroom.png";//蘑菇

backgroundForestImg.src = "images/forest1.jpg";//森林背景图

ctx = document.getElementById('canvas').getContext('2d');

screenWidth = parseInt($("#canvas").attr("width"));

screenHeight = parseInt($("#canvas").attr("height"));

三、定义蘑菇实例

由于在画布上的物体全部都有3个共同的属性：x、y坐标，素材image

所以我们定义一个公用的游戏物体JavaScript Code复制内容到剪贴板

//公用 定义一个游戏物体戏对象

function GameObject()

{

this.x = 0;//x 坐标

this.y = 0;//y 坐标

this.image = null; //图片

}

为了方便拓展，定义一个公用的蘑菇JavaScript Code复制内容到剪贴板

//定义公用蘑菇Mushroom 继承游戏对象GameObject

function Mushroom() {};

Mushroom.prototype = new GameObject();//游戏对象GameObject

定义一个我们使用到的具体蘑菇JavaScript Code复制内容到剪贴板

//蘑菇实例

var mushroom = new Mushroom();

初始化蘑菇的位置和图片JavaScript Code复制内容到剪贴板

mushroom.image = mushroomImg;

mushroom.x = parseInt(screenWidth/2);

mushroom.y = screenHeight - 40;

四、用canvas把蘑菇绘制出来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);

ctx.restore();

}

好了，到这里蘑菇也定义了，背景图也定义了，绘图也定义了，下面就开始整合上面的代码写一个完整的把蘑菇和背景描述在画布上XML/HTML Code复制内容到剪贴板

蘑菇动起来-html5中文网

//全局变量

var backgroundForestImg = new Image();//森林背景图

var mushroomImg = new Image();//蘑菇

var ctx;//2d画布

var screenWidth;//画布宽度

var screenHeight;//画布高度

//公用 定义一个游戏物体戏对象

function GameObject()

{

this.x = 0;

this.y = 0;

this.image = null;

}

//定义蘑菇Mushroom 继承游戏对象GameObject

function Mushroom() {};

Mushroom.prototype = new GameObject();//游戏对象GameObject

//蘑菇实例

var mushroom = new Mushroom();

//循环描绘物体

function gameLoop()

{

//清除屏幕

ctx.clearRect(0, 0, screenWidth, screenHeight);

ctx.save();

//绘制背景

ctx.drawImage(backgroundForestImg, 0, 0);

//绘制蘑菇

ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);

ctx.restore();

}

//加载图片

function loadImages()

{

mushroomImg.src = "images/mushroom.png";//蘑菇

backgroundForestImg.src = "images/forest1.jpg";//森林背景图

}

//初始化

$(window).ready(function(){

loadImages();

ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布

screenWidth = parseInt($("#canvas").attr("width")); //画布宽度

screenHeight = parseInt($("#canvas").attr("height"));

mushroom.image = mushroomImg;

mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标

mushroom.y = screenHeight - 40;//蘑菇Y坐标

setInterval(gameLoop, 10);

});

蘑菇图片下载地址：http://www.html5china.com/html5games/mogu/images/mushroom.png

背景图片下载地址：http://www.html5china.com/html5games/mogu/images/forest1.jpg

你试着在支持html5的浏览器上运行上面代码试看~是不是蘑菇描绘出来了~

假如你能看到效果了，那祝贺你~你有了个很好的开端~

上面的步骤只是将蘑菇和场景绘出来了，那么接下来我们让他随鼠标动起来~

给DIV#container添加放上鼠标的事件

当鼠标放在DIV#container上面时，蘑菇的X轴坐标等与鼠标的X轴坐标JavaScript Code复制内容到剪贴板

//事件处理

function addEventHandlers()

{

//鼠标移动则蘑菇跟着移动

$("#container").mousemove(function(e){

mushroom.x = e.pageX - (mushroom.image.width/2);

});

}

我们只要在刚才的演示代码中的 $(window).ready(function(){ }); 里面加上addEventHandlers();就可以了，如下JavaScript Code复制内容到剪贴板

//初始化

$(window).ready(function(){

addEventHandlers();//加上事件

loadImages();

ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布

mushroom.image = mushroomImg;

screenWidth = parseInt($("#canvas").attr("width"));

screenHeight = parseInt($("#canvas").attr("height"));

mushroom.x = parseInt(screenWidth/2);

mushroom.y = screenHeight - 40;

setInterval(gameLoop, 10);

});

你再运行代码试下，是不是蘑菇跟着鼠标动起来了~

第二回就讲到这了，第三回讲怎么绘制一只熊并让他滚动起来~===================================================

这一回我们让熊动起来~

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

一、先定义全局变量JavaScript Code复制内容到剪贴板

var bearEyesClosedImg = new Image();//闭着眼睛的熊熊

var horizontalSpeed = 2;//水平速度

var verticalSpeed = -2; //垂直速度,开始肯定是要向上飘，所以要负数

var bearAngle = 2;//熊旋转的速度

二、定义熊

首先定义一只公用熊JavaScript Code复制内容到剪贴板

//定义动物熊 Animal 继承 游戏对象GameObject

function Animal() {};

Animal.prototype = new GameObject();//游戏对象GameObject

Animal.prototype.angle = 0;//旋转的角度，(用来改变熊的旋转速度)

定义我们使用的熊JavaScript Code复制内容到剪贴板

//定义熊实例

var animal = new Animal();

初始化熊JavaScript Code复制内容到剪贴板

bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的

animal.image = bearEyesClosedImg;//熊图片

animal.x = parseInt(screenWidth/2);//x坐标

animal.y = parseInt(screenHeight/2); //y坐标

三、描绘熊在画布上

因为熊是相对移动的，所以我们要加一个基准JavaScript Code复制内容到剪贴板

//以当前熊的中心位置为基准

ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));

//描绘熊

ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));

但是熊要旋转啊，好的，想要改变它的角度，上面的代码中加入旋转JavaScript Code复制内容到剪贴板

//以当前熊的中心位置为基准

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));

上面的熊是不动的，为什么呢，因为x,y轴和角度没变，因此我们再加上改变x,y和角度的代码,于是上面的代码变成了JavaScript Code复制内容到剪贴板

//改变移动动物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));

到现目前为止熊已经能滚动和移动了，最终代码如下：展开XML/HTML Code复制内容到剪贴板

第三回就讲到这了，第四回讲熊碰撞边界和蘑菇的事件===================================================

第四回主要讲熊移动碰到边界时的反弹处理

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

一、写一个碰撞处理函数JavaScript Code复制内容到剪贴板

function HasAnimalHitEdge()

{

//熊碰到右边边界

if(animal.x>screenWidth - animal.image.width)

{

if(horizontalSpeed > 0)//假如向右移动

horizontalSpeed =-horizontalSpeed;//改变水平速度方向

}

//熊碰到左边边界

if(animal.x

{

if(horizontalSpeed < 0)//假如向左移动

horizontalSpeed = -horizontalSpeed;//改变水平速度方向

}

//熊碰到下面边界

if(animal.y>screenHeight - animal.image.height)

{

//2秒钟后从新开始

setTimeout(function(){

horizontalSpeed = speed;

verticalSpeed = -speed;

animal.x = parseInt(screenWidth/2);

animal.y = parseInt(screenHeight/2);

gameLoop();

}, 2000);

}

//熊碰到上边边界

if(animal.y<0)

{

verticalSpeed = -verticalSpeed;

}

}

二、在游戏循环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);

//绘制熊

//改变移动动物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();

}

到此第四回的完整代码如下：展开XML/HTML Code复制内容到剪贴板

第四回就讲到这了，第五回讲熊碰撞蘑菇的事件