diff options
| author | Kyle Gunger <corechg@gmail.com> | 2018-09-22 13:07:54 -0400 |
|---|---|---|
| committer | Kyle Gunger <corechg@gmail.com> | 2018-09-22 13:07:54 -0400 |
| commit | 564d33ac255212d83e09850e5e479a2844862202 (patch) | |
| tree | ece4b36647742b1a7985be4abb57f68150f0b166 | |
| parent | 6f9e0a05b80afb0d1cf1b5b0db21bf8d1caa1cc8 (diff) | |
+ difficulty selector
+ cursor change on the game status indicator
| -rw-r--r-- | index.html | 18 | ||||
| -rw-r--r-- | mines.css | 23 | ||||
| -rw-r--r-- | mines.js | 5 |
3 files changed, 33 insertions, 13 deletions
@@ -10,11 +10,22 @@ </head>
<body>
<div class="selector">
- <label>Width: </label> <input id="x" min="4" value="6" type="number"></input>
+ <label>Width: </label> <input id="x" min="4" max="50" value="6" type="number"/>
<br>
- <label>Height: </label> <input id="y" min="4" value="6" type="number"></input>
+ <label>Height: </label> <input id="y" min="4" value="6" type="number"/>
<br>
- <label>Mines: </label> <input id="m" min="2" value="5" type="number"></input>
+ <label>Mines: </label> <input id="m" min="2" value="5" type="number"/>
+ <br>
+ <label>- OR -</label>
+ <br>
+ <label>Difficulty: </label>
+ <select id="d">
+ <option value="0.125">Easy</option>
+ <option value="0.15">Medium</option>
+ <option value="0.2">Hard</option>
+ <option value="0.25">Impossible</option>
+ <option value="0">Custom</option>
+ </select>
</div>
<br>
<div class="game">
@@ -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();
</script>
</body>
@@ -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{
@@ -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 |