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>
|
<table id="matrix"></table>
|
||||||
<script>
|
<script>
|
||||||
var matrixModel;
|
var matrixModel;
|
||||||
var matrxiView = document.getElementById('matrix');
|
var matrixView = document.getElementById('matrix');
|
||||||
var totalNumberOfBombs = 7;
|
var totalNumberOfBombs = 7;
|
||||||
var size = 16;
|
var size = 16;
|
||||||
var matrixModel;
|
|
||||||
|
|
||||||
init(size);
|
init(size);
|
||||||
placeBombs();
|
placeBombs();
|
||||||
calculateNearByBombs();
|
calculateNearByBombs();
|
||||||
showMatrix();
|
showMatrix();
|
||||||
|
|
||||||
matrix.rows[0].cells[0].isBomb = true;
|
|
||||||
matrix.rows[0].cells[0].isOpen = true;
|
function showMatrix() {
|
||||||
matrix.rows[0].cells[1].bombsNearby = 9;
|
matrixView.innerHTML = '';
|
||||||
matrix.rows[0].cells[1].isOpen = true;
|
|
||||||
matrix.rows[0].cells[2].isOpen = true;
|
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) {
|
function init(size) {
|
||||||
var matrixModel = {};
|
matrixModel = {};
|
||||||
matrixModel.rows = [];
|
matrixModel.rows = [];
|
||||||
|
|
||||||
|
|
||||||
for (var rowCounter = 0; rowCounter < size; rowCounter++) {
|
for (var rowCounter = 0; rowCounter < size; rowCounter++) {
|
||||||
var newRow = {};
|
var newRow = {};
|
||||||
newRow.cells = [];
|
newRow.cells = [];
|
||||||
|
|
@ -73,37 +95,29 @@
|
||||||
}
|
}
|
||||||
matrixModel.rows.push(newRow);
|
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() {
|
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 calculateNearByBombs() {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
function handleClick(aMouseEvent) {
|
||||||
|
|
||||||
|
// Forandre modellen
|
||||||
|
showMatrix();
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</body>
|
</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