hextris/js/main.js

401 lines
9 KiB
JavaScript
Raw Normal View History

$(document).ready(scaleCanvas);
$(window).resize(scaleCanvas);
2014-05-25 14:41:06 +00:00
function scaleCanvas() {
canvas.width = $(window).width();
canvas.height = $(window).height();
2014-05-25 22:27:25 +00:00
2014-05-25 15:16:33 +00:00
if (canvas.height > canvas.width) {
2014-05-25 22:27:25 +00:00
settings.scale = (canvas.width/800) * settings.baseScale;
2014-05-25 15:16:33 +00:00
} else {
2014-05-25 22:27:25 +00:00
settings.scale = (canvas.height/800) * settings.baseScale;
2014-05-25 15:16:33 +00:00
}
2014-05-25 22:27:25 +00:00
trueCanvas = {
width:canvas.width,
height:canvas.height
};
2014-05-25 16:02:22 +00:00
if (window.devicePixelRatio) {
2014-05-25 22:27:25 +00:00
//from https://gist.github.com/joubertnel/870190
var cw = $("#canvas").attr('width');
var ch = $("#canvas").attr('height');
$("#canvas").attr('width', cw * window.devicePixelRatio);
$("#canvas").attr('height', ch * window.devicePixelRatio);
$("#canvas").css('width', cw);
$("#canvas").css('height', ch);
trueCanvas = {
width:cw,
height:ch
};
ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
2014-05-25 16:02:22 +00:00
}
}
2014-05-23 20:50:18 +00:00
2014-05-17 14:26:55 +00:00
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
2014-05-22 20:36:32 +00:00
var count = 0;
2014-05-25 22:27:25 +00:00
var trueCanvas = {width:canvas.width,height:canvas.height};
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) {
window.setTimeout(callback, 1000 / framerate);
};
})();
2014-05-22 21:04:57 +00:00
$('#clickToExit').bind('click', toggleDevTools);
function toggleDevTools() {
$('#devtools').toggle();
2014-05-22 21:04:57 +00:00
}
var settings;
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
settings = {
2014-05-25 22:27:25 +00:00
startDist:227,
creationDt:40,
baseScale:1.4,
2014-05-25 14:41:06 +00:00
scale:1,
prevScale:1,
2014-05-25 14:41:06 +00:00
baseHexWidth:87,
hexWidth:87,
2014-05-25 14:41:06 +00:00
baseBlockHeight:20,
blockHeight:20,
rows:6,
2014-05-25 22:32:49 +00:00
speedModifier:0.7,
creationSpeedModifier:0.7
};
} else {
settings = {
2014-05-25 22:27:25 +00:00
baseScale:1,
startDist:340,
creationDt:9,
2014-05-25 14:41:06 +00:00
scale:1,
prevScale:1,
hexWidth:65,
2014-05-25 14:41:06 +00:00
baseHexWidth:87,
baseBlockHeight:20,
blockHeight:15,
rows:8,
speedModifier:1,
creationSpeedModifier:0.8
};
}
2014-05-24 00:22:53 +00:00
var gameState = 0;
var framerate = 60;
2014-05-22 20:36:32 +00:00
var history = {};
2014-05-17 21:38:11 +00:00
var score = 0;
var isGameOver = 3;
var scoreAdditionCoeff = 1;
var prevScore = 0;
2014-05-23 05:51:16 +00:00
var numHighScores = 3;
2014-05-23 17:01:51 +00:00
2014-05-24 00:22:53 +00:00
var highscores = [0, 0, 0];
2014-05-23 17:01:51 +00:00
if(localStorage.getItem('highscores'))
2014-05-24 19:42:40 +00:00
highscores = localStorage.getItem('highscores').split(',').map(Number);
2014-05-23 17:01:51 +00:00
2014-05-23 05:51:16 +00:00
localStorage.setItem('highscores', highscores);
2014-05-17 16:42:56 +00:00
var blocks = [];
2014-05-17 22:47:37 +00:00
var MainClock;
var gdx = 0;
var gdy = 0;
2014-05-17 22:47:37 +00:00
var lastGen;
var prevTimeScored;
2014-05-17 22:47:37 +00:00
var nextGen;
var spawnLane = 0;
2014-05-22 20:36:32 +00:00
var importing = 0;
var importedHistory;
2014-05-23 20:13:23 +00:00
var startTime;
2014-05-17 18:46:14 +00:00
2014-05-17 22:47:37 +00:00
function init() {
history = {};
importedHistory = undefined;
importing = 0;
isGameOver = 2;
score = 0;
prevScore = 0;
spawnLane = 0;
2014-05-23 20:13:23 +00:00
gameState = -2;
count = 0;
blocks = [];
MainClock = new Clock(settings.hexWidth);
2014-05-25 15:31:05 +00:00
MainClock.y = -100;
2014-05-23 20:13:23 +00:00
startTime = Date.now();
2014-05-24 00:22:53 +00:00
waveone = new waveGen(MainClock,Date.now(),[1,1,0],[1,1],[1,1]);
2014-05-17 22:47:37 +00:00
}
2014-05-24 00:22:53 +00:00
function addNewBlock(blocklane, color, iter, distFromHex, settled) { //last two are optional parameters
2014-05-25 22:27:25 +00:00
iter *= settings.speedModifier;
if (!history[count]) {
history[count] = {};
}
history[count].block = {
blocklane:blocklane,
color:color,
iter:iter
};
if (distFromHex) {
history[count].distFromHex = distFromHex;
}
if (settled) {
blockHist[count].settled = settled;
}
2014-05-24 00:22:53 +00:00
blocks.push(new Block(blocklane, color, iter, distFromHex, settled));
2014-05-22 20:36:32 +00:00
}
function importHistory() {
try {
var ih = JSON.parse(prompt("Import JSON"));
if (ih) {
2014-05-24 00:22:53 +00:00
init();
importing = 1;
importedHistory = ih;
}
}
catch (e) {
alert("Error importing JSON");
}
2014-05-22 20:36:32 +00:00
}
function exportHistory() {
$('#devtoolsText').html(JSON.stringify(history));
toggleDevTools();
2014-05-22 20:36:32 +00:00
}
2014-05-24 00:22:53 +00:00
//remember to update history function to show the respective iter speeds
function update() {
2014-05-25 14:41:06 +00:00
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);
}
}
}
2014-05-24 22:28:32 +00:00
else if (gameState == 1) {
waveone.update();
if (now - waveone.prevTimeScored > 1000) {
waveone.prevTimeScored = now;
}
}
var i;
var objectsToRemove = [];
for (i in blocks) {
2014-05-24 00:22:53 +00:00
MainClock.doesBlockCollide(blocks[i]);
if (!blocks[i].settled) {
2014-05-25 14:41:06 +00:00
if (!blocks[i].initializing) blocks[i].distFromHex -= blocks[i].iter * settings.scale;
} else if (!blocks[i].removed) {
blocks[i].removed = 1;
}
}
2014-05-24 22:28:32 +00:00
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) {
2014-05-24 22:28:32 +00:00
for (j = 0; j < MainClock.blocks[i].length; j++) {
block = MainClock.blocks[i][j];
2014-05-24 00:22:53 +00:00
MainClock.doesBlockCollide(block, j, MainClock.blocks[i]);
2014-05-24 22:28:32 +00:00
if (!MainClock.blocks[i][j].settled) {
2014-05-25 14:41:06 +00:00
MainClock.blocks[i][j].distFromHex -= block.iter * settings.scale;
}
}
}
2014-05-24 22:28:32 +00:00
2014-05-24 00:22:53 +00:00
for(i=0;i<blocks.length;i++){
if(blocks[i].removed == 1){
blocks.splice(i,1);
i--;
}
}
count++;
if (score != prevScore) {
updateScoreboard();
prevScore = score;
2014-05-24 00:22:53 +00:00
}
}
function render() {
2014-05-25 22:27:25 +00:00
ctx.clearRect(0, 0, trueCanvas.width, trueCanvas.height);
clearGameBoard();
2014-05-24 19:39:27 +00:00
if (gameState == -2) {
if (Date.now() - startTime > 1300) {
var op = (Date.now() - startTime - 1300)/500;
if (op > 1) {
op = 1;
}
2014-05-24 19:39:27 +00:00
ctx.globalAlpha = op;
2014-05-25 22:27:25 +00:00
drawPolygon(trueCanvas.width / 2 , trueCanvas.height / 2 , 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, "#bdc3c7", false,6);
2014-05-24 19:39:27 +00:00
ctx.globalAlpha = 1;
}
} else {
2014-05-25 22:27:25 +00:00
drawPolygon(trueCanvas.width / 2 + gdx, trueCanvas.height / 2 + gdy, 6, (settings.rows * settings.blockHeight) * (2/Math.sqrt(3)) + settings.hexWidth, 30, '#bdc3c7', false, 6);
2014-05-24 19:39:27 +00:00
}
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();
2014-05-25 14:41:06 +00:00
settings.prevScale = settings.scale;
2014-05-17 14:26:55 +00:00
}
2014-05-23 20:13:23 +00:00
function stepInitialLoad() {
2014-05-25 22:27:25 +00:00
var dy = getStepDY(Date.now() - startTime, 0, (100 + trueCanvas.height/2), 1300);
2014-05-24 18:41:14 +00:00
if (Date.now() - startTime > 1300) {
2014-05-23 20:13:23 +00:00
MainClock.dy = 0;
2014-05-25 22:27:25 +00:00
MainClock.y = (trueCanvas.height/2);
2014-05-24 18:41:14 +00:00
if (Date.now() - startTime - 500 > 1300) {
gameState = 1;
}
2014-05-23 20:13:23 +00:00
} else {
MainClock.dy = dy;
}
}
//t: current time, b: begInnIng value, c: change In value, d: duration
function getStepDY(t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
}
2014-05-23 20:50:18 +00:00
}
2014-05-23 20:13:23 +00:00
function animLoop() {
if (gameState == 1) {
requestAnimFrame(animLoop);
update();
render();
if (checkGameOver()) {
isGameOver--;
if (isGameOver === 0) {
gameState = 2;
}
}
2014-05-23 20:50:18 +00:00
}
2014-05-23 20:13:23 +00:00
else if (gameState === 0) {
2014-05-25 15:16:33 +00:00
requestAnimFrame(animLoop);
2014-05-23 20:13:23 +00:00
clearGameBoard();
showModal('Start!', 'Press enter to start!');
}
else if (gameState == -2) { //initialization screen just before starting
requestAnimFrame(animLoop);
2014-05-25 14:41:06 +00:00
settings.hexWidth = settings.baseHexWidth * settings.scale;
settings.blockHeight = settings.baseBlockHeight * settings.scale;
2014-05-23 20:13:23 +00:00
stepInitialLoad();
render();
}
else if (gameState == -1) {
showModal('Paused!', 'Press "P" to continue.');
}
else if (gameState == 2) {
2014-05-25 14:41:06 +00:00
requestAnimFrame(animLoop);
update();
render();
showModal('Game over: ' + score + ' pts!', 'Press enter to restart!');
highscores = localStorage.getItem('highscores').split(',').map(Number);
for (var i = 0; i < numHighScores; i++) {
if (highscores[i] < score) {
for (var j = numHighScores - 1; j > i; j--) {
highscores[j] = highscores[j - 1];
2014-05-23 05:51:16 +00:00
}
2014-05-25 14:41:06 +00:00
highscores[i] = score;
break;
2014-05-23 05:51:16 +00:00
}
}
2014-05-25 14:41:06 +00:00
localStorage.setItem('highscores', highscores);
}
else {
gameState = 0;
}
2014-05-17 23:02:28 +00:00
}
2014-05-23 20:13:23 +00:00
requestAnimFrame(animLoop);
2014-05-26 00:34:56 +00:00
function isInfringing(clock){
for(var i=0;i<clock.sides;i++){
var subTotal=0;
for(var j=0;j<clock.blocks[i].length;j++){
subTotal+=clock.blocks[i][j].deleted ;
}
if(clock.blocks[i].length- subTotal>settings.rows){
return true;
}
}
return false;
2014-05-17 23:02:28 +00:00
2014-05-26 00:34:56 +00:00
}
function checkGameOver() {
for (var i = 0; i < MainClock.sides; i++) {
2014-05-26 00:34:56 +00:00
if (isInfringing(MainClock)) {
return true;
}
}
return false;
2014-05-24 01:36:59 +00:00
}
2014-05-24 18:52:21 +00:00
window.onblur = function (e) {
2014-05-26 01:47:21 +00:00
if (gameState == -1) {
gameState = prevGameState;
requestAnimFrame(animLoop);
}
else if(gameState != -2 && gameState != 0) {
prevGameState = gameState;
gameState = -1;
}
2014-05-25 05:12:06 +00:00
};