html5 手把手教你做游戏《熊和蘑菇》(二)
上回分析了游戏，在这一回我们将让蘑菇跟随鼠标动起来~
达到这个效果：http://www.html5china.com/html5games/mogu/index1.html
一、写html代码
XML/HTML Code复制内容到剪贴板
1.<body>
2. <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
3. <canvas id="canvas" width="480" height="320" >
4. </canvas>
5. </div>
6.</body>
用ID为container 的DIV来获取鼠标移动画面的事件
canvas用来绘图
二、定义全局变量
JavaScript Code复制内容到剪贴板
1.//全局变量
2.var backgroundForestImg = new Image();//森林背景图
3.var mushroomImg = new Image();//蘑菇图
4.var ctx;//2d画布
5.var screenWidth;//画布宽度
6.var screenHeight;//画布高度
赋予全局变量值
JavaScript Code复制内容到剪贴板
1.mushroomImg.src = "images/mushroom.png";//蘑菇
2.backgroundForestImg.src = "images/forest1.jpg";//森林背景图
3.ctx = document.getElementById('canvas').getContext('2d');
4.screenWidth = parseInt($("#canvas").attr("width"));
5.screenHeight = parseInt($("#canvas").attr("height"));
三、定义蘑菇实例
由于在画布上的物体全部都有3个共同的属性：x、y坐标，素材image
所以我们定义一个公用的游戏物体
JavaScript Code复制内容到剪贴板
1.//公用 定义一个游戏物体戏对象
2.function GameObject()
3.{
4. this.x = 0;//x 坐标
5. this.y = 0;//y 坐标
6. this.image = null; //图片
7.}
为了方便拓展，定义一个公用的蘑菇
JavaScript Code复制内容到剪贴板
1.//定义公用蘑菇Mushroom 继承游戏对象GameObject
2.function Mushroom() {};
3.Mushroom.prototype = new GameObject();//游戏对象GameObject
定义一个我们使用到的具体蘑菇
JavaScript Code复制内容到剪贴板
1.//蘑菇实例
2.var mushroom = new Mushroom();
初始化蘑菇的位置和图片
JavaScript Code复制内容到剪贴板
1.mushroom.image = mushroomImg;
2.mushroom.x = parseInt(screenWidth/2);
3.mushroom.y = screenHeight - 40;
四、用canvas把蘑菇绘制出来
JavaScript Code复制内容到剪贴板
1.//循环描绘物体
2.function gameLoop()
3.{
4. //清除屏幕
5. ctx.clearRect(0, 0, screenWidth, screenHeight);
6. ctx.save();
7. //绘制背景
8. ctx.drawImage(backgroundForestImg, 0, 0);
9. //绘制蘑菇
10. ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
11. ctx.restore();
12. }
好了，到这里蘑菇也定义了，背景图也定义了，绘图也定义了，下面就开始整合上面的代码写一个完整的把蘑菇和背景描述在画布上
XML/HTML Code复制内容到剪贴板
1.<!DOCTYPE>
2.<html>
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.<title>蘑菇动起来-html5中文网</title>
6.<!-- 要记得引用jquery-1.4.2.js -->
7.<script type="text/javascript" src="./js/jquery-1.4.2.js"></script>
8.<script type="text/javascript" >
9. //全局变量
10. var backgroundForestImg = new Image();//森林背景图
11. var mushroomImg = new Image();//蘑菇
12. var ctx;//2d画布
13. var screenWidth;//画布宽度
14. var screenHeight;//画布高度
15.
16. //公用 定义一个游戏物体戏对象
17. function GameObject()
18. {
19. this.x = 0;
20. this.y = 0;
21. this.image = null;
22. }
23.
24. //定义蘑菇Mushroom 继承游戏对象GameObject
25. function Mushroom() {};
26. Mushroom.prototype = new GameObject();//游戏对象GameObject
27.
28. //蘑菇实例
29. var mushroom = new Mushroom();
o //循环描绘物体
o function gameLoop()
o {
o //清除屏幕
o ctx.clearRect(0, 0, screenWidth, screenHeight);
o ctx.save();
o //绘制背景
o ctx.drawImage(backgroundForestImg, 0, 0);
o //绘制蘑菇
o ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
o ctx.restore();
o }
o //加载图片
o function loadImages()
o {
o mushroomImg.src = "images/mushroom.png";//蘑菇
o backgroundForestImg.src = "images/forest1.jpg";//森林背景图
o }
o //初始化
o $(window).ready(function(){
o loadImages();
o ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布
o screenWidth = parseInt($("#canvas").attr("width")); //画布宽度
o screenHeight = parseInt($("#canvas").attr("height"));
o mushroom.image = mushroomImg;
o mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标
o mushroom.y = screenHeight - 40;//蘑菇Y坐标
o setInterval(gameLoop, 10);
o });
o
o
o</script>
o</head>
o
o<body>
o <div id="container" style="border:1px solid; cursor:none; width:480px; height:320px;">
o <canvas id="canvas" width="480" height="320" >
o </canvas>
o </div>
o </body>
o</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复制内容到剪贴板
1.//事件处理
2.function addEventHandlers()
3.{
4. //鼠标移动则蘑菇跟着移动
5. $("#container").mousemove(function(e){
6. mushroom.x = e.pageX - (mushroom.image.width/2);
7. });
8.
9.}
我们只要在刚才的演示代码中的 $(window).ready(function(){ }); 里面加上addEventHandlers();就可以了，如下
JavaScript Code复制内容到剪贴板
1.//初始化
2.$(window).ready(function(){
3. addEventHandlers();//加上事件
4. loadImages();
5. ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布
6. mushroom.image = mushroomImg;
7. screenWidth = parseInt($("#canvas").attr("width"));
8. screenHeight = parseInt($("#canvas").attr("height"));
9. mushroom.x = parseInt(screenWidth/2);
10. mushroom.y = screenHeight - 40;
11. setInterval(gameLoop, 10);
12.});
你再运行代码试下，是不是蘑菇跟着鼠标动起来了~
