added start and end screens
This commit is contained in:
parent
fb16e5c189
commit
b31789f17e
3 changed files with 36 additions and 12 deletions
12
index.html
12
index.html
|
@ -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>
|
||||
|
|
9
input.js
9
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;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
|
23
main.js
23
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);
|
||||
|
||||
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);
|
||||
}
|
Loading…
Reference in a new issue