From 564d33ac255212d83e09850e5e479a2844862202 Mon Sep 17 00:00:00 2001 From: Kyle Gunger Date: Sat, 22 Sep 2018 13:07:54 -0400 Subject: + difficulty selector + cursor change on the game status indicator --- index.html | 18 +++++++++++++++--- mines.css | 23 ++++++++++++++--------- mines.js | 5 ++++- 3 files changed, 33 insertions(+), 13 deletions(-) diff --git a/index.html b/index.html index 662b4ee..1ceeedb 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,22 @@
- +
- +
- + +
+ +
+ +

@@ -28,6 +39,7 @@ var xIn = document.getElementById("x"); var yIn = document.getElementById("y"); var mIn = document.getElementById("m"); + var dIn = document.getElementById("d"); var game = new Board(); diff --git a/mines.css b/mines.css index 552a4e4..eb3ff36 100644 --- a/mines.css +++ b/mines.css @@ -15,29 +15,33 @@ div.selector{ } div.game{ - min-width: 25%; - margin-top: 50px; + min-width: 50%; + margin: 50px; } -input{ +input, select{ padding: 5px; margin: 5px; background-color: #eee; border: none; border-radius: 5px; transition-duration: 0.2s; + box-sizing: border-box; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; } -input:hover{ +input:hover, select:hover{ background-color: #ccc; } -input:focus{ +input:focus, select:focus{ background-color: #cef; border: none; } -input:active{ +input:active, select:active{ background-color: #cef; border: none; } @@ -67,7 +71,7 @@ h1{ background-color: #eee; - border-radius: 25%; + border-radius: 50px; } h1#mines{ @@ -88,8 +92,8 @@ table{ } td{ - width: 35px; - height: 35px; + width: 45px; + height: 45px; margin: 5px; padding: 2px; @@ -124,6 +128,7 @@ button#circle{ border: none; border-radius: 50%; box-sizing: border-box; + cursor: pointer; } button#circle:active{ diff --git a/mines.js b/mines.js index da0fa4d..7ea5b61 100644 --- a/mines.js +++ b/mines.js @@ -83,6 +83,7 @@ Board.prototype = { } this.mines[y].splice(this.mines[y].indexOf(x), 1); } + this.clock = setInterval(this.sec.bind(this), 1000); }, //Event managers @@ -204,8 +205,11 @@ Board.prototype = { let x = xIn.value; let y = yIn.value; + let mines = mIn.value; + if(parseFloat(dIn.value) !== 0) mines = Math.round(x*y*parseFloat(dIn.value)); + if(mines >= x*y-1) { this.circle.className = "lose"; return; @@ -271,6 +275,5 @@ Board.prototype = { this.circle.className = "ingame"; this.running = true; - this.clock = setInterval(this.sec.bind(this), 1000); } }; \ No newline at end of file -- cgit v1.2.3