多媒体技术实验报告

2021-11-01 11:31:15| 浏览次数：

　江苏科技大学

　多媒体技术考核报告

　1 ( 2 0 1 7 7 1 / 2 0 1 8 8 学年第 1 1 期学期 ) )

　课程名称:

　多媒体技术

　指导教师:

　景国良

　实验地点:

　东校区外训楼软件工程实验室

　学生姓名:

　谢卉

　学生学号:

　 1477965899

　院院

　系:

　计算机学院

　专专

　业:

　计算机科学与技术专业

　考核得分:

　2017 年 11 月

　日实验一多媒体图像文件转换

　一、实验目的

　1.掌握多媒体静态图像的基本概念,技术与获取过程。

　2.掌握多媒体图像文件基本格式种类。

　3.掌握不同图像文件的数据结构形式,了解不同格式图像文件的具体类型区别。

　4.运用高级语言编程实现不同图像文件类型的相互转换。

　二、实验环境 1、主流操作系统; 2、高级语言编程环境。

　三、实验内容

　1、编写程序实现主流图像文件格式之间的相互转换; 2、至少要实现 JPG、BMP、GIF、PNG 图像文件之间的转换; 3、编程语言不限; 4、根据实验内容撰写对应的实验报告。

　四、设计方案 ImageIO 类的静态方法可以执行许多常见的图像 I/O 操作。

　此包包含一些基本类与接口,有的用来描述图像文件内容(包括元数据与缩略图)(IIOImage);有的用来控制图像读取过程(ImageReader、ImageReadParam 与 ImageTypeSpecifier)与控制图像写入过程 (ImageWriter 与 ImageWriteParam); 还有的用来执行格式之间的代码转换 (ImageTranscoder) 与报告错误 (IIOException)。

　可处理图像格式有:jpg,BMP,bmp,JPG,wbmp,jpeg,png,PNG,JPEG,WBMP,GIF,gif。

　另外在加一些输入代码可实现简单的格式转换选择。

　五、实验代码

　 import javax、imageio、ImageIO; import java、awt、image、BufferedImage; import java、io、File; import java、io、; import java、io、IOException; import java、io、OutputStream; import java、util、Scanner;

