diff --git a/README.md b/README.md
index 92a70e3..083396e 100644
--- a/README.md
+++ b/README.md
@@ -1,33 +1,54 @@
-EndlessSea
-==========
-游戏相关
-----------
-#### Play: https://zbww.github.io/EndlessSea
+# Endless Sea
-#### REPORT: https://zbww.github.io/EndlessSea/report.pdf
+Endless Sea is a small browser survival game built with HTML5 canvas, jQuery, and plain JavaScript. You guide a fish through an underwater bullet-hell style field, avoid incoming hazards, and collect diamonds to trigger temporary power-ups.
-#### CODE: https://github.com/zbww/EndlessSea/blob/master/js/main.js
+## Play
-> **游戏说明:**
+- Live demo: https://zbww.github.io/EndlessSea
+- Project report: https://zbww.github.io/EndlessSea/report.pdf
+- Original source reference: https://github.com/zbww/EndlessSea/blob/master/js/main.js
-> - 使用鼠标控制
-> - 吃**钻石**获得特殊技能
-> - 躲避**除了钻石以外**的飞行物体~
-> - 建议戴上耳机
+## How To Play
-> **特色:**
+- Move the mouse to steer the fish.
+- Avoid every flying object except diamonds.
+- Collect diamonds to gain temporary bonuses.
+- Press `Space`, `Enter`, or `P` to pause and resume.
+- Use headphones if you want the full audio experience.
-> - 几乎所有元素都为js动态生成
-> - **全部**图形绘制由js代码完成，未使用任何外部图片
+## Power-Ups
+Diamonds can trigger one of several effects:
-开发人员:
-----------
+- Score bonus
+- Speed Down
+- 1 UP
+- Superfish invincibility
+- Big Bomb screen clear
+- Small World size reduction
-周伯威 zbwwwww@gmail.com
-林杨湄 linym012@163.com
+## Running Locally
-开发时间:
------------
+This project is static and does not require a build step.
-2014年7月12日~16日
+1. Clone or download the repository.
+2. Open `index.html` in a modern browser.
+
+If your browser blocks autoplay audio, start the game with a click so music playback can begin normally.
+
+## Project Notes
+
+- Most visible game elements are generated dynamically in JavaScript.
+- All game graphics are drawn in code with canvas rather than external image assets.
+- Audio files are included in the repository under `music/`.
+
+## Credits
+
+Developers:
+
+- Bobwei Zhou
+- Yangmei Lin
+
+Original development period:
+
+- July 12, 2014 to July 16, 2014
diff --git a/index.html b/index.html
index ce8bcb3..8fa031f 100644
--- a/index.html
+++ b/index.html
@@ -2,13 +2,12 @@
Endless Sea
请换个浏览器。。 ');
- var cv=$('#canv')[0].getContext('2d');
+ $('body').prepend('请换个浏览器。。 ');
+ var canvasEl=$('#canv')[0];
+ var cv=canvasEl.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;
@@ -73,10 +74,162 @@
/*******************全局变量&常量声明***************/
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;
+ bigBallSpeed,butterflySpeed,starSpeed,waveSpeed,waveRSpeed,waveWidth,waveMaxR,waveR,waveNum,ballDensity,bigBallDensity,butterflyDensity,starDensity,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,gameStarted,slowFactor,smallFactor;
var playNum = 0;//用户玩游戏的总次数
var scoreArr = new Array();//储存玩家得分的数组
+ var STORAGE_KEYS = {
+ scores: 'endlessSea.scores'
+ };
+
+ function loadScores()
+ {
+ var raw = window.localStorage.getItem(STORAGE_KEYS.scores);
+ if (!raw) return [];
+ try
+ {
+ var parsed = JSON.parse(raw);
+ if (!Array.isArray(parsed)) return [];
+ return parsed.filter(function(item) { return typeof item === 'number' && !isNaN(item); });
+ }
+ catch (err)
+ {
+ return [];
+ }
+ }
+
+ function saveScores(scores)
+ {
+ window.localStorage.setItem(STORAGE_KEYS.scores, JSON.stringify(scores));
+ }
+
+ function recordScore(totalScore)
+ {
+ var scores = loadScores();
+ scores.push(totalScore);
+ scores.sort(function(a, b) { return b - a; });
+ saveScores(scores);
+ return scores;
+ }
+
+ function getTopScores(limit)
+ {
+ var scores = loadScores().sort(function(a, b) { return b - a; });
+ while (scores.length < limit) scores.push(0);
+ return scores.slice(0, limit);
+ }
+
+ function renderRanking(scores)
+ {
+ var rankContent = '';
+ for (var i = 0; i < scores.length; i++)
+ {
+ rankContent += '' + (i + 1) + '. ' + scores[i] + '
';
+ }
+ $('#right2')[0].innerHTML = rankContent;
+ }
+
+ function clearLoop()
+ {
+ if (timer)
+ {
+ window.clearInterval(timer);
+ timer = null;
+ }
+ }
+
+ function layoutPanels()
+ {
+ var sideWidth = max(width/2-240, 150);
+ var rightLeft = max(width/2+220, 20);
+ if ($('#startgame').length)
+ {
+ $('#startgame').css({left: width/2-200+'px', top: height/2-100+'px'});
+ }
+ if ($('#pause').length)
+ {
+ $('#pause').css({left: width/2-200+'px', top: height/2-100+'px'});
+ }
+ if ($('#die').length)
+ {
+ $('#die').css({left: width/2-200+'px', top: height/2-100+'px'});
+ }
+ if ($('.title').length)
+ {
+ $('.title').css({top: height/2-200+'px', left: width/2-$('.title').width()/2+'px'});
+ }
+ if ($('#left').length)
+ {
+ $('#left').css({left: '20px', width: sideWidth+'px', top: height/2-100+'px'});
+ }
+ if ($('#right').length)
+ {
+ $('#right').css({left: rightLeft+'px', width: sideWidth+'px', top: height/2-100+'px'});
+ }
+ if ($('#right2').length)
+ {
+ $('#right2').css({left: rightLeft+'px', top: height/2-100+'px'});
+ if (!$('#die').length)
+ {
+ $('#right2').css({width: sideWidth+'px', 'padding-top': 0+'px'});
+ }
+ }
+ }
+
+ function resizeGame()
+ {
+ width = document.documentElement.clientWidth;
+ height = document.documentElement.clientHeight;
+ canvasEl.width = width;
+ canvasEl.height = height;
+ $('#canv').css({width: width+'px', height: height+'px'});
+ mx = min(max(mx || 0, 0), width);
+ my = min(max(my || 0, 0), height);
+ if (pl)
+ {
+ pl.x = min(max(pl.x, 0), width);
+ pl.y = min(max(pl.y, 0), height);
+ }
+ layoutPanels();
+ drawBG();
+ }
+
+ function bindOverlayHover(triggerSelector, panelSelector)
+ {
+ $(document).off('mouseenter mouseleave', triggerSelector);
+ $(document).on('mouseenter', triggerSelector, function()
+ {
+ $(triggerSelector).css('background','#1954c0');
+ $(panelSelector).fadeIn(500);
+ });
+ $(document).on('mouseleave', triggerSelector, function()
+ {
+ $(triggerSelector).css('background','#3369cd');
+ $(panelSelector).fadeOut(300);
+ });
+ }
+
+ function max(a,b)
+ {
+ return a>b?a:b;
+ }
+
+ function rebuildScaledShapes()
+ {
+ 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}];
+ }
+
+ function rebuildJudge(diamondRadius)
+ {
+ 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+diamondRadius)
+ };
+ }
function prepossessing()
{
mx=width/7,my=height/2;//鼠标位置
@@ -93,11 +246,10 @@
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)}];
+ rebuildScaledShapes();
for (var i in butterflyShape) butterflyShape[i].r*=bSize;
balls=[]; //以下四个存储画面中的炮弹
@@ -124,13 +276,7 @@
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)
- };
+ rebuildJudge(20);
clock=0;
score=0;
@@ -148,6 +294,9 @@
info='';//调试信息
pause=false;
pauseTimes=30;//最大暂停次数
+ gameStarted = false;
+ slowFactor = 1;
+ smallFactor = 1;
playNum = 0;//(window.localStorage.playNum == undefined ? (window.localStorage.playNum = 0) : window.localStorage.playNum); //游戏次数
scoreArr=new Array();
}
@@ -162,20 +311,7 @@
$('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');
+ layoutPanels();
addHelpInfo();
addAboutInfo();
addRankingInfo();
@@ -612,6 +748,8 @@
/*********************设置绘图时钟周期**********************/
function clockStart(){
+ clearLoop();
+ gameStarted = true;
timer=setInterval(function() {
if (!pause)
{
@@ -689,9 +827,23 @@
/*********************事件监听**************************/
document.addEventListener('mousemove',function(e)
{
- mx=e.x;
- my=e.y;
+ mx=e.clientX;
+ my=e.clientY;
});
+
+ document.addEventListener('touchstart',function(e)
+ {
+ if (!e.touches.length) return;
+ mx=e.touches[0].clientX;
+ my=e.touches[0].clientY;
+ }, {passive:true});
+
+ document.addEventListener('touchmove',function(e)
+ {
+ if (!e.touches.length) return;
+ mx=e.touches[0].clientX;
+ my=e.touches[0].clientY;
+ }, {passive:true});
document.addEventListener('click',function(e)
{
@@ -712,28 +864,11 @@
});
document.addEventListener('keydown',startPause);
+ window.addEventListener('resize', resizeGame);
/*********************帮助&关于信息************************/
- $('#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);
- });
+ bindOverlayHover('#instructions', '#left');
+ bindOverlayHover('#about', '#right');
function addHelpInfo()
{
@@ -747,39 +882,15 @@
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;
+ scoreArr = recordScore(t);
}
- for(var i = 0; i<5; i++)//取前5次最高分输出
+ else
{
- if(scoreArr[i] == undefined)
- scoreArr[i] = 0;
- /*var x = $('
');
- x[0].innerText =i+1+". "+scoreArr[i];
- x.appendTo('right2');
- */
+ scoreArr = loadScores();
}
- var rankContent = '1. '+scoreArr[0]+'
2. '+scoreArr[1]+'
3. '+scoreArr[2]+'
4. '+scoreArr[3]+'
5. '+scoreArr[4]+'
';
- $('#right2')[0].innerHTML = rankContent;
-
+ renderRanking(getTopScores(5));
}
/*********************暂停*********************************/
@@ -802,6 +913,7 @@
$('#startgame').remove();
$('html').css({cursor:'none'});
clockStart();
+ $('#music')[0].play();
$('#left').fadeOut(300);
$('#right').fadeOut(300);
$('.title').remove();
@@ -814,30 +926,7 @@
pauseTimes--;
$('body').append(''+_pause+'
'+_instructions+'
'+
'
ABOUT
'+_continue+'
'+_gameover+'
'+_scoreis+(t)+'0
'+
'
'+_ranking+'
'+_tryagain+'