3dff49b0ef
support. created pause button. created unselectable class for menus. fixed being able to restart game while paused. now render every frame for the pause menu now to avoid difficulties when resizing.
83 lines
No EOL
2.7 KiB
JavaScript
83 lines
No EOL
2.7 KiB
JavaScript
var colors = ["#e74c3c", "#f1c40f", "#3498db", "#2ecc71"];
|
|
var hexagonBackgroundColor = 'rgb(236, 240, 241)';
|
|
var hexagonBackgroundColorClear = 'rgba(236, 240, 241, 0.5)';
|
|
var centerBlue = '#2c3e50'; //tumblr?
|
|
|
|
function showModal(text, secondaryText) {
|
|
var buttonSize = 150;
|
|
var fontSizeLarge = 50;
|
|
var fontSizeSmall = 25;
|
|
drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, trueCanvas.width / 2 - 25, 30, hexagonBackgroundColorClear);
|
|
// drawPolygon(trueCanvas.width / 2, trueCanvas.height / 2, 6, buttonSize, 30, swegBlue);
|
|
ctx.font = fontSizeLarge + 'px Helvetica'; // figure out what is not working
|
|
ctx.textAlign = 'center';
|
|
ctx.fillStyle = centerBlue;
|
|
// ctx.fillStyle = hexagonBackgroundColor;
|
|
ctx.fillText(text, trueCanvas.width / 2, trueCanvas.height / 2 + (fontSizeLarge / 4));
|
|
ctx.font = fontSizeSmall + 'px Helvetica';
|
|
ctx.fillText(secondaryText, trueCanvas.width / 2, trueCanvas.height / 2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30);
|
|
}
|
|
|
|
function renderText(x, y, fontSize, color, text) {
|
|
ctx.font = fontSize + 'px/0 Roboto';
|
|
ctx.textAlign = 'center';
|
|
ctx.fillStyle = color;
|
|
ctx.fillText(text, x, y + (fontSize / 4) + 3.5);
|
|
|
|
}
|
|
scoreOpacity = 0;
|
|
function drawScoreboard() {
|
|
if(scoreOpacity < 1){
|
|
scoreOpacity+=0.01;
|
|
}
|
|
ctx.globalAlpha = scoreOpacity;
|
|
renderText(trueCanvas.width/2+ gdx, trueCanvas.height/2+ gdy, 50, "#fff", score);
|
|
ctx.globalAlpha = 1;
|
|
}
|
|
|
|
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) {
|
|
ctx.fillStyle = fillColor;
|
|
ctx.lineWidth = lineWidth;
|
|
ctx.strokeStyle = lineColor;
|
|
|
|
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;
|
|
}
|
|
|
|
ctx.closePath();
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
ctx.strokeStyle = 'rgba(0,0,0,0)';
|
|
}
|
|
|
|
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);
|
|
}
|
|
} |