　public class Main {

　public static void main(String[] args) {

　Scanner scan = new Scanner(System、 in );

　 System、 out 、println(" " 请输入需要转换的格式 [jpg, bmp, png, gif]:");

　 = new File( "/Users/14779/Desktop/1 、 jpg");

　 //将图片写入 ImageIO 流

　 try {

　 BufferedImage img = ImageIO、 read (out);

　 //将图片写出到指定位置(复制图片)

　 switch (scan、next()){

　 case "png":

　 case "PNG":

　 OutputStream ops = new (n n ew File( "/Users/14779/Desktop/1(1) 、 png"));

　 ImageIO、 write (img, "png", ops);

　 System、 out 、println(" " 转换完成！" ");

　 break;

　 case "jpg":

　 case "JPG":

　 ops = new ( new File( "/Users/14779/Desktop/1(1) 、 jpg"));

　 ImageIO、 write (img, "jpg", ops);

　 System、 out 、println(" " 转换完成！" ");

　 break;

　 case "bmp":

　 case "BMP":

　 ops = new ( new File( "/Users/14779/Desktop/1(1) 、 bmp"));

　 ImageIO、 write (img, "bmp", ops);

　 System、 out 、println(" " 转换完成！" ");

　 break;

　 case "GIF":

　 case "gif":

　 ops = new

　( new File( "/Users/14779/Desktop/1(1) 、 gif"));

　 ImageIO、 write (img, "gif", ops);

　 System、 out 、println(" " 转换完成！" ");

　 break;

　 default:

　 System、 out 、println(" " 请输入正确格式！" ");

　 break;

　 }

　 } catch (IOException e) {

　e、printStackTrace();

　 }

　 } } 实验截图

　六、实验过程中的问题及对应思考

　ImageIO 就是一个封装好的图像输入输出类, 使用 ImageIO 类的静态方法可以执行许多常见的图像 I/O 操作。我将图片路径事先写好放入程序里,可以通过键入转换格式来达到想要转换到的格式,为了避免键入出错,我将主程序写在 try 函数中。

　实验二

　多媒体图像文件压缩一、实验目的

　1、了解各种图像文件格式之间的存储方法与方式,了解其编码的组织方式; 2、掌握运用高级编程语言编写多媒体应用程序的方法; 3、运用高级编程语言实现对多媒体图像文件的压缩的方法。

　二、实验环境 1、主流操作系统; 2、高级语言编程环境。

　三、实验内容

　1、使用高级编程语言编写良好的运行界面; 2、运用高级编程语言编写核心代码实现对图像文件的压缩; 3、了解压缩过程中的顺进与累进方法的运用提高压缩比; 4、合理的考虑压缩算法压缩与解压的速度平衡; 5、编程语言不限; 6、根据实验内容撰写对应的实验报告。

　四、设计方案使用 O imagioIO 的对图片的压缩处理来进行此项实验。

　五、实验代码 package com、company; import javax、imageio、ImageIO; import java、awt、*; import java、awt、image、BufferedImage; import java、io、File; import java、io、IOException; public class Main {

　public static void main(String[] args) {

　 CompressPicDemo mypic = new CompressPicDemo();

　 System、 out 、println(" " 输入的图片大小 :" + mypic、getPicSize( "C:\ \\ \ Users\ \\ \ 14779\ \\ \ Desktop\ \\ \2 2 、jpg")/1024 + "KB");

　 mypic、compressPic( "C:\ \\ \ Users\ \\ \ 14779\ \\ \ Desktop", "C:\ \\ \ Users\ \\ \ 14779\ \\ \ Desktop", "2 、 jpg", "2(2) 、 jpg", 120, 120, false);

　 } } class CompressPicDemo {

　 private

　 = null; // 文件对象

　 private String inputDir; // 输入图路径

　 private String outputDir; // 输出图路径

　 private String input; // 输入图文件名

　 private String output; // 输出图文件名

　 private int outputWidth = 100; // 默认输出图片宽

　 private int outputHeight = 100; // 默认输出图片高

　 private boolean proportion = true; // 就是否等比缩放标记(默认为等比缩放)

　 public CompressPicDemo() { // 初始化变量

　 inputDir = "";

　 outputDir = "";

　 input = "";

　 output = "";

　 outputWidth = 100;

　 outputHeight = 100;

　 }

　public void setInputDir(String inputDir) {

　 this、 inputDir = inputDir;

　 }

　 public vo id setOutputDir(String outputDir) {

　 this、 outputDir = outputDir;

　 }

　 public void setInput(String input) {

　 this、 input = input;

　 }

　 public void setOutput(String output) {

　 this、 output = output;

　 }

　 public void setOutputWidth( int outputWidth) {

　 this、 outputWidth = outputWidth;

　 }

　 public void setOutputHeight( int outputHeight) {

　 this、 outputHeight = outputHeight;

　 }

　 public void setWidthAndHeight( int width, int height) {

　 this、 outputWidth = width;

　 this、 outputHeight = height;

　 }

　 * 获得图片大小

　 * 传入参数 String path :图片路径

　 public long getPicSize(String path) {

　 file = new );

　 return ();

　 }

　 // 图片处理

　 public String compressPic() {

　 try { //获得源文件

　 file = new

　 + input);

　 if (!()) {

　 return "";

　 }

　 Image img = ImageIO、 read ( file); // 判断图片格式就是否正确

　 if (img、getWidth( null) == -1) {

　 System、 out 、println( " can"t read ,retry!" + "<BR>");

　 return "no";

　 } else {

　 int newWidth; int newHeight; // 判断就是否就是等比缩放

　 if ( this、 proportion == true) { // 为等比缩放计算输出的图片宽度及高度

　 double rate1 = (( double) img、getWidth( null)) / ( double) outputWidth + 0、1;

　 double rate2 = (( double) img、getHeight( null)) / ( double) outputHeight + 0、1; // 根据缩放比率大的进行缩放控制

　 double rate = rate1 > rate2 ? rate1 : rate2;

　 newWidth = ( int) ((( double) img、getWidth( null)) / rate);

　 newHeight = ( int) ((( double) img、getHeight( null)) / rate);

　 } else {

　 newWidth = img、getWidth( null); // 输出的图片宽度

　 newHeight = img、getHeight( null); // 输出的图片高度

　 }

　 BufferedImage tag = new BufferedImage(( int) newWidth, ( int) newHeight, BufferedImage、

　TYPE_INT_RGB ); /* * Image、SCALE_SMOOTH 的缩略算法生成缩略图片的平滑度的 * 优先级比速度高生成的图片质量比较好但速度慢 */

　 tag、getGraphics()、drawImage(img、getScaledInstance(newWidth, newHeight, Image、SCALE_SMOOTH ), 0, 0, null);

　 String formatName = ( outputDir + output)、substring(( outputDir + output)、lastIndexOf(" " 、" ") + 1); //

　 out = new (outputDir + output); //// JPEGImageEncoder 可适用于其她图片类型的转换 //

　JPEGImageEncoder encoder = JPEGCodec、createJPEGEncoder(out); //

　encoder、encode(tag);

　 ImageIO、 write (tag, formatName

　, new

　 + output)

　); //

　out、close();

　 }

　 } catch (IOException ex) {

　 ex、printStackTrace();

　 }

　 return "ok";

　 }

　 public String compressPic (String inputDir, String outputDir, String input, String output) { // 输入图路径

　 this、 inputDir = inputDir; // 输出图路径

　 this、 outputDir = outputDir; // 输入图文件名

　 this、 input = input; // 输出图文件名

　 this、 output = output;

　 return compressPic();

　 }

　 public String compressPic(String inputDir, String outputDir, String input, String output, int width, int height, boolean gp) { // 输入图路径

　 this、 inputDir = inputDir; // 输出图路径

　 this、 outputDir = outputDir; // 输入图文件名

　 this、 input = input; // 输出图文件名

　 this、 output = output; // 设置图片长宽

　 setWidthAndHeight(width, height); // 就是否就是等比缩放标记

　 this、 proportion = gp;

　 return compressPic();

　 }

　六、实验过程中的问题及对应思考实验中出现了找不到输出文件的问题,后考虑到可能就是文件大小关系,所以换了一个小一些的图片,完成实验实验三

　超媒体开发设计一、实验目的

　1、熟悉超文本与超文本系统的建立与典型的外部模型; 2、熟练的运用超文本标记语言的标记方法展示超媒体; 3、通过运用超文本标记语言熟悉结点与链之间形成的超媒体结构。

　二、实验环境 1、主流操作系统系统; 2、主流浏览器; 3、系统有文本编辑器与网站开发工具。

　三、实验内容

　1、运用超文本标识语言与可扩展语言架构 Web 站点的基本框架; 2、练习超文本标识语言进行超媒体站点架构时的合理布局及技巧; 3、Web 站点主题内容不限,但必须要有一明确主题体现超媒体; 4、可以用记事本编写实验代码;

　5、根据实验内容撰写对应的实验报告; 6、回答老师的对应考核提问。

　四、设计方案使用 canvas 做出一个 H5 小游戏主要需要实现大鱼吃果实大鱼喂小鱼小鱼恢复体力还有一定的场景与界面的五、实验代码 Index 、html <!DOCTYPE html> <html lang="en"> <head>

　<title>lovefish</title>

　 <p>鼠标控制大鱼吃果实<br>

　吃到果实后喂给小鱼<br>若无及时投喂则小鱼死亡<br>红色果实 1 分<br>蓝色果实两分</p>

　 <button onclick="init()">RESTART</button>

　</div>

　 </div>

　<script type="text/javascript" src="js/UI、js"></script> </body> </html> Ane、js var aneObj = function(){

　this、rootx = [];

　this、headx=[];

　this、heady=[];

　 this、amp=[];

　this、alpha=0;

　this、num = 50; } // 初始化 aneObj、prototype、init = function(){

　for (var i = 0; i < this、num; i++) {

　 this、rootx[i] = i * 20 + Math、random()*20;

　 this、headx[i]=this、rootx[i];

　 this、heady[i]=canHeight-200+Math、random()*50;

　 this、amp[i]=Math、random()*50+50;

　} }; // 绘制海葵 aneObj、prototype、draw = function(){

