一步一步学做游戏第二回：让蘑菇随鼠标动起来

上回分析了游戏，在这一回我们将让蘑菇跟随鼠标动起来~ 达到这个效果： http://www.html5china.com/html5games/mogu/index1.html 一、写html代码 XML/HTML Code 复制内容到剪贴板 body div id = container styl…

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

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

一、写html代码

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

<body>
<div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
<canvas id="canvas" width="480" height="320" >
</canvas>
</div>
</body>

用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 复制内容到剪贴板

<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>蘑菇动起来-html5中文网</title>
<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
<script type="text/javascript" >
//全局变量
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);
- });
- </script>
- </head>
- <body>
- <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
- <canvas id="canvas" width="480" height="320" >
- </canvas>
- </div>
- </body>
- </html>

蘑菇图片下载地址：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://bbs.html5china.com/read.php?tid=2

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

--作者：深邃老马

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

一步一步学做游戏第二回：让蘑菇随鼠标动起来相关推荐

我在日本学做游戏期间的所见所闻与所想
"想去日本学做游戏",我当初只有这么一个懵懵懂懂的想法.或许有些朋友的情况与我类似,从小接触游戏,自然而然有了投身游戏行业的想法.国内现在还没有成熟的游戏开发教育体系,而邻国日本作 ...
html5（熊与蘑菇）一步一步学做游戏第一回：游戏分析
该游戏教程主要参考了老外Jason Croucher的博客 http://jacebook.co.uk/blog/2010/09/11/html5-writing-a-game/ 游戏代码也下载自他的 ...
一步一步学做游戏第五回：熊碰撞蘑菇处理
第五回主要讲熊碰到蘑菇之后向上反弹的效果预期达到的效果: http://www.html5china.com/html5games/mogu/index4.html 一.由于碰撞的地方比较多,所 ...
html5 游戏制作教程,【整理】一步一步学做HTML5游戏教程
本帖最后由蓝色力量1221 于 2012-11-29 01:26 编辑游戏源码下载地址:http://l13.yunpan.cn/lk/QMQFfWQjvWGvg 该游戏教程主要参考了老外Jaso ...
做游戏，学编程（C语言） 1 实现弹跳小球
没想到这里的一篇文章(对于一个大一计科新生,有什么代码行数在500~1000的程序(c语言)可以试着写来练手? - 计算机科学 - 知乎),有这么多的同学点赞,谢谢大家的支持! 知乎我玩的比较少,应不 ...
强烈推荐,一步一步学装电脑（有图）
一步一步学装电脑(有图) 对于高手而言,如何将各种各样的配件组装成一台电脑是轻而易举的事,但对于大多数初接触电脑的读者而言却不是这样了.对于许多想学会装机了解电脑组装DIY知识的读者而言,如何才能将各 ...
【Linux】一步一步学Linux——Linux系统目录详解(09)
00. 目录文章目录 00. 目录 01. 文件系统介绍 02. 常用目录介绍 03. /etc目录文件 04. /dev目录文件 05. /usr目录文件 06. /var目录文件 07. /pr ...
【Linux】一步一步学Linux——Linux发展史(01)
00. 目录文章目录 00. 目录 01. Linux概述 02. Linux简史 03. Linux主要特性 04. Linux之父 05. Linux相关术语 06. Linux其它 07. L ...
一步一步学Silverlight 2系列（3）：界面布局
概述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

一步一步学做游戏第二回：让蘑菇随鼠标动起来

一步一步学做游戏第二回：让蘑菇随鼠标动起来相关推荐

最新文章

热门文章

一步一步学做游戏 第二回：让蘑菇随鼠标动起来

一步一步学做游戏 第二回：让蘑菇随鼠标动起来相关推荐

最新文章

热门文章

一步一步学做游戏第二回：让蘑菇随鼠标动起来

一步一步学做游戏第二回：让蘑菇随鼠标动起来相关推荐