返回上一页
客服QQ
客服QQ
一切从沟通开始……
一步一步学做游戏 第二回：让蘑菇随鼠标动起来
作者：睿美印象网站建设工作室 发布日期：2012-12-07
上回分析了游戏，在这一回我们将让蘑菇跟随鼠标动起来~
达到这个效果：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>
<!-- 要记得引用jquery-1.4.2.js -->
<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);
});
你再运行代码试下，是不是蘑菇跟着鼠标动起来了~
第二回就讲到这了，第三回讲怎么绘制一只熊并让他滚动起来~
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
达到这个效果：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>
<!-- 要记得引用jquery-1.4.2.js -->
<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);
});
你再运行代码试下，是不是蘑菇跟着鼠标动起来了~
第二回就讲到这了，第三回讲怎么绘制一只熊并让他滚动起来~
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- Firefox下margin-top问题
- 推荐10款非常优秀的HTML5开发工具
- 跟KingDZ学HTML5之五：Canvas之图像与文字
- 一步一步学做游戏 第二回：让蘑菇随鼠标动起来
- 第六天 html列表
- 仿AS语法来写HTML5—第6章，TextField与输入框
- css图层-图片半透明
- 跟KingDZ学HTML5之三：画布Canvas
- 第三天 二列和三列布局
- HTML5基础教程系列：第2部分，组织页面的输入
- 第五天 超链接伪类
- 开发者必须知道的HTML5十五大新特性
- 跟KingDZ学HTML5之七：Canvas移动、旋转、缩放
- 10个为设计者准备的HTML5在线工具
- CSS网页布局文字排版相关属性小结
- 新手怎样开始学div+css
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
