web熊和蘑菇游戏实验报告

数学与计算机学院上机报告（2013/2014学年第1学期）课程名称WEB编程技术课程代码6014549上机时间2013年11月20日指导单位西华大学数学与计算机学院任课教师李颖学生姓名蒋俊年级2011级学号312011080611118专业软件工程成绩2实验名称实验二熊和蘑菇游戏实验地点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、安装手机模拟器AndroidEmulator2、根据实验内容，准备素材4．实验过程一、分析游戏需要用到的对象二、让蘑菇随着鼠标动起来1、写html代码用ID为container的DIV来获取鼠标移动画面的事件2、定义全局变量3、定义蘑菇实例4、用canvas把蘑菇绘制起来3把蘑菇和背景绘制在画布上，其界面如下：代码如下：scripttype=text/javascriptsrc=./js/jquery-1.4.2.js/scriptscripttype=text/javascript//全局变量varbackgroundForestImg=newImage();//森林背景图varmushroomImg=newImage();//蘑菇varctx;//2d画布varscreenWidth;//画布宽度varscreenHeight;//画布高度//公用定义一个游戏物体戏对象functionGameObject(){this.x=0;this.y=0;this.image=null;}//定义蘑菇Mushroom继承游戏对象GameObjectfunctionMushroom(){};Mushroom.prototype=newGameObject();//游戏对象GameObject//蘑菇实例varmushroom=newMushroom();//循环描绘物体functiongameLoop(){//清除屏幕ctx.clearRect(0,0,screenWidth,screenHeight);4ctx.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($(#canvas).attr(height));mushroom.image=mushroomImg;mushroom.x=parseInt(screenWidth/2);//蘑菇X坐标mushroom.y=screenHeight-40;//蘑菇Y坐标setInterval(gameLoop,10);});/script/headbodydivid=containerstyle=border:1pxsolid;cursor:none;width:480px;height:320px;canvasid=canvaswidth=480height=320浏览器不支持html5,atarget=_blankhref=请下载/a支持html5的浏览器来观看5/canvas/divdivclass=Copyrightsbr/scriptsrc==2297124&web_id=2297124language=JavaScript/script/div三、让熊动起来1、定义全局变量2、定义熊3、描绘熊在画布上其让熊动起来的界面如下：代码如下：scripttype=text/javascriptsrc=./js/jquery-1.4.2.js/scriptscripttype=text/javascript//全局变量varbackgroundForestImg=newImage();//森林背景图varmushroomImg=newImage();//蘑菇图varbearEyesClosedImg=newImage();//闭着眼睛的熊熊varctx;//2d画布varscreenWidth;//画布宽度varscreenHeight;//画布高度varspeed=2;//不变常量,从新开始的速度varhorizontalSpeed=speed;//水平速度,随着熊的碰撞会发生改变varverticalSpeed=-speed;//垂直速度,开始肯定是要向上飘，所以要负数，随着熊的碰撞会发生改变varbearAngle=2;//熊旋转的速度//公用定义一个游戏物体戏对象functionGameObject()6{this.x=0;this.y=0;this.image=null;}//定义蘑菇Mushroom继承游戏对象GameObjectfunctionMushroom(){};Mushroom.prototype=newGameObject();//游戏对象GameObject//蘑菇实例varmushroom=newMushroom();//循环描绘物体//定义动物熊Animal继承游戏对象GameObjectfunctionAnimal(){};Animal.prototype=newGameObject();//游戏对象GameObjectAnimal.prototype.angle=0;//动物的角度，目前中（即作为动物它在屏幕上旋转退回）//定义熊实例varanimal=newAnimal();functionGameLoop(){//清除屏幕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();}//加载图片functionLoadImages()7{mushroomImg.src=images/mushroom.png;//蘑菇backgroundForestImg.src=images/forest1.jpg;//森林背景图bearEyesClosedImg.src=images/bear_eyesclosed.png;//闭着眼睛的mushroom.image=mushroomImg;animal.image=bearEyesClosedImg;}//事件处理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($(#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/headbodydivid=containerstyle=border:1pxsolid;cursor:none;width:480px;height:320px;canvasid=canvaswidth=480height=320浏览器不支持html5,atarget=_blankhref=请下载/a支持html5的浏览器来观看/canvas/div8四、熊碰撞边界处理1、写一个碰撞处理函数2、在游戏循环GameLoop()尾部中加入检测边界函数其界面如下：代码如下：scripttype=text/javascriptsrc=./js/jquery-1.4.2.js/scriptscripttype=text/javascript//全局变量varbackgroundForestImg=newImage();//森林背景图varmushroomImg=newImage();//蘑菇varbearEyesClosedImg=newImage();//闭着眼睛的熊熊varctx;//2d画布varscreenWidth;//画布宽度varscreenHeight;//画布高度varspeed=2;//不变常量,从新开始的速度varhorizontalSpeed=speed;