　this、alpha+=deltaTime*0、001;

　var l=Math、sin(this、alpha);//

　ctx2、save();

　ctx2、globalAlpha = 0、6;

　ctx2、strokeStyle = "#3b154e";

　ctx2、lineWidth = 20;

　ctx2、lineCap = "round";

　for (var i = 0; i < this、num; i++) {

　 ctx2、beginPath();

　 ctx2、moveTo(this、rootx[i],canHeight);

　 ctx2、quadraticCurveTo(this、rootx[i],canHeight - 80,this、headx[i]+l*this、amp[i],this、heady[i]);

　 ctx2、stroke();

　}

　ctx2、restore(); }; Baby、js var babyObj=function() {

　this、x;

　this、y;

　this、angle;

　//this、babyEye=new Image();

　//this、babyBody=new Image();

　//this、babyTail=new Image();

　// this、babyTail=[];//尾巴数组

　// this、babyEye=[];//眼睛数组

　this、babyTailTimer=0;//计时器

　this、babyTailCount=0;//现在执行到哪一帧

　this、babyEyeTimer=0;//计时器

　this、babyEyeCount=0;//现在执行到哪一帧

　this、babyBodyTimer=0;//计时器

　this、babyBodyCount=0;//现在执行到哪一帧

　this、babyEyeInterval;//这张图片持续多久 } babyObj、prototype、init=function()

　{

　this、x=canWidth*0、5-50;

　this、y=canHeight*0、5+50;

　this、angle=0;

　//console、log(this、y);

　for(var i=0;i<8;i++)//初始化小鱼尾巴数组

　{

　 babyTail[i]=new Image();

　 babyTail[i]、src="、/img/babyTail"+i+"、png";

　}

　for (var i = 0; i < 2; i++) {

　 babyEye[i]=new Image();

　 babyEye[i]、src="、/img/babyEye"+i+"、png";

　}

　for (var i = 0; i < 20; i++) {

　 babyBody[i]=new Image();

　 babyBody[i]、src="、/img/babyFade"+i+"、png";

　}

　//this、babyBody、src="、/img/babyFade0、png";

　//this、babyEye、src="、/img/babyEye0、png";

　//this、babyTail、src="、/img/babyTail0、png"; } babyObj、prototype、draw=function() {

　this、x=lerpDistance(mom、x,this、x,0、98);//大鱼的坐标跟随鼠标坐标变化

　this、y=lerpDistance(mom、y,this、y,0、98);

　//算大鱼跟鼠标的角度

　var deltaY=mom、y-this、y;

　var deltaX=mom、x-this、x;

　var beta = Math、atan2(deltaY,deltaX)+Math、PI//-PI PI;

　this、angle=lerpAngle(beta,this、angle,0、6);

　//计数

　this、babyTailTimer+=deltaTime;

　if (this、babyTailTimer>50)

　 {

　 this、babyTailCount=(this、babyTailCount+1)%8;

　 this、babyTailTimer%=50;//

　}

　this、babyEyeTimer+=deltaTime;

　 if (this、babyEyeCount==0)

　{

　this、babyEyeInterval=Math、random()*1500+2000;//如果睁着眼睛的状态为1500-2000

　 }

　 else

　 {

　this、babyEyeInterval=200;//闭眼状态默认 200ms

　 }

　 if (this、babyEyeTimer>this、babyEyeInterval)

　{

　 this、babyEyeCount=(this、babyEyeCount+1)%2;//取模实现循环

　 this、babyEyeTimer%=this、babyEyeInterval;//

　 }

　 this、babyBodyTimer+=deltaTime;

　if (this、babyBodyTimer>300)

　{

　 this、babyBodyCount=this、babyBodyCount+1;

　 this、babyBodyTimer%=300;

　 if(this、babyBodyCount>19)

　 {

　this、babyBodyCount=19;

　data、gameOver=true;

　 }

　ctx1、save();//属性仅适用于小鱼

　ctx1、translate(this、x,this、y);//指定相对原点值

　ctx1、rotate(this、angle);

　var babyTailCount=this、babyTailCount;

　ctx1 、 drawImage(babyTail[babyTailCount],-babyTail[babyTailCount] 、 width*0 、5+23,-babyTail[babyTailCount]、height*0、5);

　var babyBodyCount=this、babyBodyCount;

　ctx1 、 drawImage(babyBody[babyBodyCount],-babyBody[babyBodyCount] 、 width*0 、5,-babyBody[babyBodyCount]、height*0、5);

　var babyEyeCount=this、babyEyeCount;

　ctx1 、 drawImage(babyEye[babyEyeCount],-babyEye[babyEyeCount] 、 width*0 、5,-babyEye[babyEyeCount]、height*0、5);

　ctx1、restore(); } Background、js function drawBackground() {

　ctx2、drawImage(bgPic,0,0,canWidth,canHeight); } Collision、js //碰撞检测 //判断大鱼与果实的距离 function momFruitsCollision() {

　if (data、gameOver) {

　 return;

　}

　for (var i = 0; i < fruit、num; i++) {

　 if (fruit、alive[i])

　{

　//距离的平方

　var l=calLength2(fruit、x[i],fruit、y[i],mom、x,mom、y);

　if (l<900)

　 {

　 fruit、dead(i);

　 data、fruitNum++;

　 mom、momBodyCount++;

　 if (mom、momBodyCount>7)

　 {

　mom、momBodyCount=7;

　 }

　 // console、log(data、fruitNum);

　else if(fruit、fruitType[i]=="blue")

　 {

　data、double=2;

　 }

　 else{

　data、double=1;

　 }

　 wave、born(fruit、x[i],fruit、y[i]);

　 // console、log(mom、momBodyCount);

　}

　} } function momBabyCollision() {

　if(data、fruitNum>0&&!data、gameOver)

　{

　 var l=calLength2(mom、x,mom、y,baby、x,baby、y);

　 if (l<900)

　{

　baby、babyBodyCount=0;

　// data、reset();

　mom、momBodyCount=0;

　data、addScore();

　halo、born(baby、x,baby、y);

　// var A=1;

　// A++;

　 }

　 //console、log(A);

　} } Data、js var dataObj=function() {

　this、fruitNum=0;//果实数量

　this、double=1;//就是否吃到蓝色果实【当前数量果实翻倍】

　this、score=0;

　this、gameOver=false;

　this、alpha=0; } dataObj、prototype、reset=function() {

　this、fruiNum=0;

　this、double=1; } dataObj、prototype、draw=function() {

　var w=can1、width;

　var h=can1、height;

　ctx1、save();

　ctx1、fillStyle="white";

　ctx1、font="20px Verdana";

　ctx1、textAlign="center";

　 // ctx1、fillText("num: " + this、fruitNum,w*0、5,h-50);

　// ctx1、fillText("double: " + this、double,w*0、5,h-80);

　ctx1、shadowBlur=10;//边沿模糊

　ctx1、shadowColor="white";//阴影颜色

　ctx1、fillText("score: " + this、score,w*0、5,h-80);

　if (this、gameOver) //如果游戏结束,显示 gameover

　{

　 this、alpha+=deltaTime*0、0005;//透明到不透明渐变

　 if (this、alpha>1)

　 {this、alpha=1;}

　 ctx1、fillStyle="rgba(255,255,255,"+ this、alpha +")";//添加样式的颜色白色 +alpha

　 ctx1、fillText("GAMEOVER",w*0、5,h*0、5);

　}

　ctx1、restore(); } dataObj、prototype、addScore=function() {

　this、score+=this、fruitNum*this、double;

　this、fruitNum=0;

　this、double=1; } Fruit、js var fruitObj=function() {

　this、alive = [];//bool

　this、x = [];//

　this、y = [];//

　this、l=[];//图片长度

　this、spd=[];//速度

　this、fruitType=[];//分辨果实类型

　this、orange = new Image();

　this、blue = new Image();//果实形态 2 } fruitObj、prototype、num = 30; fruitObj、prototype、init=function() {

　for (var i = 0; i < this、num; i++) {

　 this、alive[i]=false;//初始化果实为激活状态

　 this、x[i]=0;

　 this、y[i]=0;

　 this、spd[i]=Math、random()*0、017+0、003;//随机生成速度在[0、003,0、02]之间

　 this、fruitType[i]=0;

　 this、born(i);

　 //console、log(this、y[i]);

　}

　 this、orange、src="、/img/fruit、png";

　this、blue、src="、/img/blue、png";

　//console、log("初始化执行"); } fruitObj、prototype、draw=function() {//画果实

　for (var i = 0; i < this、num; i++)

　 {

　 if (this、alive[i])

　{

　if (this、fruitType[i]=="blue")

　 {

　 var pic =this、blue;

　}

　else

　{

　 var pic=this、orange;

　}

　if(this、l[i]<=15)//判断成熟

　{

　 this、l[i]+=this、spd[i]*deltaTime;//循环变大

　}

　else

　{

　 this、y[i]-=this、spd[i]*5*deltaTime;//当成熟,y 坐标上移(果实上漂)

　}

　ctx2、drawImage(pic, this、x[i]- this、l[i] * 0、5,this、y[i]- this、l[i] * 0、5,this、l[i],this、l[i]);

　if (this、y[i]<10) //当果实飘出屏外时置果实为无任务

　 {

　this、alive[i]=false;

　 }

　//console、log("画果实执行"); } fruitObj、prototype、born=function(i){//果实坐标依附在海葵上

　var aneID =Math、floor(Math、random()*ane、num);

　this、x[i]=ane、headx[aneID];

　this、y[i]=ane、heady[aneID];

　this、l[i]=0;//长度从 0 开始

　this、alive[i]=true;

　var ran=Math、random();//随机数随机决定蓝色与黄色果实

　if (ran<0、3)

　 {

　 this、fruitType[i]="blue";

　}

　else

　{

　 this、fruitType[i]="orange";

　}

　//console、log("果实出生执行");

　//console、log(canHeight) } fruitObj、prototype、dead=function(i)//消失 {

　this、alive[i]=false; } function fruitMonitor(){//保证屏幕中至少有 15 个果实

　var num=0;

　for (var i = 0; i < fruit、num; i++)

　 {

　 if (fruit、alive[i])

　 {

　 num++;

　}

　 if (num<15) //如果活跃的果实小于 15,则送入新的果实

　{

　 sendFruit();

　 return;

　}

　} } function sendFruit()//送果实 {

　for (var i = 0; i < fruit、num; i++)

　 {

　 if (!fruit、alive[i])

　 {

　 fruit、born(i);

　 return;

　}

　} } Halo、js var haloObj=function() {

　this、x=[];

　this、y=[];

　this、alive=[];//状态

　this、r=[];//半径 } haloObj、prototype、num=10;//池 haloObj、prototype、init=function() {

　for (var i = 0; i < this、num; i++) {

　 this、alive[i]=false;

　 this、r[i]=0;

　} } haloObj、prototype、draw=function() {

　for (var i = 0; i < this、num; i++) {

　 ctx1、save()

　 ctx1、linWidth=4;

　 ctx1、shadowBlur=10;

　 ctx1、shadowColor="orange";

　 if(this、alive[i])//若它就是死的,则可以拿来用

　 {

　this、r[i]+=deltaTime*0、03;

　if (this、r[i]>50) {this、alive[i]=false;}

　var alpha=1-this、r[i]/50;

　ctx1、beginPath();

　ctx1、arc(this、x[i],this、y[i],this、r[i],0,2*Math、PI);

　ctx1、closePath();

　 ctx1、strokeStyle="rgba(237,109,0,"+alpha+")";

　//添加样式的颜色白色 +alpha

　ctx1、stroke();

　 }

　 ctx1、restore();

　} } haloObj、prototype、born=function(x,y) {

　for(var i=0;i<this、num;i++)

　{

　 if (!this、alive[i]) //若它就是死的,则可以出生

　 {

　this、alive[i]=true;//更改状态

　this、r[i]=10;//半径

　 this、x[i]=x;

　this、y[i]=y;

　return;//出生之后跳出来

　 }

　} } Main、js var can1; var can2; var ctx1; var ctx2; var canWidth; var canHeight; var lastTime; var deltaTime; var bgPic= new Image(); var ane;//海葵 var fruit;//果实 var mom//大鱼 var baby; var babyTail=[];//尾巴数组 var babyEye=[];//眼睛数组 var babyBody=[];//身体数组 var bigTail=[]; var bigEye=[];//眼睛数组 var data; var wave; var halo; var momBodyOra = []; var momBodyBlue=[]; document、body、onload=game; function game(){

　lastTime=Date、now();

　deltaTime=0;

　init();

　gameloop(); } function init()//初始化工作 {

　//获得 canvas context

　 can1 = document、getElementById("canvas1");

　ctx1 = can1、getContext("2d");

　can2 = document、getElementById("canvas2");

　can1、addEventListener("mousemove",onMouseMove,false);

　ctx2 = can2、getContext("2d");

　bgPic、src="、/img/background、jpg";

　canWidth =can1、width;

　canHeight=can1、height;

　ane=new aneObj();

　ane、init();

　fruit=new fruitObj();

　fruit、init();

　data=new dataObj();

　mom=new momObj();

　mom、init();

　baby=new babyObj();

　baby、init();

　//data、init();

　mx=canWidth*0、5;

　my=canHeight*0、5;

　wave=new waveObj();

　wave、init();

　halo=new haloObj();

　halo、init(); } function gameloop(){

　window、requestAnimFrame(gameloop);

　var now =Date、now();

　deltaTime=now-lastTime;

　lastTime=now;

　if(deltaTime>50){deltaTime=50;}//切屏控制果实大小

　bgPic、onload = function () {

　ctx2、drawImage(bgPic, 0, 0, canWidth, canHeight);

　};

　drawBackground();

　ane、draw();

　fruitMonitor();

　fruit、draw();

　ctx1、clearRect(0,0,canWidth,canHeight);//00 到 canva 对角线清除画布

　mom、draw();

　baby、draw();

　momFruitsCollision();//大鱼果实碰撞检测

　momBabyCollision();//大鱼小鱼碰撞检测

　data、draw();

　wave、draw();

　halo、draw(); } function onMouseMove(e)//获取鼠标坐标 {

　if (data、gameOver) {return}//如果游戏结束则不可控制鼠标

　else if (e、offSetX||e、layerX)

　 {

　 mx=e、offSetX==undefined?e、layerX:e、offSetX;

　my=e、offSetY==undefined?e、layerY:e、offSetY;

　} } Mom、js var momObj=function () //大鱼类 {

