web熊和蘑菇游戏实验报告

《web熊和蘑菇游戏实验报告》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、数学与计算机学院上机报告（2013/2014学年第1学期）课程名称WEB编程技术课程代码6014549上机时间2013年11月20日指导单位西华大学数学与计算机学院任课教师李颖学生姓名蒋俊年级2011级学号312011080611118专业软件工程成绩31实验名称实验二熊和蘑菇游戏实验地点6A-415实验类型上机实验学时2实验日期2013-11-20实验目的和要求目的：1、使用画布在网页上绘制图2、使用一些函数实现熊和蘑菇之间的碰撞要求：1、完成熊和蘑菇的游戏，尽可能完善游戏功能2、熟练掌握画布在网页上绘制图实验环境(实验设备)拥有WindowsXP或其以上版本的操作系统的计算机，JDK

2、，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来获取鼠标移动画

3、面的事件2、定义全局变量312、定义蘑菇实例3、用canvas把蘑菇绘制起来把蘑菇和背景绘制在画布上，其界面如下：代码如下：//全局变量varbackgroundForestImg=newImage();//森林背景图varmushroomImg=newImage();//蘑菇varctx;//2d画布varscreenWidth;//画布宽度varscreenHeight;//画布高度//公用定义一

4、个游戏物体戏对象functionGameObject(){this.x=0;this.y=0;this.image=null;}//定义蘑菇Mushroom继承游戏对象GameObjectfunctionMushroom(){};Mushroom.prototype=newGameObject();//游戏对象GameObject//蘑菇实例varmushroom=newMushroom();//循环描绘物体functiongameLoop(){31//清除屏幕ctx.clearRect(0,0,screenWidth,screenHeight);ctx.save();//绘制背景ctx

5、.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").mous

6、emove(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")

7、);mushroom.image=mushroomImg;mushroom.x=parseInt(screenWidth/2);//蘑菇X坐标mushroom.y=screenHeight-40;//蘑菇Y坐标setInterval(gameLoop,10);});