2014-06-28 01:39:32 +00:00
|
|
|
var colors = ["#e74c3c", "#f1c40f", "#3498db", "#2ecc71"];
|
2014-06-24 02:26:00 +00:00
|
|
|
var hexColorsToTintedColors = {
|
2014-06-24 00:55:04 +00:00
|
|
|
"#e74c3c":"rgb(241,163,155)",
|
|
|
|
"#f1c40f":"rgb(246,223,133)",
|
|
|
|
"#3498db":"rgb(151,201,235)",
|
|
|
|
"#2ecc71":"rgb(150,227,183)"
|
|
|
|
};
|
|
|
|
|
2014-06-28 17:44:43 +00:00
|
|
|
//legacy support
|
2014-06-28 01:31:59 +00:00
|
|
|
var rgbToHex = {
|
|
|
|
"rgb(231,76,60)":"#e74c3c",
|
|
|
|
"rgb(241,196,15)":"#f1c40f",
|
|
|
|
"rgb(52,152,219)":"#3498db",
|
|
|
|
"rgb(46,204,113)":"#2ecc71"
|
|
|
|
};
|
|
|
|
|
2014-06-28 17:44:43 +00:00
|
|
|
//legacy support
|
2014-06-24 02:26:00 +00:00
|
|
|
var rgbColorsToTintedColors = {
|
|
|
|
"rgb(231,76,60)":"rgb(241,163,155)",
|
|
|
|
"rgb(241,196,15)":"rgb(246,223,133)",
|
|
|
|
"rgb(52,152,219)":"rgb(151,201,235)",
|
|
|
|
"rgb(46,204,113)":"rgb(150,227,183)"
|
|
|
|
};
|
|
|
|
|
2014-05-20 12:30:14 +00:00
|
|
|
var hexagonBackgroundColor = 'rgb(236, 240, 241)';
|
|
|
|
var hexagonBackgroundColorClear = 'rgba(236, 240, 241, 0.5)';
|
2014-06-23 21:59:51 +00:00
|
|
|
var centerBlue = 'rgb(44,62,80)'; //tumblr?
|
2014-07-01 15:02:52 +00:00
|
|
|
var angularVelocityConst = 4;
|
|
|
|
|
|
|
|
// 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;
|
|
|
|
}
|
|
|
|
|
|
|
|
var colorSounds = {"#e74c3c": new Audio("../sounds/lowest.ogg"),
|
|
|
|
"#f1c40f":new Audio("../sounds/highest.ogg"),
|
|
|
|
"#3498db":new Audio("../sounds/middle.ogg"),
|
|
|
|
"#2ecc71":new Audio("../sounds/highest.ogg") //fix this later
|
|
|
|
};
|
2014-05-20 12:30:14 +00:00
|
|
|
|
2014-06-24 00:55:04 +00:00
|
|
|
function renderText(x, y, fontSize, color, text, font) {
|
2014-07-03 20:30:56 +00:00
|
|
|
ctx.save();
|
2014-06-24 00:55:04 +00:00
|
|
|
if (!font) {
|
|
|
|
font = 'px/0 Roboto';
|
|
|
|
}
|
|
|
|
|
2014-06-22 04:26:46 +00:00
|
|
|
fontSize *= settings.scale;
|
2014-06-24 00:55:04 +00:00
|
|
|
ctx.font = fontSize + font;
|
2014-05-21 00:33:44 +00:00
|
|
|
ctx.textAlign = 'center';
|
2014-05-26 05:11:47 +00:00
|
|
|
ctx.fillStyle = color;
|
2014-06-22 04:26:46 +00:00
|
|
|
ctx.fillText(text, x, y + (fontSize / 2) - 9 * settings.scale);
|
2014-07-03 20:30:56 +00:00
|
|
|
ctx.restore();
|
2014-05-21 00:33:44 +00:00
|
|
|
}
|
2014-06-22 16:32:23 +00:00
|
|
|
|
2014-05-31 01:05:01 +00:00
|
|
|
scoreOpacity = 0;
|
2014-07-02 14:58:02 +00:00
|
|
|
var textOpacity=0;
|
2014-05-26 03:42:06 +00:00
|
|
|
function drawScoreboard() {
|
2014-06-24 02:26:00 +00:00
|
|
|
if (scoreOpacity < 1) {
|
|
|
|
scoreOpacity += 0.01;
|
2014-07-02 14:58:02 +00:00
|
|
|
textOpacity += 0.01;
|
2014-05-26 18:24:38 +00:00
|
|
|
}
|
2014-06-24 00:55:04 +00:00
|
|
|
|
2014-07-02 14:58:02 +00:00
|
|
|
ctx.globalAlpha = textOpacity;
|
2014-06-24 00:58:07 +00:00
|
|
|
if (gameState === 0) {
|
2014-06-24 00:55:04 +00:00
|
|
|
renderText(trueCanvas.width/2+ gdx + 6 * settings.scale, trueCanvas.height/2+ gdy, 60, "rgb(236, 240, 241)", String.fromCharCode("0xf04b"), 'px FontAwesome');
|
|
|
|
renderText(trueCanvas.width/2+ gdx + 6 * settings.scale, trueCanvas.height/2+ gdy - 170 * settings.scale, 150, "#2c3e50", "Hextris");
|
|
|
|
renderText(trueCanvas.width/2+ gdx + 5 * settings.scale, trueCanvas.height/2+ gdy + 100 * settings.scale, 20, "rgb(44,62,80)", 'Play!');
|
|
|
|
}
|
2014-07-02 15:10:36 +00:00
|
|
|
else if(gameState!=0 && textOpacity>0){
|
2014-07-02 14:58:02 +00:00
|
|
|
textOpacity -= 0.05;
|
|
|
|
renderText(trueCanvas.width/2+ gdx + 6 * settings.scale, trueCanvas.height/2+ gdy, 60, "rgb(236, 240, 241)", String.fromCharCode("0xf04b"), 'px FontAwesome');
|
|
|
|
renderText(trueCanvas.width/2+ gdx + 6 * settings.scale, trueCanvas.height/2+ gdy - 170 * settings.scale, 150, "#2c3e50", "Hextris");
|
|
|
|
renderText(trueCanvas.width/2+ gdx + 5 * settings.scale, trueCanvas.height/2+ gdy + 100 * settings.scale, 20, "rgb(44,62,80)", 'Play!');
|
|
|
|
ctx.globalAlpha = scoreOpacity;
|
|
|
|
renderText(trueCanvas.width/2+ gdx, trueCanvas.height/2+ gdy, 50, "rgb(236, 240, 241)", score);
|
|
|
|
}
|
2014-06-24 00:55:04 +00:00
|
|
|
else {
|
2014-07-02 14:58:02 +00:00
|
|
|
ctx.globalAlpha = scoreOpacity;
|
2014-06-24 00:55:04 +00:00
|
|
|
renderText(trueCanvas.width/2+ gdx, trueCanvas.height/2+ gdy, 50, "rgb(236, 240, 241)", score);
|
|
|
|
}
|
2014-06-24 00:58:07 +00:00
|
|
|
|
2014-05-26 18:24:38 +00:00
|
|
|
ctx.globalAlpha = 1;
|
2014-05-23 04:51:03 +00:00
|
|
|
}
|
2014-05-21 00:33:44 +00:00
|
|
|
|
2014-05-20 12:30:14 +00:00
|
|
|
function clearGameBoard() {
|
2014-05-25 22:27:25 +00:00
|
|
|
drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, trueCanvas.width / 2, 30, hexagonBackgroundColor, 0, 'rgba(0,0,0,0)');
|
2014-05-20 12:30:14 +00:00
|
|
|
}
|
|
|
|
|
2014-05-26 01:49:03 +00:00
|
|
|
function drawPolygon(x, y, sides, radius, theta, fillColor, lineWidth, lineColor) {
|
2014-05-24 19:06:57 +00:00
|
|
|
ctx.fillStyle = fillColor;
|
|
|
|
ctx.lineWidth = lineWidth;
|
|
|
|
ctx.strokeStyle = lineColor;
|
|
|
|
|
2014-05-20 12:30:14 +00:00
|
|
|
ctx.beginPath();
|
|
|
|
var coords = rotatePoint(0, radius, theta);
|
|
|
|
ctx.moveTo(coords.x + x, coords.y + y);
|
|
|
|
var oldX = coords.x;
|
|
|
|
var oldY = coords.y;
|
|
|
|
for (var i = 0; i < sides; i++) {
|
|
|
|
coords = rotatePoint(oldX, oldY, 360 / sides);
|
|
|
|
ctx.lineTo(coords.x + x, coords.y + y);
|
|
|
|
oldX = coords.x;
|
|
|
|
oldY = coords.y;
|
|
|
|
}
|
2014-05-25 14:41:06 +00:00
|
|
|
|
2014-05-20 12:30:14 +00:00
|
|
|
ctx.closePath();
|
2014-05-24 19:06:57 +00:00
|
|
|
ctx.fill();
|
|
|
|
ctx.stroke();
|
2014-05-26 05:11:47 +00:00
|
|
|
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
2014-05-25 14:41:06 +00:00
|
|
|
}
|
2014-05-23 05:10:12 +00:00
|
|
|
|
|
|
|
function showHighScores() {
|
|
|
|
$('#highscores').html(function() {
|
|
|
|
var str = '<li> High Scores: </li>';
|
|
|
|
for (var i = 0; i < highscores.length; i++) {
|
|
|
|
str += '<li>' + highscores[i]+ '</li>';
|
|
|
|
}
|
|
|
|
return str;
|
|
|
|
});
|
|
|
|
toggleClass('#highscores', 'not-visible');
|
|
|
|
}
|
|
|
|
|
|
|
|
function toggleClass(element, active) {
|
|
|
|
if ($(element).hasClass(active)) {
|
|
|
|
$(element).removeClass(active);
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
$(element).addClass(active);
|
|
|
|
}
|
2014-06-01 00:10:32 +00:00
|
|
|
}
|
2014-07-02 15:10:36 +00:00
|
|
|
var prevGameState;
|
|
|
|
function showText(text){
|
|
|
|
var messages = {
|
|
|
|
'paused':"<div class='centeredHeader unselectable'>Paused</div><br><div class='unselectable centeredSubHeader'>Press p to resume</div>",
|
|
|
|
'start':"<div class='centeredHeader unselectable' style='line-height:80px;' >Press enter to start</div>",
|
|
|
|
'gameover':"<div class='centeredHeader unselectable'> Game Over: "+score+" pts</div><br><table class='tg' style='margin:0px auto'> <tr> <th class='tg-031e'>1.</th> <th class='tg-031e'>"+highscores[0]+"</th> </tr> <tr> <td class='tg-031e'>2.</td> <th class='tg-031e'>"+highscores[1]+"</th> </tr> <tr> <td class='tg-031e'>3.</td> <th class='tg-031e'>"+highscores[2]+"</th> </tr> </table><br><div class='unselectable centeredSubHeader'>Press enter to restart</div>",
|
|
|
|
};
|
|
|
|
|
|
|
|
var pt = document.getElementById("overlay");
|
|
|
|
pt.className = 'unfaded';
|
|
|
|
pt.innerHTML = messages[text];
|
|
|
|
}
|
|
|
|
|
|
|
|
function hideText(text){
|
|
|
|
var pt = document.getElementById("overlay");
|
|
|
|
pt.className = 'faded';
|
|
|
|
pt.innerHTML = '';
|
|
|
|
}
|
|
|
|
function gameOverDisplay(){
|
|
|
|
var c = document.getElementById("canvas");
|
|
|
|
c.className = "blur";
|
|
|
|
showText('gameover');
|
|
|
|
}
|
|
|
|
|
|
|
|
function pause(x,o,message) {
|
|
|
|
message = 'paused';
|
|
|
|
var c = document.getElementById("canvas");
|
|
|
|
if (gameState == -1 ) {
|
|
|
|
hideText();
|
|
|
|
c.className = '';
|
|
|
|
setTimeout(function(){
|
|
|
|
gameState = prevGameState;
|
|
|
|
}, 300);
|
|
|
|
|
|
|
|
}
|
|
|
|
else if(gameState != -2 && gameState !== 0 && gameState !== 2) {
|
|
|
|
c.className = "blur";
|
|
|
|
showText(message);
|
|
|
|
prevGameState = gameState;
|
|
|
|
gameState = -1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|