　this、x;

　this、y;

　this、angle;

　this、bigEye=new Image();

　this、bigBody=new Image();

　this、bigTail=new Image();

　this、bigTailTimer=0;//计时器

　this、bigTailCount=0;//现在执行到哪一帧

　this、bigEyeTimer=0;//计时器

　this、bigEyeCount=0;//现在执行到哪一帧

　this、bigEyeInterval=1000;//这张图片持续多久

　this、momBodyCount=0; } momObj、prototype、init=function()//初始化 {

　this、x=canWidth*0、5;

　this、y=canHeight*0、5;

　this、angle=0;

　for(var i=0;i<8;i++)//初始化大鱼尾巴数组

　{

　 bigTail[i]=new Image();

　 bigTail[i]、src="、/img/bigTail"+i+"、png";

　}

　for (var i = 0; i < 2; i++) {

　 bigEye[i]=new Image();

　 bigEye[i]、src="、/img/bigEye"+i+"、png";

　}

　for (var i = 0; i <8; i++) {

　 momBodyBlue[i]=new Image();

　 momBodyOra[i]=new Image();

　 momBodyBlue[i]、src="、/img/bigSwimBlue"+i+"、png";

　 momBodyOra[i]、src="、/img/bigSwim"+i+"、png";

　}

　//this、bigEye、src="、/img/bigEye0、png";

