/*******************清空上一次内容******************/ $('body')[0].innerHTML='' +'' +'' +''; if (timer) window.clearInterval(timer); /*******************添加canvas**********************/ var width=document.documentElement.clientWidth;//屏幕宽度高度 var height=document.documentElement.clientHeight; $('body').prepend('请换个浏览器。。'); var cv=$('#canv')[0].getContext('2d'); /*******************数学计算函数********************/ var cos=Math.cos, sin=Math.sin, random=Math.random, PI=Math.PI, abs=Math.abs, atan2=Math.atan2, round=Math.round, floor=Math.floor, sqrt=Math.sqrt; function cube(x)//平方 { return x*x; } function rad(d)//角度-->弧度 { return d/180*PI; } function xy(u)//转极坐标为直角坐标 { return {x:u.r*cos(u.t), y:u.r*sin(u.t)}; } function dis2(x1,y1,x2,y2)//距离的平方 { return (x1-x2)*(x1-x2)+(y1-y2)*(y1-y2); } function ran(a,b)//生成[a, b)的随机实数 { return a+(b-a)*random(); } function ranInt(a,b)//生成[a, b]的随机整数 { return floor(a+(b-a+1)*random()); } function min(a,b) { return a>b?b:a; } /*******************strings*************************/ var _gamename='ENDLESS SEA'; var _instructions='TUTORIAL'; var _about='ABOUT'; var _startgame='START GAME'; var _pause='PAUSE'; var _continue='CONTINUE'; var _gameover='DREAM AWAKE'; var _scoreis='YOUR SCORE: '; var _ranking='RANKING'; var _tryagain='TRY AGAIN'; var _top_score='Score: '; var _top_life='Life: '; var _top_level='Level: '; var _life='Life: '; var _wudi='Superfish'; var _jiansu='Speed Down'; var _qingping='Big Bomb'; var _1up='1 UP'; var _bianxiao='Small World'; /*******************全局变量&常量声明***************/ var mx,my,bg,pl,plSize,cursorSize,ballSize,bigBallSize,bSize,butterflySize,starSize,d1,d2,d3,t1,t2,score,u1,u2, fps,planeShape,butterflyLine,butterflyShape,diamondShape,Star_6,balls,bigBalls,butterflys,stars,diamonds,waves,ballSpeed, bigBallSpeed,butterflySpeed,starSpeed,waveSpeed,waveRSpeed,waveWidth,waveMaxR,waveR,ballDensity,bigBallDensity,butterflyDensity,diamondDensity,ballStyle,instructionsContent,aboutContent, clock,died,level,judge,startBgColor=ranInt(0,359),bgColorTimer=0,life,wudi,wudiTimer,smallTimer,slowTimer,info,timer,flash,pause,pauseTimes,playNum,scoreArr; var playNum = 0;//用户玩游戏的总次数 var scoreArr = new Array();//储存玩家得分的数组 function prepossessing() { mx=width/7,my=height/2;//鼠标位置 bg;//=cv.createLinearGradient(0,0,0,height);//bg.addColorStop(0,'#cbebdb');bg.addColorStop(1,'#55a5c5');//背景渐变色 pl={x:width/9,y:height/2,vx:0,vy:0,ax:0,ay:0,arc:0};//飞机的初始运动参数 plSize=20;//飞机大小 cursorSize=6;//指针大小 ballSize=4; bigBallSize=40; bSize=10;//蝴蝶判定点大小 butterflySize=bSize-2; starSize=6; d1 = 25;d2 = d1/25*30;d3 = d1/25*27;t1 = 20;t2 = 40;//diamond大小的几个参数 u1=6,u2=80;//控制飞机运动的两个阻尼参数, u1:越大表示加速度受速度的负影响越大 u2:越大表示速度越慢 fps=60;//帧率 ballStyle='#eef'; planeShape=[{r:plSize*1,t:PI+3.14},{r:plSize*0.716,t:PI+-2.98},{r:plSize*0.443,t:PI+-2.49},{r:plSize*0.443,t:PI-0.65},{r:plSize*0.716,t:PI-0.25},{r:plSize*1,t:PI+0},{r:plSize*1,t:PI+0},{r:plSize*0.716,t:PI+0.25},{r:plSize*0.443,t:PI+0.65},{r:plSize*0.443,t:PI+2.49},{r:plSize*0.716,t:PI+2.98}]; butterflyLine=[/*{r:2.4,t:rad(130)},{r:2.5,t:rad(140)},{r:2.5,t:rad(220)},{r:2.4,t:rad(230)},*/{r:3,t:rad(15)},{r:3,t:rad(345)}];//蝴蝶身上的线的极坐标 butterflyShape=[{r:1,t:0},{r:2.7,t:rad(35)},{r:3.5,t:rad(45)},{r:3.2,t:rad(55)},{r:2.33,t:rad(95)},{r:1,t:rad(90)},{r:2,t:rad(120)},{r:2.1,t:rad(150)},{r:1,t:rad(180)},{r:2.1,t:rad(210)},{r:2,t:rad(240)},{r:1,t:rad(270)},{r:2.33,t:rad(265)},{r:3.2,t:rad(305)},{r:3.5,t:rad(315)},{r:2.7,t:rad(325)}]; diamondShape = [{r:d1,t:PI+rad(90+t1+t2/2)},{r:d2,t:PI+rad(90+t2/2)},{r:d2,t:PI+rad(90-t2/2)},{r:d1,t:PI+rad(90-t1-t2/2)},{r:0,t:PI}]; Star_6 = [{r:starSize,t:rad(90)},{r:starSize/2*1.5,t:rad(60)},{r:starSize,t:rad(30)},{r:starSize/2*1.5,t:rad(0)},{r:starSize,t:rad(-30)},{r:starSize/2*1.5,t:rad(-60)},{r:starSize,t:rad(-90)},{r:starSize/2*1.5,t:rad(-120)},{r:starSize,t:rad(-150)},{r:starSize/2*1.5,t:rad(-180)},{r:starSize,t:rad(-210)},{r:starSize/2*1.5,t:rad(-240)}]; for (var i in butterflyShape) butterflyShape[i].r*=bSize; balls=[]; //以下四个存储画面中的炮弹 bigBalls=[]; butterflys=[]; stars=[]; diamonds=[]; waves=[]; ballSpeed=4.2; bigBallSpeed=3.8; butterflySpeed=0.35; starSpeed=6; waveSpeed=ballSpeed; waveNum=8; waveR=5;//初始半径 waveRSpeed=0.7; waveWidth=6;//水波的圈的宽度 waveMaxR=100; ballDensity=0.5;//每一帧新产生一个ball的概率 bigBallDensity=0.08;//每一帧新产生一个泡泡的概率 butterflyDensity=5;//每次每边产生蝴蝶个数 starDensity=8;//每8个时钟产生一个 diamondDensity=0.0012;//宝石掉落几率 judge={ ball:cube(plSize/4+ballSize), bigBall:cube(plSize/4+bigBallSize), butterfly:cube(plSize/4+butterflySize), star:cube(plSize/4+starSize), diamond:cube(plSize/4+20) }; clock=0; score=0; died=false; level=0; life=5; wudi=false; window.clearTimeout(wudiTimer); window.clearTimeout(smallTimer); window.clearTimeout(slowTimer); flash=0; instructionsContent='

