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.