　//this、bigBody、src="、/img/bigSwim0、png";

　//this、bigTail、src="、/img/bigTail0、png"; } momObj、prototype、draw=function() {

　this、x=lerpDistance(mx,this、x,0、98);//大鱼的坐标跟随鼠标坐标变化

　this、y=lerpDistance(my,this、y,0、98);

　//算大鱼跟鼠标的角度

　var deltaY=my-this、y;

　var deltaX=mx-this、x;

　var beta = Math、atan2(deltaY,deltaX)+Math、PI//-PI PI;

　this、angle=lerpAngle(beta,this、angle,0、2);

　this、bigTailTimer+=deltaTime;

　 if (this、bigTailTimer>50)

　 {

　 this、bigTailCount=(this、bigTailCount+1)%8;

　 this、bigTailTimer%=50;//

　}

　this、bigEyeTimer+=deltaTime;

　 if (this、bigEyeCount==0)

　{

　this、bigEyeInterval=Math、random()*1500+2000;//如果睁着眼睛的状态为1500-2000

　 }

　 else

　 {

　this、bigEyeInterval=200;

　 }

　 if (this、bigEyeTimer>this、bigEyeInterval)

　{

　 this、bigEyeCount=(this、bigEyeCount+1)%2;

　 this、bigEyeTimer%=this、bigEyeInterval;//

　 }

