web熊和蘑菇游戏实验报告.docVIP

数学与计算机学院 上机报告 （ 2013 / 2014 学年 第 1 学期 ） 课程名称 WEB编程技术 课程代码 6014549 上机时间 2013 年 11 月 20 日 指导单位 西华大学数学与计算机学院 任课教师 李颖 学生姓名 蒋俊 年 级 2011级 学 号 312011080611118 专 业 软件工程 成 绩 实验名称 实验二 熊和蘑菇游戏 实验地点 6A-415 实验类型 上机 实验学时 2 实验日期 2013-11-20 实验目的和要求 目的： 1、使用画布在网页上绘制图 2、使用一些函数实现熊和蘑菇之间的碰撞 要求： 1、完成熊和蘑菇的游戏，尽可能完善游戏功能 2、熟练掌握画布在网页上绘制图 实验环境(实验设备) 拥有Windows XP或其以上版本的操作系统的计算机，JDK，Android SDK，Chrome Lite，IIS或Apache服务器 实验原理及内容 1．实验原理 （1）canvas和javascript （2）数组 （3）HTML5中函数的用法 实验内容 （1）使用画布在网页上绘制背景、熊、蘑菇、奖品 （2）熊碰到蘑菇发生的事件以及事件处理 （3）熊碰到奖品发生的事件以及事件处理 （4）熊碰到边界发生的事件以及事件处理 （5）蘑菇随鼠标动起来的事件 实验前准备 1、安装手机模拟器Android Emulator 2、根据实验内容，准备素材 实验过程 分析游戏需要用到的对象 让蘑菇随着鼠标动起来 写html代码 用ID为container的DIV来获取鼠标移动画面的事件 定义全局变量 定义蘑菇实例 用canvas把蘑菇绘制起来 把蘑菇和背景绘制在画布上，其界面如下： 代码如下： 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 ctx;//2d画布 var screenWidth;//画布宽度 var screenHeight;//画布高度 //公用 定义一个游戏物体戏对象 function GameObject() { this.x = 0; this.y = 0; this.image = null; } //定义蘑菇Mushroom 继承游戏对象GameObject function Mushroom() {}; Mtotype = new GameObject();//游戏对象GameObject //蘑菇实例 var mushroom = new Mushroom(); //循环描绘物体 function gameLoop() { //清除屏幕 ctx.clearRect(0, 0, screenWidth, screenHeight); ctx.save(); //绘制背景 ctx.drawImage(backgroundForestImg, 0, 0); //绘制蘑菇 ctx.drawImage(mushroom.image, mushroom.x, mushroom.y); ctx.restore(); } //加载图片 function loadImages() { mushroomImg.src = images/mushroom.png;//蘑菇 backgroundForestImg.src = images/forest1.jpg;//森林背景图 } //事件处理 function AddEventHandlers