From eff06e4c187e7b15b0c46337f3ac8febf109e8bf Mon Sep 17 00:00:00 2001 From: lengstrom Date: Sat, 19 Jul 2014 16:19:07 -0400 Subject: [PATCH] put instructions inside of pause menu --- js/initialization.js | 1 - js/render.js | 34 +++++++++++++++++++++++----------- js/view.js | 28 +++++++++++++++------------- style/style.css | 1 - 4 files changed, 38 insertions(+), 26 deletions(-) diff --git a/js/initialization.js b/js/initialization.js index ce7e3d2..a907d07 100644 --- a/js/initialization.js +++ b/js/initialization.js @@ -133,7 +133,6 @@ function initialize() { } }; - debugger; $('#startBtn').on('touchstart mousedown', function(){ if (importing == 1) { init(1); diff --git a/js/render.js b/js/render.js index d94cf94..6282339 100644 --- a/js/render.js +++ b/js/render.js @@ -30,7 +30,7 @@ function render() { MainHex.draw(); if (gameState ==1 || gameState ==-1 || gameState === 0) { - drawScoreboard(); + drawScoreboard(); } for (i = 0; i < MainHex.texts.length; i++) { @@ -41,11 +41,18 @@ function render() { } } + if (gameState == -1) { + ctx.globalAlpha = 0.9; + ctx.fillStyle = 'rgb(236,240,241)'; + ctx.fillRect(0, 0, trueCanvas.width, trueCanvas.height); + ctx.globalAlpha = 1; + } + settings.prevScale = settings.scale; settings.hexWidth = settings.baseHexWidth * settings.scale; settings.blockHeight = settings.baseBlockHeight * settings.scale; - if (MainHex.ct < 400 && (gameState != 0) && !MainHex.playThrough) { + if ((MainHex.ct < 400 && (gameState !== 0) && !MainHex.playThrough) || gameState == -1) { if (MainHex.ct > 350) { ctx.globalAlpha = (50 - (MainHex.ct - 350))/50; } @@ -54,21 +61,26 @@ function render() { ctx.globalAlpha = (MainHex.ct)/50; } - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 208 * settings.scale, 35, '#2c3e50', 'Controls', '35px Roboto'); - renderText((trueCanvas.width)/2 - 85 * settings.scale, (trueCanvas.height)/2 - 169 * settings.scale, 20, '#2c3e50', 'Rotation:', '20px Roboto'); - renderText((trueCanvas.width)/2 - 21 * settings.scale, (trueCanvas.height)/2 - 141 * settings.scale, 12, '#2c3e50', 'Left', '12px Roboto'); - renderText((trueCanvas.width)/2 + 25 * settings.scale, (trueCanvas.height)/2 - 141 * settings.scale, 12, '#2c3e50', 'Right', '12px Roboto'); - drawKey("right",(trueCanvas.width)/2 + 23 * settings.scale - 35/2 * settings.scale, (trueCanvas.height)/2 - 195 * settings.scale); - drawKey("left",(trueCanvas.width)/2 - 23 * settings.scale - 35/2 * settings.scale, (trueCanvas.height)/2 - 195 * settings.scale); - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 125 * settings.scale, 20, '#2c3e50', 'Rotate the Hexagon to make combos of 3+ touching blocks!', '20px Roboto'); - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 105 * settings.scale, 20, '#2c3e50', 'Make combos in a row to receive a score multiplier!', '20px Roboto'); - renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 85 * settings.scale, 20, '#2c3e50', 'Don\'t let the blocks stack outside of the gray Hexagon!', '20px Roboto'); + renderBeginningText(); ctx.globalAlpha = 1; } } +function renderBeginningText() { + renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 208 * settings.scale, 35, '#2c3e50', 'Controls', '35px Roboto'); + renderText((trueCanvas.width)/2 - 85 * settings.scale, (trueCanvas.height)/2 - 169 * settings.scale, 20, '#2c3e50', 'Rotation:', '20px Roboto'); + renderText((trueCanvas.width)/2 - 21 * settings.scale, (trueCanvas.height)/2 - 141 * settings.scale, 12, '#2c3e50', 'Left', '12px Roboto'); + renderText((trueCanvas.width)/2 + 25 * settings.scale, (trueCanvas.height)/2 - 141 * settings.scale, 12, '#2c3e50', 'Right', '12px Roboto'); + drawKey("right",(trueCanvas.width)/2 + 23 * settings.scale - 35/2 * settings.scale, (trueCanvas.height)/2 - 195 * settings.scale); + drawKey("left",(trueCanvas.width)/2 - 23 * settings.scale - 35/2 * settings.scale, (trueCanvas.height)/2 - 195 * settings.scale); + renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 125 * settings.scale, 20, '#2c3e50', 'Rotate the Hexagon to make combos of 3+ touching blocks!', '20px Roboto'); + renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 105 * settings.scale, 20, '#2c3e50', 'Make combos in a row to receive a score multiplier!', '20px Roboto'); + renderText((trueCanvas.width)/2 + 1.5 * settings.scale, (trueCanvas.height)/2 - 85 * settings.scale, 20, '#2c3e50', 'Don\'t let the blocks stack outside of the gray Hexagon!', '20px Roboto'); +} + function drawKey(key, x, y) { ctx.save(); + ctx.beginPath(); ctx.fillStyle = '#2c3e50'; ctx.strokeStyle = '#2c3e50'; ctx.lineWidth = 4 * settings.scale; diff --git a/js/view.js b/js/view.js index 9e33d1b..e7e2b4a 100644 --- a/js/view.js +++ b/js/view.js @@ -1,6 +1,6 @@ // 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; } function renderText(x, y, fontSize, color, text, font) { @@ -118,19 +118,25 @@ function showText(text){ messages['gameover'] += "
" + restartText + "
"; - if (allZ) - for (i = 0; i < highscores.length; i++) { - if (highscores[i] != 0) { - allZ = 0; + if (allZ) { + for (i = 0; i < highscores.length; i++) { + if (highscores[i] != 0) { + allZ = 0; + } } } } var pt = document.getElementById("overlay"); pt.className = 'unfaded'; - - if (text == 'paused' && settings.platform == 'mobile') { - text = 'pausedMobile'; + + if (text == 'paused') { + $(pt).css('margin-top','-5%'); + if (settings.platform == 'mobile') { + text = 'pausedMobile'; + } + } else { + $(pt).css('margin-top','-10%'); } pt.innerHTML = messages[text]; @@ -158,14 +164,10 @@ function pause(o) { var c = document.getElementById("canvas"); if (gameState == -1 ) { hideText(); - c.className = ''; - setTimeout(function(){ - gameState = prevGameState; - }, 300); + gameState = prevGameState; } else if(gameState != -2 && gameState !== 0 && gameState !== 2) { - c.className = "blur"; if (message == 'paused') { showText(message); } diff --git a/style/style.css b/style/style.css index 2b3c776..223b171 100644 --- a/style/style.css +++ b/style/style.css @@ -128,7 +128,6 @@ and (max-device-width : 480px) { } #overlay { - transition: all 0.3s ease; position:absolute; height:20%; width:100%;