html5 游戏制作教程,【整理】一步一步学做HTML5游戏教程

本帖最后由 蓝色力量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复制内容到