create update.js, render.js
This commit is contained in:
parent
79e79c5a32
commit
5dc31d2e54
9 changed files with 171 additions and 177 deletions
30
index.html
30
index.html
|
@ -49,19 +49,21 @@
|
|||
<body>
|
||||
<canvas id="canvas"></canvas>
|
||||
<div id='devtools' style='z-index:3;display:none;position:absolute;left:50%;width:400px;height:400px;top:50%;margin-top:-200px;margin-left:-200px;'>
|
||||
<h2 id = 'clickToExit' style = 'background-color:#fff;color:#000'>Click to exit</h2>
|
||||
<textarea id ='devtoolsText' style = 'height:300px;width:400px;'></textarea>
|
||||
</div>
|
||||
<script type = 'text/javascript' src="vendor/hammer.min.js"></script>
|
||||
<script type = 'text/javascript' src="vendor/keypress.min.js"></script>
|
||||
<script type = 'text/javascript' src="vendor/jquery.js"></script>
|
||||
<script type = 'text/javascript' src="js/view.js"></script>
|
||||
<script type = 'text/javascript' src="js/wavegen.js"></script>
|
||||
<script type = 'text/javascript' src="js/math.js"></script>
|
||||
<script type = 'text/javascript' src="js/entities.js"></script>
|
||||
<script type = 'text/javascript' src="js/input.js"></script>
|
||||
<script type = 'text/javascript' src="js/checking.js"></script>
|
||||
<script type = 'text/javascript' src="js/main.js"></script>
|
||||
<script type = 'text/javascript' src="js/analytics.js"></script>
|
||||
<h2 id = 'clickToExit' style = 'background-color:#fff;color:#000'>Click to exit</h2>
|
||||
<textarea id ='devtoolsText' style = 'height:300px;width:400px;'></textarea>
|
||||
</div>
|
||||
<script type = 'text/javascript' src="vendor/hammer.min.js"></script>
|
||||
<script type = 'text/javascript' src="vendor/keypress.min.js"></script>
|
||||
<script type = 'text/javascript' src="vendor/jquery.js"></script>
|
||||
<script type = 'text/javascript' src="js/view.js"></script>
|
||||
<script type = 'text/javascript' src="js/wavegen.js"></script>
|
||||
<script type = 'text/javascript' src="js/math.js"></script>
|
||||
<script type = 'text/javascript' src="js/entities.js"></script>
|
||||
<script type = 'text/javascript' src="js/input.js"></script>
|
||||
<script type = 'text/javascript' src="js/checking.js"></script>
|
||||
<script type = 'text/javascript' src='js/update.js'></script>
|
||||
<script type = 'text/javascript' src='js/render.js'></script>
|
||||
<script type = 'text/javascript' src="js/main.js"></script>
|
||||
<script type = 'text/javascript' src="js/analytics.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -6,20 +6,20 @@ function search(twoD,oneD){
|
|||
}
|
||||
return false;
|
||||
}
|
||||
function floodFill(clock,side,index,deleting) {
|
||||
function floodFill(clock, side, index, deleting) {
|
||||
if (clock.blocks[side] === undefined || clock.blocks[side][index] === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
var color = clock.blocks[side][index].color;
|
||||
for(var x =-1;x<2;x++){
|
||||
for(var y =-1;y<2;y++){
|
||||
if(Math.abs(x)==Math.abs(y)){continue;}
|
||||
var curSide =(side+x+clock.sides)%clock.sides;
|
||||
for (var x =-1; x<2; x++){
|
||||
for (var y =-1; y<2; y++){
|
||||
if(Math.abs(x)==Math.abs(y)) continue;
|
||||
var curSide =(side+x+clock.sides) % clock.sides;
|
||||
var curIndex = index+y;
|
||||
if(clock.blocks[curSide] === undefined){continue;}
|
||||
if(clock.blocks[curSide][curIndex] !== undefined){
|
||||
if(clock.blocks[curSide][curIndex].color == color && search(deleting,[curSide,curIndex]) === false && clock.blocks[curSide][curIndex].deleted == 0 ) {
|
||||
if (clock.blocks[curSide] === undefined) continue;
|
||||
if (clock.blocks[curSide][curIndex] !== undefined) {
|
||||
if (clock.blocks[curSide][curIndex].color == color && search(deleting,[curSide,curIndex]) === false && clock.blocks[curSide][curIndex].deleted == 0) {
|
||||
deleting.push([curSide,curIndex]);
|
||||
floodFill(clock,curSide,curIndex,deleting);
|
||||
}
|
||||
|
@ -28,19 +28,19 @@ function floodFill(clock,side,index,deleting) {
|
|||
}
|
||||
}
|
||||
|
||||
function consolidateBlocks(clock,side,index){
|
||||
var sidesChanged =[];
|
||||
var deleting=[];
|
||||
function consolidateBlocks(clock, side, index) {
|
||||
var sidesChanged = [];
|
||||
var deleting = [];
|
||||
deleting.push([side,index]);
|
||||
|
||||
floodFill(clock,side,index,deleting);
|
||||
var deleteList= deleting;
|
||||
if(deleteList.length<3){return;}
|
||||
if (deleteList.length<3){return;}
|
||||
var i;
|
||||
for(i in deleteList){
|
||||
for (i in deleteList){
|
||||
var arr = deleteList[i];
|
||||
if(arr !== undefined && arr.length==2) {
|
||||
if(sidesChanged.indexOf(arr[0])==-1){
|
||||
if (arr !== undefined && arr.length==2) {
|
||||
if (sidesChanged.indexOf(arr[0]) == -1){
|
||||
sidesChanged.push(arr[0]);
|
||||
}
|
||||
clock.blocks[arr[0]][arr[1]].deleted = 1;
|
||||
|
|
|
@ -148,12 +148,12 @@ function Block(lane, color, iter, distFromHex, settled) {
|
|||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
function easeOutCubic(t, b, c, d) {
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
}
|
||||
return c*((t=t/d-1)*t*t + 1) + b;
|
||||
}
|
||||
|
||||
var colorSounds = {"#e74c3c": new Audio("../sounds/lowest.ogg"),
|
||||
"#f1c40f":new Audio("../sounds/highest.ogg"),
|
||||
"#3498db":new Audio("../sounds/middle.ogg"),
|
||||
"#f1c40f":new Audio("../sounds/highest.ogg"),
|
||||
"#3498db":new Audio("../sounds/middle.ogg"),
|
||||
"#2ecc71":new Audio("../sounds/highest.ogg") //fix this later
|
||||
};
|
||||
|
||||
|
@ -197,10 +197,10 @@ function Clock(sideLength) {
|
|||
if (gameState != 1) return;
|
||||
block.settled = 1;
|
||||
block.tint = 0.6;
|
||||
var lane = this.sides - block.fallingLane;// -this.position;
|
||||
var lane = this.sides - block.fallingLane;// -this.position;
|
||||
this.shakes.push({lane:block.fallingLane, magnitude:3});
|
||||
lane += this.position;
|
||||
lane = (lane+this.sides) % this.sides;
|
||||
lane = (lane + this.sides) % this.sides;
|
||||
block.distFromHex = MainClock.sideLength / 2 * Math.sqrt(3) + block.height * this.blocks[lane].length;
|
||||
this.blocks[lane].push(block);
|
||||
block.attachedLane = lane;
|
||||
|
@ -212,7 +212,7 @@ function Clock(sideLength) {
|
|||
if (block.settled) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
if (position !== undefined) {
|
||||
arr = tArr;
|
||||
if (position <= 0) {
|
||||
|
|
37
js/input.js
37
js/input.js
|
@ -1,4 +1,3 @@
|
|||
// HackExeter
|
||||
var prevGameState;
|
||||
|
||||
keypress.register_combo({
|
||||
|
@ -56,25 +55,25 @@ keypress.register_combo({
|
|||
keypress.register_combo({
|
||||
keys: "enter",
|
||||
on_keydown: function() {
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
}
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
document.body.addEventListener('touchstart', function(e){
|
||||
|
||||
if( e.changedTouches[0].pageX<window.innerWidth/2){
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(1);
|
||||
}
|
||||
if( e.changedTouches[0].pageX>window.innerWidth/2){
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(-1);
|
||||
}
|
||||
document.body.addEventListener('touchstart', function(e) {
|
||||
if (e.changedTouches[0].pageX<window.innerWidth/2) {
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(1);
|
||||
}
|
||||
if (e.changedTouches[0].pageX>window.innerWidth/2) {
|
||||
if (gameState != 1 && gameState != -2) {
|
||||
init();
|
||||
}
|
||||
MainClock.rotate(-1);
|
||||
}
|
||||
}, false)
|
||||
|
||||
|
|
124
js/main.js
124
js/main.js
|
@ -172,122 +172,6 @@ function exportHistory() {
|
|||
toggleDevTools();
|
||||
}
|
||||
|
||||
//remember to update history function to show the respective iter speeds
|
||||
function update() {
|
||||
settings.hexWidth = settings.baseHexWidth * settings.scale;
|
||||
settings.blockHeight = settings.baseBlockHeight * settings.scale;
|
||||
|
||||
var now = Date.now();
|
||||
if (importing) {
|
||||
if (importedHistory[count]) {
|
||||
if (importedHistory[count].block) {
|
||||
addNewBlock(importedHistory[count].block.blocklane, importedHistory[count].block.color, importedHistory[count].block.iter, importedHistory[count].block.distFromHex, importedHistory[count].block.settled);
|
||||
}
|
||||
|
||||
if (importedHistory[count].rotate) {
|
||||
MainClock.rotate(importedHistory[count].rotate);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else if (gameState == 1) {
|
||||
waveone.update();
|
||||
if (now - waveone.prevTimeScored > 1000) {
|
||||
waveone.prevTimeScored = now;
|
||||
}
|
||||
}
|
||||
|
||||
var i;
|
||||
var objectsToRemove = [];
|
||||
for (i in blocks) {
|
||||
MainClock.doesBlockCollide(blocks[i]);
|
||||
if (!blocks[i].settled) {
|
||||
if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter * settings.scale;
|
||||
} else if (!blocks[i].removed) {
|
||||
blocks[i].removed = 1;
|
||||
}
|
||||
}
|
||||
|
||||
var lDI;
|
||||
for (i = 0; i < MainClock.blocks.length; i++) {
|
||||
lDI = 99;
|
||||
for (j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
block = MainClock.blocks[i][j];
|
||||
if (block.deleted == 2) {
|
||||
MainClock.blocks[i].splice(j,1);
|
||||
if (j < lDI) lDI = j;
|
||||
j--;
|
||||
}
|
||||
}
|
||||
|
||||
if (lDI < MainClock.blocks[i].length) {
|
||||
for (var q = lDI; q < MainClock.blocks[i].length; q++) {
|
||||
MainClock.blocks[i][q].settled = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var block;
|
||||
var j;
|
||||
for (i in MainClock.blocks) {
|
||||
for (j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, j, MainClock.blocks[i]);
|
||||
|
||||
if (!MainClock.blocks[i][j].settled) {
|
||||
MainClock.blocks[i][j].distFromHex -= block.iter * settings.scale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(i=0;i<blocks.length;i++){
|
||||
if(blocks[i].removed == 1){
|
||||
blocks.splice(i,1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
count++;
|
||||
if (score != prevScore) {
|
||||
updateScoreboard();
|
||||
prevScore = score;
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
ctx.clearRect(0, 0, trueCanvas.width, trueCanvas.height);
|
||||
clearGameBoard();
|
||||
|
||||
if (gameState == -2) {
|
||||
if (Date.now() - startTime > 1300) {
|
||||
var op = (Date.now() - startTime - 1300)/500;
|
||||
if (op > 1) {
|
||||
op = 1;
|
||||
}
|
||||
ctx.globalAlpha = op;
|
||||
drawPolygon(trueCanvas.width / 2 , trueCanvas.height / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, "#bdc3c7", false,6);
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
} else {
|
||||
drawPolygon(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, '#bdc3c7', false, 6);
|
||||
}
|
||||
|
||||
var i;
|
||||
for (i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
block.draw(true, j);
|
||||
}
|
||||
}
|
||||
|
||||
for (i in blocks) {
|
||||
blocks[i].draw();
|
||||
}
|
||||
|
||||
MainClock.draw();
|
||||
settings.prevScale = settings.scale;
|
||||
}
|
||||
|
||||
function stepInitialLoad() {
|
||||
var dy = getStepDY(Date.now() - startTime, 0, (100 + trueCanvas.height/2), 1300);
|
||||
if (Date.now() - startTime > 1300) {
|
||||
|
@ -320,10 +204,10 @@ function animLoop() {
|
|||
update();
|
||||
render();
|
||||
if (checkGameOver()) {
|
||||
isGameOver--;
|
||||
if (isGameOver === 0) {
|
||||
// isGameOver--;
|
||||
// if (isGameOver === 0) {
|
||||
gameState = 2;
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
else if (gameState === 0) {
|
||||
|
@ -375,6 +259,6 @@ function checkGameOver() {
|
|||
return false;
|
||||
}
|
||||
|
||||
window.onblur = function (e) {
|
||||
window.onblur = function(e) {
|
||||
if (gameState == 1) gameState = -1;
|
||||
};
|
||||
|
|
|
@ -1,4 +1,3 @@
|
|||
// HackExeter
|
||||
function rotatePoint(x, y, theta) {
|
||||
var thetaRad = theta * (Math.PI / 180);
|
||||
var rotX = Math.cos(thetaRad) * x - Math.sin(thetaRad) * y;
|
||||
|
|
32
js/render.js
Normal file
32
js/render.js
Normal file
|
@ -0,0 +1,32 @@
|
|||
function render() {
|
||||
ctx.clearRect(0, 0, trueCanvas.width, trueCanvas.height);
|
||||
clearGameBoard();
|
||||
|
||||
if (gameState == -2) {
|
||||
if (Date.now() - startTime > 1300) {
|
||||
var op = (Date.now() - startTime - 1300)/500;
|
||||
if (op > 1) {
|
||||
op = 1;
|
||||
}
|
||||
ctx.globalAlpha = op;
|
||||
drawPolygon(trueCanvas.width / 2 , trueCanvas.height / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, "#bdc3c7", false,6);
|
||||
ctx.globalAlpha = 1;
|
||||
}
|
||||
} else {
|
||||
drawPolygon(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, '#bdc3c7', false, 6);
|
||||
}
|
||||
|
||||
for (var i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
block.draw(true, j);
|
||||
}
|
||||
}
|
||||
|
||||
for (var i in blocks) {
|
||||
blocks[i].draw();
|
||||
}
|
||||
|
||||
MainClock.draw();
|
||||
settings.prevScale = settings.scale;
|
||||
}
|
78
js/update.js
Normal file
78
js/update.js
Normal file
|
@ -0,0 +1,78 @@
|
|||
//remember to update history function to show the respective iter speeds
|
||||
function update() {
|
||||
settings.hexWidth = settings.baseHexWidth * settings.scale;
|
||||
settings.blockHeight = settings.baseBlockHeight * settings.scale;
|
||||
|
||||
var now = Date.now();
|
||||
if (importing) {
|
||||
if (importedHistory[count]) {
|
||||
if (importedHistory[count].block) {
|
||||
addNewBlock(importedHistory[count].block.blocklane, importedHistory[count].block.color, importedHistory[count].block.iter, importedHistory[count].block.distFromHex, importedHistory[count].block.settled);
|
||||
}
|
||||
|
||||
if (importedHistory[count].rotate) {
|
||||
MainClock.rotate(importedHistory[count].rotate);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else if (gameState == 1) {
|
||||
waveone.update();
|
||||
if (now - waveone.prevTimeScored > 1000) {
|
||||
waveone.prevTimeScored = now;
|
||||
}
|
||||
}
|
||||
|
||||
var objectsToRemove = [];
|
||||
for (var i in blocks) {
|
||||
MainClock.doesBlockCollide(blocks[i]);
|
||||
if (!blocks[i].settled) {
|
||||
if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter * settings.scale;
|
||||
} else if (!blocks[i].removed) {
|
||||
blocks[i].removed = 1;
|
||||
}
|
||||
}
|
||||
|
||||
var lowestDeletedIndex;
|
||||
for (var i = 0; i < MainClock.blocks.length; i++) {
|
||||
lowestDeletedIndex = 99;
|
||||
for (j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
block = MainClock.blocks[i][j];
|
||||
if (block.deleted == 2) {
|
||||
MainClock.blocks[i].splice(j,1);
|
||||
if (j < lowestDeletedIndex) lowestDeletedIndex = j;
|
||||
j--;
|
||||
}
|
||||
}
|
||||
|
||||
if (lowestDeletedIndex < MainClock.blocks[i].length) {
|
||||
for (var q = lowestDeletedIndex; q < MainClock.blocks[i].length; q++) {
|
||||
MainClock.blocks[i][q].settled = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for (var i in MainClock.blocks) {
|
||||
for (var j = 0; j < MainClock.blocks[i].length; j++) {
|
||||
var block = MainClock.blocks[i][j];
|
||||
MainClock.doesBlockCollide(block, j, MainClock.blocks[i]);
|
||||
|
||||
if (!MainClock.blocks[i][j].settled) {
|
||||
MainClock.blocks[i][j].distFromHex -= block.iter * settings.scale;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
for(var i=0;i<blocks.length;i++){
|
||||
if(blocks[i].removed == 1){
|
||||
blocks.splice(i,1);
|
||||
i--;
|
||||
}
|
||||
}
|
||||
|
||||
count++;
|
||||
if (score != prevScore) {
|
||||
updateScoreboard();
|
||||
prevScore = score;
|
||||
}
|
||||
}
|
|
@ -42,7 +42,7 @@ function clearGameBoard() {
|
|||
drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, trueCanvas.width / 2, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)');
|
||||
}
|
||||
|
||||
function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor) { // can make more elegant, reduce redundancy, fix readability
|
||||
function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor) {
|
||||
ctx.fillStyle = fillColor;
|
||||
ctx.lineWidth = lineWidth;
|
||||
ctx.strokeStyle = lineColor;
|
||||
|
|
Loading…
Reference in a new issue