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

来源：互联网发布：nginx 80端口多程序编辑：程序博客网时间：2024/05/02 22:11

上回分析了游戏，在这一回我们将让蘑菇跟随鼠标动起来~ 达到这个效果： 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中文网

--作者：深邃老马

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

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

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