html5 手把手教你做游戏《熊跟蘑菇》(二)
日期：2014-05-17 浏览次数：20800 次
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);
上回分析了游戏，在这一回我们将让蘑菇跟随鼠标动起来~
达到这个效果：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);
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
