一步一步学做游戏第三回：让熊动起来_H5之家 - 中国HTML5教程资源分享第一站

HTML5技术

一步一步学做游戏第三回：让熊动起来

字号+ 作者：admin 来源： 2014-11-16 21:26 我要评论( )

这一回我们让熊动起来~ 预期达到效果： http://www.html5china.com/html5games/mogu/index2.html 一、先定义全局变量 JavaScript Code 复制内容到剪贴板 var bearEyesClosedImg= new Image(); //闭着眼睛的熊熊 var

这一回我们让http://www.html5china.com/html5games/mogu/index2.html

一、先定义全局变量

JavaScript Code复制内容到剪贴板

var bearEyesClosedImg = new Image();//闭着眼睛的熊熊
var horizontalSpeed = 2;//水平速度
var verticalSpeed = -2; //垂直速度,开始肯定是要向上飘，所以要负数
var bearAngle = 2;//熊旋转的速度

二、定义熊

首先定义一只公用熊

JavaScript Code复制内容到剪贴板

//定义动物熊 Animal 继承游戏对象GameObject
function Animal() {};
Animal.prototype = new GameObject();//游戏对象GameObject
Animal.prototype.angle = 0;//旋转的角度，（用来改变熊的旋转速度)

定义我们使用的熊

JavaScript Code复制内容到剪贴板

//定义熊实例
var animal = new Animal();

初始化熊

JavaScript Code复制内容到剪贴板

bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的
animal.image = bearEyesClosedImg;//熊图片
animal.x = parseInt(screenWidth/2);//x坐标
animal.y = parseInt(screenHeight/2); //y坐标

三、描绘熊在画布上

因为熊是相对移动的，所以我们要加一个基准

JavaScript Code复制内容到剪贴板

//以当前熊的中心位置为基准
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
//描绘熊
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));

但是

JavaScript Code复制内容到剪贴板

//以当前熊的中心位置为基准
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
//根据当前熊的角度轮换
ctx.rotate(animal.angle * Math.PI/180);
//描绘熊
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));

上面的熊是不动的，为什么呢，因为x,y轴和角度没变，因此我们再加上改变x,y和角度的代码,于是上面的代码变成了

JavaScript Code复制内容到剪贴板

//改变移动动物X和Y位置
animal.x += horizontalSpeed;
animal.y += verticalSpeed;
//改变翻滚角度
animal.angle += bearAngle;
//以当前熊的中心位置为基准
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
//根据当前熊的角度轮换
ctx.rotate(animal.angle * Math.PI/180);
//描绘熊
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));

到现目前为止

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

<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 bearEyesClosedImg = new Image();//闭着眼睛的熊熊
var ctx;//2d画布
var screenWidth;//画布宽度
var screenHeight;//画布高度
var speed = 2;//不变常量,从新开始的速度
var horizontalSpeed = speed;//水平速度,随着熊的碰撞会发生改变
var verticalSpeed = -speed; //垂直速度,开始肯定是要向上飘，所以要负数，随着熊的碰撞会发生改变
var bearAngle = 2;//熊旋转的速度
//公用定义一个游戏物体戏对象
function GameObject()
{
this.x = 0;
this.y = 0;
this.image = null;
}
//定义蘑菇Mushroom 继承游戏对象GameObject
function Mushroom() {};
Mushroom.prototype = new GameObject();//游戏对象GameObject
//蘑菇实例
var mushroom = new Mushroom(); //循环描绘物体
//定义动物熊 Animal 继承游戏对象GameObject
function Animal() {};
Animal.prototype = new GameObject();//游戏对象GameObject
Animal.prototype.angle = 0;//动物的角度，目前中（即作为动物它在屏幕上旋转退回）
//定义熊实例
var animal = new Animal();
function GameLoop()
{
//清除屏幕
ctx.clearRect(0, 0, screenWidth, screenHeight);
ctx.save();
//绘制背景
ctx.drawImage(backgroundForestImg, 0, 0);
//绘制蘑菇
ctx.drawImage(mushroom.image, mushroom.x, mushroom.y);
//绘制熊
//改变移动动物X和Y位置
animal.x += horizontalSpeed;
animal.y += verticalSpeed;
//改变翻滚角度
animal.angle += bearAngle;
//以当前熊的中心位置为基准
ctx.translate(animal.x + (animal.image.width/2), animal.y + (animal.image.height/2));
//根据当前熊的角度轮换
ctx.rotate(animal.angle * Math.PI/180);
//描绘熊
ctx.drawImage(animal.image, - (animal.image.width/2), - (animal.image.height/2));
ctx.restore();
}
//加载图片
function LoadImages()
{
mushroomImg.src = "images/mushroom.png";//蘑菇
backgroundForestImg.src = "images/forest1.jpg";//森林背景图
bearEyesClosedImg.src = "images/bear_eyesclosed.png";//闭着眼睛的
mushroom.image = mushroomImg;
animal.image = bearEyesClosedImg;
}
//事件处理
function AddEventHandlers()
{
//鼠标移动则蘑菇跟着移动
$("#container").mousemove(function(e){
mushroom.x = e.pageX - (mushroom.image.width/2);
});
}
//初始化
$(window).ready(function(){
AddEventHandlers();//添加事件
LoadImages();
ctx = document.getElementById('canvas').getContext('2d'); //获取2d画布
screenWidth = parseInt($("#canvas").attr("width")); //画布宽度
screenHeight = parseInt($("#canvas").attr("height"));
//初始化蘑菇
mushroom.x = parseInt(screenWidth/2);// 蘑菇X坐标
mushroom.y = screenHeight - 40;//蘑菇Y坐标
//初始化熊
animal.x = parseInt(screenWidth/2);
animal.y = parseInt(screenHeight/2);
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" >
浏览器不支持html5,<a target="_blank" href="http://www.html5china.com/help/browser.html">请下载</a>支持html5的浏览器来观看
</canvas>
</div>
</body>
</html>

第三回就讲到这了，第四回讲熊碰撞边界和蘑菇的事件

大家有什么建议的话，可以到论坛留言讨论：http://bbs.html5china.com/read.php?tid=2

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

--作者：深邃老马

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

　

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。

相关文章

如何一步一步用DDD设计一个电商网站（十二）—— 提交并生成订单 - Z

2017-02-01 16:01
如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化

2016-12-27 13:06
如何一步一步用DDD设计一个电商网站（八）—— 会员价的集成 - Zacha

2016-12-14 13:01
C#进阶系列——一步一步封装自己的HtmlHelper组件：BootstrapHelper

2016-08-04 17:00

网友点评

精彩导读

Dora.Interception: 一个为.NET Core度身定制

用Visual Studio2017写C++静态库 - jily16

vue全局配置----小白基础篇 - 星光笔

这短短几行代码价值一万 - 小尧弟

HTML5优势 - 计划

热门资讯

关注我们

关注微信公众号，了解最新精彩内容