minesweeper some progress
This commit is contained in:
parent
96cca8c57a
commit
5f623b19cb
52
MVC/gjett_nummer.html
Normal file
52
MVC/gjett_nummer.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body onload="init()">
|
||||
<div id="app">
|
||||
|
||||
</div>
|
||||
<script>
|
||||
// modell
|
||||
let guessNumber;
|
||||
let secretNumber;
|
||||
let guessCount = 0;
|
||||
|
||||
//view
|
||||
function updateView() {
|
||||
let text;
|
||||
document.getElementById('app').innerHTML = /*HTML*/ `
|
||||
<div>${text}</div>
|
||||
<div>Du har gjettet ${guessCount} ganger.</div>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
/>
|
||||
<button onclick="guess()">Gjett</button>
|
||||
<button onclick="reset()">Start på nytt</button>
|
||||
`;
|
||||
}
|
||||
function getMessage() {
|
||||
if (!guessNumber) return '';
|
||||
if(guessNumber==secretNumber) return 'Riktig';
|
||||
if(guessNumber<secretNumber) return 'For lavt';
|
||||
return 'For høyt';
|
||||
|
||||
}
|
||||
// controller
|
||||
|
||||
function init(){
|
||||
secretNumber = Math.floor(Math.random() * 100) + 1;
|
||||
updateView();
|
||||
}
|
||||
function guess(){
|
||||
guessCount++
|
||||
updateView()
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -42,25 +42,47 @@
|
|||
<table id="matrix"></table>
|
||||
<script>
|
||||
var matrixModel;
|
||||
var matrxiView = document.getElementById('matrix');
|
||||
var matrixView = document.getElementById('matrix');
|
||||
var totalNumberOfBombs = 7;
|
||||
var size = 16;
|
||||
var matrixModel;
|
||||
|
||||
|
||||
init(size);
|
||||
placeBombs();
|
||||
calculateNearByBombs();
|
||||
showMatrix();
|
||||
|
||||
matrix.rows[0].cells[0].isBomb = true;
|
||||
matrix.rows[0].cells[0].isOpen = true;
|
||||
matrix.rows[0].cells[1].bombsNearby = 9;
|
||||
matrix.rows[0].cells[1].isOpen = true;
|
||||
matrix.rows[0].cells[2].isOpen = true;
|
||||
|
||||
function showMatrix() {
|
||||
matrixView.innerHTML = '';
|
||||
|
||||
for (var rowCounter = 0; rowCounter < matrixModel.rows.lenght; rowCounter++) {
|
||||
var viewRow = matrixView.insertRow();
|
||||
var modelRow = matrixModel.rows[rowCounter];
|
||||
for (var cellCounter = 0; cellCounter < modelRow.cells.lenght; cellCounter++) {
|
||||
var viewCell = viewRow.insertCell();
|
||||
var modelCell = modelRow.cells[cellCounter];
|
||||
if (true) {//(modelCell.isOpen) {
|
||||
viewCell.style.backgroundcolor = 'lightcyan';
|
||||
if (modelCell.isBomb) {
|
||||
viewCell.innerHTML = '💣';
|
||||
} else if (modelCell.bombsNearby > 0) {
|
||||
viewCell.innerHTML = modelCell.bombsNearby;
|
||||
viewCell.classList.add('x' + modelCell.bombsNearby)
|
||||
}
|
||||
else {
|
||||
viewCell.addEventListener("click", handleClick, false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function init(size) {
|
||||
var matrixModel = {};
|
||||
matrixModel = {};
|
||||
matrixModel.rows = [];
|
||||
|
||||
|
||||
for (var rowCounter = 0; rowCounter < size; rowCounter++) {
|
||||
var newRow = {};
|
||||
newRow.cells = [];
|
||||
|
|
@ -73,37 +95,29 @@
|
|||
}
|
||||
matrixModel.rows.push(newRow);
|
||||
}
|
||||
console.log('init ' + `${matrixModel.rows}`);
|
||||
}
|
||||
function showMatrix() {
|
||||
matrxiView.innerHTML = '';
|
||||
for (var rowCounter = 0; rowCounter < size; rowCounter++) {
|
||||
var viewRow = matrxiView.insertRow();
|
||||
var modelRow = matrixModel.rows[rowCounter];
|
||||
for (var cellCounter = 0; cellCounter < modelRow.cells.lenght; cellCounter++) {
|
||||
var viewCell = viewRow.insertCell();
|
||||
var modelCell = modelRow.cells[cellCounter];
|
||||
if (modelCell.isOpen) {
|
||||
viewCell.style.backgroundcolor = 'lightcyan';
|
||||
if (modelCell.isBomb) {
|
||||
viewCell.innerHTML = '💣';
|
||||
} else if (modelCell.bombsNearby > 0) {
|
||||
viewCell.innerHTML = modelCell.bombsNearby;
|
||||
viewCell.classList.add('x' + modelCell.bombsNearby)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
function placeBombs() {
|
||||
for (var bombCount = 0; bombCount < totalNumberOfBombs; bombCount--) {
|
||||
var rowIndex = Math.floor(Math.random() * size);
|
||||
var columnIndex = Math.floor(Math.random() * size);
|
||||
var modelCell = matrixModel.rows[rowIndex].cells[columnIndex];
|
||||
modelCell.isBomb = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function calculateNearByBombs() {
|
||||
|
||||
}
|
||||
function handleClick(aMouseEvent) {
|
||||
|
||||
// Forandre modellen
|
||||
showMatrix();
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
40
MVC/select.html
Normal file
40
MVC/select.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
<style>
|
||||
app {
|
||||
display: grid;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app">
|
||||
<label for=""></label>
|
||||
<div>Forgrunnsfarge: </div>
|
||||
<select onchange="foreColor=this.value">
|
||||
<option></option>
|
||||
<option value="black">Sort</option>
|
||||
<option value="red">Rød</option>
|
||||
</select>
|
||||
<br>
|
||||
Bakgrunnsfarge: <select name="" id=""></select><br>
|
||||
<button onclick="">Oppdater</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let foreColor = null;
|
||||
let backColor = null;
|
||||
|
||||
updateView()
|
||||
function updateView(){
|
||||
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
42
MVC/tallpuslespill.html
Normal file
42
MVC/tallpuslespill.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script>
|
||||
// modell
|
||||
let board = "73541 286";
|
||||
|
||||
// view
|
||||
updateView();
|
||||
function updateView(){
|
||||
createSquareHtml(1)
|
||||
+ createSquareHtml(2)
|
||||
}
|
||||
|
||||
function createSquareHtml(index1, index2){
|
||||
return /*HTML*/ `
|
||||
<div onclick="swap(${index})">${board.charAt(index)}</div>
|
||||
`;
|
||||
}
|
||||
// controller
|
||||
function swap(){
|
||||
let blankIndex = board.indexOf(' ');
|
||||
let selectedNumber = board.charAt(index);
|
||||
board = board.replace(' ', selectedNumber);
|
||||
|
||||
updateView();
|
||||
};
|
||||
function areNeighbours(){
|
||||
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in a new issue