　ctx1、save();//属性仅适用于大鱼

　ctx1、translate(this、x,this、y);//指定相对原点值

　ctx1、rotate(this、angle);

　var bigTailCount=this、bigTailCount;

　ctx1 、 drawImage(bigTail[bigTailCount],-bigTail[bigTailCount] 、 width*0 、5+30,-bigTail[bigTailCount]、height*0、5);

　var momBodyCount=this、momBodyCount;

　// var A=new Image();

　// A、src="、/img/bigSwim6、png"

　if(data、double==1)

　{

　 ctx1 、drawImage(momBodyOra[momBodyCount],-momBodyOra[momBodyCount] 、width*0、5,-momBodyOra[momBodyCount]、height*0、5);

　}

　else

　{

　 ctx1、drawImage(momBodyBlue[momBodyCount],-momBodyBlue[momBodyCount]、width*0、5,-momBodyBlue[momBodyCount]、height*0、5);

　}

　var bigEyeCount=this、bigEyeCount;

　ctx1 、 drawImage(bigEye[bigEyeCount],-bigEye[bigEyeCount] 、 width*0 、5,-bigEye[bigEyeCount]、height*0、5);

　ctx1、restore(); } Wave、js var waveObj=function() {

　this、x=[];

　this、y=[];

　this、alive=[];//状态

　this、r=[];//半径 } waveObj、prototype、num=10;//池

　waveObj、prototype、init=function() {

　for (var i = 0; i < this、num; i++) {

　 this、alive[i]=false;

　 this、r[i]=0;

　} } waveObj、prototype、draw=function() {

　for (var i = 0; i < this、num; i++) {

　 ctx1、save()

　 // ctx1、linWidth=2;

　 // ctx1、shadowBlur=10;

　 // ctx1、shadowColor="white";

　 if(this、alive[i])//若它就是死的,则可以拿来用

　 {

　this、r[i]+=deltaTime*0、04;

　if (this、r[i]>65) {this、alive[i]=false;}

　var alpha=1-this、r[i]/50;

　ctx1、beginPath();

　ctx1、arc(this、x[i],this、y[i],this、r[i],0,2*Math、PI);

　ctx1、closePath();

　 ctx1、strokeStyle="rgba(255,255,255,"+alpha+")";

　//添加样式的颜色白色 +alpha

　ctx1、stroke();

　 }

　ctx1、restore(); } waveObj、prototype、born=function(x,y) {

　for(var i=0;i<this、num;i++)

　{

　 if (!this、alive[i]) //若它就是死的,则可以出生

　 {

　this、alive[i]=true;//更改状态

　this、r[i]=10;//半径

　 this、x[i]=x;

　this、y[i]=y;

　return;//出生之后跳出来

　 }

　} }

　六、实验过程中的问题及对应思考曾经想把所有的 js 函数都写在一起,出了很多错,分开类别文件写条理会更加清晰。而且由于本项目就是跟着视频课程学的,老师很多地方没有讲到或者一带而过的地方,都就是重新百度理解与更改的。

　过程中学到了很多游戏的程序化思维与 canvas 游戏交互知识。

推荐访问:多媒体技术实验报告

上一篇：samba实验报告

下一篇：主任述职报告怎么写_主任述职报告例文

多媒体技术实验报告

相关推荐

热门排行Top Ranking