INSTRUCTION

Move mouse to control the fish

Diamonds can help you gain special abilities

Press Space or Enter for pause(^^)

'; aboutContent='

ABOUT US

周伯威 zhou_bw@yeah.net

林杨湄 linym012@163.com

Thanks for playing(*´▽`*)

'; info='';//调试信息 pause=false; pauseTimes=30;//最大暂停次数 playNum = 0;//(window.localStorage.playNum == undefined ? (window.localStorage.playNum = 0) : window.localStorage.playNum); //游戏次数 scoreArr=new Array(); } /*******************开始游戏************************/ prepossessing(); drawBG(); $('body').append('
'+_gamename+'
' +'
'+_instructions+'
'+ '
'+_about+'
'+ '
'+_startgame+'
'); $('body').append('
'); $('body').append(''); $('body').append('
'); $('#startgame').css('left',width/2-200+'px'); $('#startgame').css('top',height/2-100+'px'); $('#left').css('left','20px'); $('#left').css('width',width/2-240+'px'); $('#left').css('top',height/2-100+'px'); $('#right').css('left',width/2+220+'px'); $('#right').css('width',width/2-240+'px'); $('#right').css('top',height/2-100+'px'); $('#right2').css('left',width/2+220+'px'); $('#right2').css('width',width/2-240+'px'); $('#right2').css('top',height/2-100+'px'); $('#right2').css('padding-top',0+'px'); $('.title').css('top',height/2-200+'px'); $('.title').css('left',width/2-$('.title').width()/2+'px'); addHelpInfo(); addAboutInfo(); addRankingInfo(); /*******************各个绘图函数********************/ function hsvToRgb(h,s,v)//hsv转rgb { var hi = floor(h/60); var f = h/60-hi; var u = floor(255*v); var p = floor(255*v*(1-s)); var q = floor(255*v*(1-f*s)); var t = floor(255*v*(1-(1-f)*s)); var res=[ {r:u,g:t,b:p}, {r:q,g:u,b:p}, {r:p,g:u,b:t}, {r:p,g:q,b:u}, {r:t,g:p,b:u}, {r:u,g:p,b:q} ]; return res[hi]; } function drawBG()//画背景 { if (bgColorTimer%10==0)//变色 { var b=hsvToRgb((startBgColor+bgColorTimer/10)%360,0.14,0.92);//上方低饱和度颜色 var c=hsvToRgb((startBgColor+bgColorTimer/10)%360,0.57,0.77);//下方高饱和度颜色 bg=cv.createLinearGradient(0,0,0,height); bg.addColorStop(0,'rgb('+b.r+','+b.g+','+b.b+')'); bg.addColorStop(1,'rgb('+c.r+','+c.g+','+c.b+')'); } cv.save(); cv.fillStyle=bg; cv.fillRect(0,0,width,height); cv.restore(); } function drawItem(p,x,y,d)//创建(而不是画)任意极坐标表示的多边形,p为极坐标的数组, x&y是该图形的基准位置,d为旋转角度。需在外部指定绘图样式 { cv.beginPath(); var len=p.length; cv.moveTo(x+p[0].r*cos(p[0].t+d), y+p[0].r*sin(p[0].t+d)); for (var i=0;iwaveNum) waves.splice(0,1); } /*********************位置变化计算&碰撞判定********************/ function ballMove()//根据球的速度,每一帧改变一下各球位置 { for (var i=balls.length-1;i>=0;i--) { balls[i].pos.x+=balls[i].speed*cos(balls[i].degree); balls[i].pos.y+=balls[i].speed*sin(balls[i].degree); if (dis2(balls[i].pos.x,balls[i].pos.y,pl.x,pl.y)=0;i--) { bigBalls[i].pos.x+=bigBalls[i].speed*cos(bigBalls[i].degree); bigBalls[i].pos.y+=bigBalls[i].speed*sin(bigBalls[i].degree); if (dis2(bigBalls[i].pos.x,bigBalls[i].pos.y,pl.x,pl.y)=0;i--) { butterflys[i].pos+=butterflys[i].rspeed; butterflys[i].deg=(butterflys[i].rspeed>0)?(butterflys[i].pos+rad(90)):(butterflys[i].pos-rad(90)); butterflys[i].x=butterflys[i].cx+butterflys[i].r*cos(butterflys[i].pos); butterflys[i].y=butterflys[i].cy+butterflys[i].r*sin(butterflys[i].pos); if (dis2(butterflys[i].x,butterflys[i].y,pl.x,pl.y)0&&butterflys[i].y<-50||butterflys[i].rspeed<0&&butterflys[i].y>height+50) butterflys.splice(i,1); } } function starMove() { for (var i=stars.length-1;i>=0;i--) { stars[i].deg+=stars[i].rspeed; stars[i].x+=starSpeed*cos(stars[i].aim); stars[i].y+=starSpeed*sin(stars[i].aim); if (dis2(stars[i].x,stars[i].y,pl.x,pl.y)=0;i--) { diamonds[i].y+=diamonds[i].speed; if (dis2(diamonds[i].x,diamonds[i].y-15,pl.x,pl.y)height+50) diamonds.splice(i,1); } } function waveMove() { for (var i=waves.length-1;i>=0;i--) { waves[i].x-=waveSpeed; waves[i].r+=waveRSpeed; } } function planeMove() { var dd=dis2(mx,my,pl.x,pl.y); pl.ax=(mx-(pl.x+plSize*cos(pl.arc)))-pl.vx/u1;//欠阻尼 pl.ay=(my-(pl.y+plSize*sin(pl.arc)))-pl.vy/u1; var vv=dis2(pl.vx,pl.vy,0,0); pl.x+=pl.vx/u2; pl.y+=pl.vy/u2; pl.vx+=pl.ax; pl.vy+=pl.ay; pl.arc=atan2(100,-(my-(pl.y+plSize*sin(pl.arc))))-PI/2; } /*********************设置绘图时钟周期**********************/ function clockStart(){ timer=setInterval(function() { if (!pause) { drawBG(); drawCursor(); waveMove(); drawWaves(); planeMove(); if (!died) drawPlane(); ballMove(); drawBalls(); bigBallMove(); drawBigBalls(); butterflyMove(); drawButterflys(); starMove(); drawStars(); diamondMove(); drawDiamonds(); if (!died&&(level==1&&clock%25==0||level>1&&clock%20==0)) addWave();//产生与音乐节奏一致的水波 if (random()=1200&&random()6) { if (random()=6) { if (clock%100==0) addButterfly(); } if (level==3||level==4||level>=6) { if (clock%starDensity==0) addStar(); } if (!died) { cv.save(); var txt=_top_score+(clock+score)+'0 '+_top_life; for (var i=0;i6?'MAX':level+1); cv.font="20px Arial"; var u=min(1,dis2(pl.x,pl.y,0,0)/cube(height)); cv.fillStyle='rgba(221,51,85,'+u+')'; cv.fillText(txt,30,30); cv.restore(); } clock++; bgColorTimer++; if (clock==1800) level++; if (clock>1800&&clock%1200==600) level++; if (flash==8||flash==7||flash==2||flash==1) //屏幕闪烁两次 { cv.save(); cv.fillStyle='rgba(255,255,255,0.5)'; cv.fillRect(0,0,width,height); cv.restore(); flash--; } else if (flash) { flash--; } } }, 1000/fps);//fps } /*********************事件监听**************************/ document.addEventListener('mousemove',function(e) { mx=e.x; my=e.y; }); document.addEventListener('click',function(e) { if (e.target.id=='retry') retry(); else if (e.target.id=='startbutton') { $('#startgame').remove(); $('.title').remove(); $('html').css({cursor:'none'}); clockStart(); $('#music')[0].play(); } else if (e.target.id=='continue') { stopPause(); } }); document.addEventListener('keydown',startPause); /*********************帮助&关于信息************************/ $('#instructions').mouseenter(function() { $('#instructions').css('background','#1954c0'); $('#left').fadeIn(500); }); $('#instructions').mouseleave(function() { $('#instructions').css('background','#3369cd'); $('#left').fadeOut(300); }); $('#about').mouseenter(function() { $('#about').css('background','#1954c0'); $('#right').fadeIn(500); }); $('#about').mouseleave(function() { $('#about').css('background','#3369cd'); $('#right').fadeOut(300); }); function addHelpInfo() { $('#left').append(instructionsContent); } function addAboutInfo() { $('#right').append(aboutContent); } function addRankingInfo(t) { if(localStorage.getItem(localStorage.count)==undefined) localStorage.setItem(localStorage.count, t);//记录本次游戏得分 for(var i = 1; i<=localStorage.count; i++)//读取所有分数 scoreArr[i-1] = parseInt(localStorage.getItem(i)); var temp; for(var i = 0; ii;j--) { if(scoreArr[j] > scoreArr[j-1] ) /*相邻元素进行比较,若逆序就交换*/ { temp =scoreArr[j]; scoreArr[j] = scoreArr[j-1]; scoreArr[j-1] = temp; flag = 1; /*发生了交换,故将交换标志置为真*/ } } if (flag == 0) /*本趟排序未发生交换,提前终止算法*/ break; } for(var i = 0; i<5; i++)//取前5次最高分输出 { if(scoreArr[i] == undefined) scoreArr[i] = 0; /*var x = $('
'); x[0].innerText =i+1+". "+scoreArr[i]; x.appendTo('right2'); */ } var rankContent = '
1. '+scoreArr[0]+'
2. '+scoreArr[1]+'
3. '+scoreArr[2]+'
4. '+scoreArr[3]+'
5. '+scoreArr[4]+'
'; $('#right2')[0].innerHTML = rankContent; } /*********************暂停*********************************/ function startPause(e) { if (e.keyCode!=13&&e.keyCode!=32&&e.keyCode!=80) return; if (pause) { stopPause(); return; } if ($('#die').length) { retry(); return; } if ($('#startgame').length) { $('#startgame').remove(); $('html').css({cursor:'none'}); clockStart(); $('#left').fadeOut(300); $('#right').fadeOut(300); $('.title').remove(); return; } if (pauseTimes<0) return; $('html').css({cursor:'default'}); pause=true; pauseTimes--; $('body').append('
'+_pause+'
'+_instructions+'
'+ '
ABOUT
'+_continue+'
'); $('#pause').css('top',height/2-100+'px'); $('#pause').css('left',width/2-200+'px'); $('.title').css('top',height/2-200+'px'); $('.title').css('left',width/2-$('.title').width()/2+'px'); $('#instructions').mouseenter(function() { $('#instructions').css('background','#1954c0'); $('#left').fadeIn(500); }); $('#instructions').mouseleave(function() { $('#instructions').css('background','#3369cd'); $('#left').fadeOut(300); }); $('#about').mouseenter(function() { $('#about').css('background','#1954c0'); $('#right').fadeIn(500); }); $('#about').mouseleave(function() { $('#about').css('background','#3369cd'); $('#right').fadeOut(300); }); $('#music')[0].pause(); } function stopPause() { pause=false; $('html').css({cursor:'none'}); $('#pause').remove(); $('.title').remove(); $('#left').fadeOut(300); $('#right').fadeOut(300); $('#music')[0].play(); } /*********************吃钻石相关***************************/ function eatDiamond(f) { if (!died) { $('#diamondsound')[0].play(); switch(f) { case 0: var s=ranInt(3,6);showInfo('Score +'+s+'000');func_addScore(s);break; case 1: showInfo(_jiansu);func_slow(2);break; case 2: showInfo(_1up);func_oneUp();break; case 3: showInfo(_wudi);func_wudi(6000);break; case 4: showInfo(_qingping);func_clear();break; case 5: showInfo(_bianxiao);func_small(2);break; } } } function showInfo(s)//在小鱼上方显示文字 { info=s; var t=clock; $('body').append('
'+s+'
'); $('#info'+t).css('left',pl.x-100+'px'); $('#info'+t).css('top',pl.y-50+'px'); $('#info'+t).fadeOut(1500); } function func_addScore(s) { score+=s*100;//对玩家显示加了s千分 } function func_slow(t) { var i; for (i in balls) balls[i].speed/=t; for (i in bigBalls) bigBalls[i].speed/=t; for (i in butterflys) butterflys[i].rspeed/=t; for (i in stars) stars[i].speed/=t; ballSpeed/=t; bigBallSpeed/=t; butterflySpeed/=t; starSpeed/=t; ballDensity/=t;//密度也要减小,否则满屏幕都是子弹 bigBallDensity/=t; butterflyDensity/=t; starDensity*=t; waveSpeed/=t;//是小球的平均速度 slowTimer=setTimeout(function() { ballSpeed*=t; bigBallSpeed*=t; butterflySpeed*=t; starSpeed*=t; ballDensity*=t; bigBallDensity*=t; butterflyDensity*=t; starDensity/=t; waveSpeed*=t; },8000); flash=8; } function func_oneUp() { life++; } function func_wudi(time) { if (wudiTimer) window.clearTimeout(wudiTimer);//清除之前无敌的计时器 wudi=true; wudiTimer=setTimeout(function() { wudi=false; },time); } function func_clear() { balls=[]; bigBalls=[]; butterflys=[]; stars=[]; flash=8; } function func_small(t) { var i; for (i in bigBalls) bigBalls[i].size/=t; bigBallSize/=t; bSize/=t; butterflySize/=t; starSize/=t; plSize/=t; for (i in butterflyShape) butterflyShape[i].r/=t; Star_6 = [{r:starSize,t:rad(90)},{r:starSize/2*1.5,t:rad(60)},{r:starSize,t:rad(30)},{r:starSize/2*1.5,t:rad(0)},{r:starSize,t:rad(-30)},{r:starSize/2*1.5,t:rad(-60)},{r:starSize,t:rad(-90)},{r:starSize/2*1.5,t:rad(-120)},{r:starSize,t:rad(-150)},{r:starSize/2*1.5,t:rad(-180)},{r:starSize,t:rad(-210)},{r:starSize/2*1.5,t:rad(-240)}]; planeShape=[{r:plSize*1,t:PI+3.14},{r:plSize*0.716,t:PI+-2.98},{r:plSize*0.443,t:PI+-2.49},{r:plSize*0.443,t:PI-0.65},{r:plSize*0.716,t:PI-0.25},{r:plSize*1,t:PI+0},{r:plSize*1,t:PI+0},{r:plSize*0.716,t:PI+0.25},{r:plSize*0.443,t:PI+0.65},{r:plSize*0.443,t:PI+2.49},{r:plSize*0.716,t:PI+2.98}]; judge={ ball:cube(plSize/4+ballSize), bigBall:cube(plSize/4+bigBallSize), butterfly:cube(plSize/4+butterflySize), star:cube(plSize/4+starSize), diamond:cube(plSize/4+15) }; smallTimer=setTimeout(function() { bigBallSize*=t; bSize*=t; butterflySize*=t; starSize*=t; plSize*=t; for (i in butterflyShape) butterflyShape[i].r*=t; Star_6 = [{r:starSize,t:rad(90)},{r:starSize/2*1.5,t:rad(60)},{r:starSize,t:rad(30)},{r:starSize/2*1.5,t:rad(0)},{r:starSize,t:rad(-30)},{r:starSize/2*1.5,t:rad(-60)},{r:starSize,t:rad(-90)},{r:starSize/2*1.5,t:rad(-120)},{r:starSize,t:rad(-150)},{r:starSize/2*1.5,t:rad(-180)},{r:starSize,t:rad(-210)},{r:starSize/2*1.5,t:rad(-240)}]; planeShape=[{r:plSize*1,t:PI+3.14},{r:plSize*0.716,t:PI+-2.98},{r:plSize*0.443,t:PI+-2.49},{r:plSize*0.443,t:PI-0.65},{r:plSize*0.716,t:PI-0.25},{r:plSize*1,t:PI+0},{r:plSize*1,t:PI+0},{r:plSize*0.716,t:PI+0.25},{r:plSize*0.443,t:PI+0.65},{r:plSize*0.443,t:PI+2.49},{r:plSize*0.716,t:PI+2.98}]; judge={ ball:cube(plSize/4+ballSize), bigBall:cube(plSize/4+bigBallSize), butterfly:cube(plSize/4+butterflySize), star:cube(plSize/4+starSize), diamond:cube(plSize/4+15) }; },8000); flash=8; } /*********************玩家挂了*****************************/ function kill() { if (!wudi&&!died) { life--; showInfo(_life+life); func_wudi(2500); $('#killsound')[0].play(); } if (!life) { die(); } } function die() { if (died) return; died=true; playNum++; if(localStorage.count) localStorage.count++; else localStorage.count = 1; $('html').css({cursor:'default'}); var t=clock+score; $('body').append('
'+_gameover+'
'+_scoreis+(t)+'0
'+ '
'+_ranking+'
'+_tryagain+'
'); addRankingInfo(t+'0'); $('#die').css('top',height/2-100+'px'); $('#die').css('left',width/2-200+'px'); $('.title').css('top',height/2-200+'px'); $('.title').css('left',width/2-$('.title').width()/2+'px'); $('#right2').css('width',150+'px'); $('#right2').css('vertical-align','center'); $('#ranking').mouseenter(function() { $('#ranking').css('background','#1954c0'); $('#right2').fadeIn(500); }); $('#ranking').mouseleave(function() { $('#ranking').css('background','#3369cd'); $('#right2').fadeOut(300); }); $('#diesound')[0].play(); } function retry() { $('#die').remove(); $('.title').remove(); $('html').css({cursor:'none'}); $('.info').remove(); prepossessing(); $('#music')[0].pause(); $('#music')[0].currentTime=0; $('#music')[0].play(); $("#right2").fadeOut(300); }