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:
parent
1347934c8c
commit
6a4adaf492
38
index.html
38
index.html
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue