Allow for a taller game board on taller displays

also improve drawGameBoard functionality
and move the stats bar to the top
This commit is contained in:
synth-ruiner 2015-03-10 19:56:23 +00:00
parent 1347934c8c
commit 6a4adaf492
1 changed files with 19 additions and 19 deletions

View File

@ -71,17 +71,10 @@
#gameOver, #setup {
position: absolute;
width: 100vmin;
height: 90vmin;
height: 100vh;
background-color: rgba(0,0,0,0.3);
}
#setup {
height: 100vmin;
}
#setup h1 {
}
#setup h2 {
margin-top: 0;
}
@ -253,15 +246,16 @@
function drawGameBoard() {
$('#game').html("");
for (var i = 0; i < gameBoardHeight; i++) {
$('#game').append("<ul></ul>");
//determine aspect ratio so as to fit the screen
gameBoardHeight = Math.floor((1 / getAspectRatio()) * 10) - 1;
if (gameBoardHeight <= 9) {
gameBoardHeight = 9;
}
$('#game ul').each(function() {
for (var i = 0; i < gameBoardWidth; i++) {
$(this).append(newTile());
}
});
for (var i = 0; i < gameBoardHeight; i++) {
$('#game').append(newRow());
}
}
function newTile() {
@ -405,6 +399,14 @@
);
}
function getAspectRatio() {
return $(window).width() / $(window).height();
}
function isPortrait() {
return getAspectRatio() > 1;
}
$.fn.updateMineCount = function() {
$(this).text(
$(this).countMinesText
@ -572,9 +574,7 @@
} else {
$(this).addClass("revealed");
$(this).text(
$(this).countMinesText()
);
$(this).updateMineCount();
$(this).addClass("mines" + $(this).countMinesAdjacent());
@ -673,12 +673,12 @@
</script>
</head>
<body>
<div id="game"></div>
<div id="stats">
<div id="score">Score: 0</div>
<div id="mines">Mines left: 0</div>
<button class="reset">reset</button>
</div>
<div id="game"></div>
<div id="gameOver">
<h1>game over</h1>
<p>a game by max bradbury</p>