江 蘇 科技大 學
多媒體技術考核 報告
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>
<meta charset="UTF-8">
<title>lovefish</title>
<link rel="stylesheet" href="css/main、css"> </head> <body>
<div id="Tips">
<h3>游戲規則</h3>
<p>鼠標控制大魚吃果實<br>
吃到果實后喂給小魚<br>若無及時投喂則小魚死亡<br>紅色果實 1 分<br>藍色果實兩分</p>
<div id="btn">
<button onclick="init()">RESTART</button>
</div>
</div>
<div class="all_bg">
<div id="allcanvas">
<canvas id="canvas1" width="800" height="600"></canvas>
<canvas id="canvas2" width="800" height="600"></canvas>
</div>
</div>
<script type="text/javascript " src="js/main、js"></script>
<script type="text/javascript" src="js/commonFunctions、js"></script>
<script type="text/javascript" src="js/background、js"></script>
<script type="text/javascript" src="js/ane、js"></script>
<script type="text/javascript" src="js/fruit、js"></script>
<script type="text/javascript" src="js/mom、js"></script>
<script type="text/javascript" src="js/collision、js"></script>
<script type="text/javascript" src="js/baby、js"></script>
<script type="text/javascript" src="js/data、js"></script>
<script type="text/javascript" src="js/wave、js"></script>
<script type="text/javascript" src="js/halo、js"></script>
<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實驗報告
同志們：今天這個大會，是市委全面落實黨要管黨、從嚴治黨要求的一項重大舉措，也是對縣市區委書記履行基層黨建工作第一責任人情況的一次集中檢閱，同時是對全市基層黨建工作的一次再部署、再落實的會議。前面，**
***年，我認真履行領班子、帶隊伍、抓黨員、保穩定的基層黨建工作思路，以學習貫徹習近平新時代中國特色社會主義思想和黨的十九大歷次全會精神為主線，以市局基層黨建工作考核細則為落腳點，落實全面從嚴治黨主體
根據會議安排，現將2022年履行抓基層黨建工作職責情況報告如下：一、履職工作特色和亮點1 突出政治建設，著力在思想認識上提高。牢固樹立抓黨建就是抓政績的理念，以“黨建工作抓引領、社區治理求突破，為民服
2022年以來，在**黨委的正確領導下，堅持以習近平新時代中國特色社會主義思想為指導，深入學習宣傳貫徹黨的二十大精神，以黨建工作為統領，扎實開展夯實“三個基本”活動，以“四化四力”行動為抓手，聚力創建
各位領導，同志們：根據會議安排，現就2022年度抓基層黨建工作情況匯報如下：一、主要做法及成效（一）強化政治引領。一是不斷強化理論武裝。堅持通過黨組會、中心組學習會和“三會一課”，第一時間、第一議題學
2022年度抓基層黨建工作述職報告按照黨委工作部署，現將本人2022年度抓基層黨建工作情況報告如下：一、2022年度抓基層黨建工作情況（一）旗幟鮮明講政治將旗幟鮮明講政治放在全局發展首要位置，積極開展
2022年，是我在數計系黨總支書記這個新崗位上度過的第一個完整的工作年度。回首一年來在校黨委的正確領導下，與數計系領導班子和全體師生共同走過的日子，艱辛歷歷在目，收獲溫潤心田。作為黨總支書記，我始終牢
按照考核要求，現將本人一年來，作為統戰部長履行職責、廉潔自律等方面情況報告如下：一、著眼增強政治素質，不斷深化理論學習堅持把旗幟鮮明講政治作為履職從政的第一位要求，帶領統戰系統干部堅決擁護“兩個確立”
**年，緊緊圍繞黨工委、管委會的決策部署，全體人員團結協作、凝心聚力，緊扣黨工委“**”基本工作思路，全力開拓進取，認真履職盡責，圓滿完成各項工作任務。一、個人思想政治狀況檸檬文苑www bgzjy
按照縣委關于開展抓基層黨建述職評議會議的有關要求，經請示縣委組織部同意，今天，我們在此召開2022年度基層黨組織書記抓基層黨建述職評議會議。1 首先，請**黨委書記，**同志述職。**黨委能夠主動研究