web熊和蘑菇游戏实验报告Word文档格式.docx
《web熊和蘑菇游戏实验报告Word文档格式.docx》由会员分享，可在线阅读，更多相关《web熊和蘑菇游戏实验报告Word文档格式.docx（47页珍藏版）》请在冰豆网上搜索。
年级
2011级
学号
312011*********
专业
软件工程
成绩
实验名称
实验二熊和蘑菇游戏
实验地点
6A-415
实验类型
上机
实验学时
2
实验日期
2013-11-20
实验目的和要求
目的：
1、使用画布在网页上绘制图
2、使用一些函数实现熊和蘑菇之间的碰撞
要求：
1、完成熊和蘑菇的游戏，尽可能完善游戏功能
2、熟练掌握画布在网页上绘制图
实验环境（实验设备）
拥有WindowsXP或其以上版本的操作系统的计算机，JDK，AndroidSDK，ChromeLite，IIS或Apache服务器
实验原理及内容
1．实验原理
（1）canvas和javascript
（2）数组
（3）HTML5中函数的用法
2．实验内容
（1）使用画布在网页上绘制背景、熊、蘑菇、奖品
（2）熊碰到蘑菇发生的事件以及事件处理
（3）熊碰到奖品发生的事件以及事件处理
（4）熊碰到边界发生的事件以及事件处理
（5）蘑菇随鼠标动起来的事件
3．实验前准备
1、安装手机模拟器AndroidEmulator
2、根据实验内容，准备素材
4．实验过程
1、分析游戏需要用到的对象
2、让蘑菇随着鼠标动起来
1、写html代码
用ID为container的DIV来获取鼠标移动画面的事件
2、定义全局变量
3、定义蘑菇实例
4、用canvas把蘑菇绘制起来
把蘑菇和背景绘制在画布上，其界面如下：
代码如下：
<
scripttype="
text/javascript"
src="
./js/jquery-1.4.2.js"
>
/script>
>
//全局变量
varbackgroundForestImg=newImage（）;
//森林背景图
varmushroomImg=newImage（）;
//蘑菇
varctx;
//2d画布
varscreenWidth;
//画布宽度
varscreenHeight;
//画布高度
//公用定义一个游戏物体戏对象
functionGameObject（）
{
this.x=0;
this.y=0;
this.image=null;
}
//定义蘑菇Mushroom继承游戏对象GameObject
functionMushroom（）{};
Mushroom.prototype=newGameObject（）;
//游戏对象GameObject
//蘑菇实例
varmushroom=newMushroom（）;
//循环描绘物体
functiongameLoop（）
//清除屏幕
ctx.clearRect（0,0,screenWidth,screenHeight）;
ctx.save（）;
//绘制背景
ctx.drawImage（backgroundForestImg,0,0）;
//绘制蘑菇
ctx.drawImage（mushroom.image,mushroom.x,mushroom.y）;
ctx.restore（）;
//加载图片
functionloadImages（）
mushroomImg.src="
images/mushroom.png"
;
//蘑菇
backgroundForestImg.src="
images/forest1.jpg"
}
//事件处理
functionAddEventHandlers（）
//鼠标移动则蘑菇跟着移动
$（"
#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（$（"
height"
mushroom.image=mushroomImg;
mushroom.x=parseInt（screenWidth/2）;
//蘑菇X坐标
mushroom.y=screenHeight-40;
//蘑菇Y坐标
setInterval（gameLoop,10）;
}）;
/head>
body>
<
divid="
container"
style="
border:
1pxsolid;
cursor:
none;
width:
480px;
height:
320px;
"
canvasid="
canvas"
width="
480"
height="
320"
浏览器不支持html5,<
atarget="
_blank"
href="
请下载<
/a>
支持html5的浏览器来观看
/canvas>
/div>
divclass="
Copyrights"
br/>
scriptsrc="
language="
JavaScript"
3、让熊动起来
1、定义全局变量
2、定义熊
3、描绘熊在画布上
其让熊动起来的界面如下：
//蘑菇图
varbearEyesClosedImg=newImage（）;
//闭着眼睛的熊熊
varspeed=2;
//不变常量,从新开始的速度
varhorizontalSpeed=speed;
//水平速度,随着熊的碰撞会发生改变
varverticalSpeed=-speed;
//垂直速度,开始肯定是要向上飘，所以要负数，随着熊的碰撞会发生改变
varbearAngle=2;
//熊旋转的速度
//循环描绘物体
//定义动物熊Animal继承游戏对象GameObject
functionAnimal（）{};
Animal.prototype=newGameObject（）;
//游戏对象GameObject
Animal.prototype.angle=0;
//动物的角度，目前中（即作为动物它在屏幕上旋转退回）
//定义熊实例
varanimal=newAnimal（）;
functionGameLoop（）
//绘制熊
//改变移动动物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））;
functionLoadImages（）
bearEyesClosedImg.src="
images/bear_eyesclosed.png"
//闭着眼睛的
mushroom.image=mushroomImg;
animal.image=bearEyesClosedImg;
mushroom.x=e.pageX-（mushroom.image.
升级会员 