76 lines
2.1 KiB
HTML
76 lines
2.1 KiB
HTML
|
<!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;
|
||
|
|
grid-template-columns: repeat(3, 100px);
|
||
|
|
grid-template-rows: repeat(3, 100px);
|
||
|
|
}
|
||
|
|
|
||
|
|
#app>div {
|
||
|
|
border: 2px solid gray;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
align-items: center;
|
||
|
|
font-size: 300%;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<div id="app"></div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// model
|
||
|
|
let board = '7354 1286';
|
||
|
|
|
||
|
|
// view
|
||
|
|
updateView();
|
||
|
|
function updateView() {
|
||
|
|
document.getElementById('app').innerHTML =
|
||
|
|
createSquareHtml(0)
|
||
|
|
+ createSquareHtml(1)
|
||
|
|
+ createSquareHtml(2)
|
||
|
|
+ createSquareHtml(3)
|
||
|
|
+ createSquareHtml(4)
|
||
|
|
+ createSquareHtml(5)
|
||
|
|
+ createSquareHtml(6)
|
||
|
|
+ createSquareHtml(7)
|
||
|
|
+ createSquareHtml(8)
|
||
|
|
}
|
||
|
|
|
||
|
|
function createSquareHtml(index) {
|
||
|
|
return /*HTML*/`
|
||
|
|
<div onclick="swap(${index})">${board.charAt(index)}</div>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
// controller
|
||
|
|
function swap(index) {
|
||
|
|
let blankIndex = board.indexOf(' ');
|
||
|
|
if (!areNeighbours(index, blankIndex)) return;
|
||
|
|
let selectedNumber = board.charAt(index);
|
||
|
|
board = board.replace(' ', 'x');
|
||
|
|
board = board.replace(selectedNumber, ' ');
|
||
|
|
board = board.replace('x', selectedNumber);
|
||
|
|
updateView();
|
||
|
|
}
|
||
|
|
|
||
|
|
function areNeighbours(index1, index2) {
|
||
|
|
let rowIndex1 = Math.floor(index1 / 3);
|
||
|
|
let colIndex1 = index1 % 3;
|
||
|
|
let rowIndex2 = Math.floor(index2 / 3);
|
||
|
|
let colIndex2 = index2 % 3;
|
||
|
|
return (colIndex1 == colIndex2 && Math.abs(rowIndex2 - rowIndex1) == 1)
|
||
|
|
|| (rowIndex1 == rowIndex2 && Math.abs(colIndex1 - colIndex2) == 1);
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
|
||
|
|
</html>
|