diff --git a/index.html b/index.html index d169df4..84a8819 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,16 @@ Wasted Time + -
-

Hextris

- -
+

Hextris

+ diff --git a/input.js b/input.js index d18f0ea..21a4994 100644 --- a/input.js +++ b/input.js @@ -7,3 +7,12 @@ keypress.register_combo({ keys: "right", on_keyup: function(){MainClock.rotate(-1)}, }); + +keypress.register_combo({ + keys: "enter", + on_keyup: function(){ + if (gameState != 1) { + gameState = 1; + } + }, +}); diff --git a/main.js b/main.js index b4a0a33..bb0d1b3 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,7 @@ var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); -var gameState = 1; // 0 - start, 1 - playing, 2 - end +var gameState = 0; // 0 - start, 1 - playing, 2 - end var framerate = 60; window.requestAnimFrame = (function(){ @@ -62,13 +62,17 @@ function render() { } (function animloop(){ - if (gameState == 1) { - requestAnimFrame(animloop); + requestAnimFrame(animloop); + + if (gameState == 0) { + showModal('Start!', 'Press enter to start!'); + } + else if (gameState == 1) { render(); checkGameOver(); } else if (gameState == 2) { - showModal('Game Over'); + showModal('Game over!', ''); } })(); @@ -99,10 +103,17 @@ function checkGameOver() { // fix font, fix size of hex } } -function showModal(text) { +function showModal(text, secondaryText) { + var buttonSize = 150; + var fontSizeLarge = 50; + var fontSizeSmall = 25; drawPolygon(canvas.width / 2, canvas.height / 2, 6, canvas.width / 2, 30, hexagonBackgroundColor); ctx.fillStyle = swegBlue; - ctx.font = '40pt "Helvetica Neue"'; + // drawPolygon(canvas.width / 2, canvas.height / 2, 6, buttonSize, 30, swegBlue); + ctx.font = fontSizeLarge+'px "Roboto"'; ctx.textAlign = 'center'; - ctx.fillText(text, canvas.width / 2, canvas.height / 2); -} \ No newline at end of file + // ctx.fillStyle = hexagonBackgroundColor; + ctx.fillText(text, canvas.width / 2, canvas.height / 2 + (fontSizeLarge / 4)); + ctx.font = fontSizeSmall+'px "Roboto"'; + ctx.fillText(secondaryText, canvas.width/2, canvas.height/2 + fontSizeLarge / 4 + fontSizeSmall / 4 + 30); +}