max
/
endless-mines
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
index.html
View File

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