html5游戏制作教程,【整理】⼀步⼀步学做HTML5游戏教程本帖最后由 蓝⾊⼒量1221 于 2012-11-29 01:26 编辑
该游戏教程主要参考了⽼外Jason Croucher的博客
游戏代码也下载⾃他的博客。
本教程主要是分析这个游戏的代码，⽤我⾃⼰的语⾔告诉⼤家怎么来开发这个游戏
姑且称这个游戏为《蘑菇与熊》吧
游戏的介绍：
⽤蘑菇顶住熊不给落地，熊碰撞完顶部的奖品为赢。顶部的奖品有3种：叶⼦、鲜花、橡⼦
下⾯开始分析这个游戏解析来该做什么
我使⽤开发环境是：Dreamweaver
开发语⾔：HTML5,jquery
OK~废话少说了，分析游戏
由图我们可以分析出
1、游戏需要到的对象(即游戏物体)有
a、蘑菇
b、熊猫
c、奖品(叶⼦、鲜花、橡⼦)
2、html界⾯
a、画布(⽤来描绘游戏)
为了简单易懂~我们就不⼀下⼦定义完所有的对象和事件了
先从最简单的做起，第⼆回我们让蘑菇能够左右动起来~
===================================================
上回分析了游戏，在这⼀回我们将让蘑菇跟随⿏标动起来~
⼀、写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 = ElementById('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);
}
好了，到这⾥蘑菇也定义了，背景图也定义了，绘图也定义了，下⾯就开始整合上⾯的代码写⼀个完整的把蘑菇和背景描述在画布上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);
}
//加载图⽚
function loadImages()
{
mushroomImg.src = "images/mushroom.png";//蘑菇
backgroundForestImg.src = "images/forest1.jpg";//森林背景图
}
//初始化
$(window).ready(function(){
loadImages();
ctx = ElementById('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);
});
你试着在⽀持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 = ElementById('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);
});
你再运⾏代码试下，是不是蘑菇跟着⿏标动起来了~
第⼆回就讲到这了，第三回讲怎么绘制⼀只熊并让他滚动起来
~===================================================这⼀回我们让熊动起来~
⼀、先定义全局变量JavaScript Code复制内容到剪贴板
var bearEyesClosedImg = new Image();//闭着眼睛的熊熊
var horizontalSpeed = 2;//⽔平速度
var verticalSpeed = -2; //垂直速度，开始肯定是要向上飘，所以要负数
var bearAngle = 2;//熊旋转的速度
⼆、定义熊
jquery学习在线教程⾸先定义⼀只公⽤熊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坐标

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。