added start and end screens

This commit is contained in:
Michael Yang 2014-05-17 18:34:02 -04:00
parent fb16e5c189
commit b31789f17e
3 changed files with 36 additions and 12 deletions

View file

@ -2,12 +2,16 @@
<html>
<head>
<title>Wasted Time</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<body style="background-color:#2c3e50">
<center>
<div style='z-index:2;position:absolute;left:50%;margin-left:-70px;top:0px;'><h1 style='color:#ecf0f1;font-size:50px;'>Hextris</h1></div>
<canvas id="canvas" width = '700' height = '700' style='background-color:#2c3e50; position:absolute; margin-top:70px;left:50%;margin-left:-350px;'></canvas>
</center>
<div style='margin: 0 auto; width: 100%;'><h1 style='color:#ecf0f1;font-size:50px;font-family:Roboto; text-align: center; margin-top: 50px;'>Hextris</h1></div>
<canvas id="canvas" width = '700' height = '700' style='background-color:#2c3e50; position:absolute;left:50%;margin-left:-350px;'></canvas>
<script src="math.js"></script>
<script src="entities.js"></script>
<script src="math.js"></script>

View file

@ -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;
}
},
});

23
main.js
View file

@ -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);
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);
// 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);
}