Untitled
unknown
plain_text
4 years ago
11 kB
5
Indexable
<html>
<head>
<title>L e a r n</title>
<script src="jss.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body >
<table>
<tr>
<td onclick="checkBoom(0, 0, event)">
<div class="boom"></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(0, 1, event)">
<div class="boom" ></div>
<div class="number" ></div>
</td>
<td onclick="checkBoom(0, 2, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(0, 3, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(0, 4, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(0,5, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
</tr>
<tr>
<td onclick="checkBoom(1,0, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(1,1, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(1,2, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(1,3, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(1,4, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(1,5, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
</tr>
<tr>
<td onclick="checkBoom(2,0, event)" >
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(2,1, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(2,2, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(2,3, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(2,4, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(2,5, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
</tr>
<tr>
<td onclick="checkBoom(3,0, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(3,1, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(3,2, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(3,3, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(3,4, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(3,5, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
</tr>
<tr>
<td onclick="checkBoom(4,0, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(4,1, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(4,2, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(4,3, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(4,4, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(4,5, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
</tr>
<tr>
<td onclick="checkBoom(5,0, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(5,1, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(5,2, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(5,3, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(5,4, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
<td onclick="checkBoom(5,5, event)">
<div class="boom" ></div>
<div class="number"></div>
</td>
</tr>
</table>
</body>
</html>
-------------JS---------------------
var matrix = [
[0,1,0,0,0,0],
[0,0,0,0,0,1],
[0,1,0,0,0,0],
[0,1,0,0,0,0],
[0,0,0,0,1,0],
[1,0,0,0,0,0]
]
var boomHint = [];
var countBoom = function() {
for(var i = 0; i < 6; i++) {
for(var j = 0; j < 6; j++) {
if(matrix[i][j]) {
if(!boomHint[i]) {
boomHint[i] = [];
}
boomHint[i].push(null);
}
else {
var total = 0;
for(var a = -1; a <= 1; a++) {
for(var b = -1; b <= 1; b++) {
var test = matrix[i+a]?.[j+b];
if(test) {
total++;
}
}
}
if(!boomHint[i]) {
boomHint[i] = [];
}
boomHint[i].push(total);
}
}
}
}
function checkBoom(a, b, event) {
if(matrix[a][b]) {
let rows = document.querySelectorAll('tr');
for(let i = 0; i < rows.length; i++) {
let currentRow = rows[i];
let cells = currentRow.querySelectorAll('td');
for(let j = 0; j < cells.length; j++) {
let isBoom = matrix[i][j] == 1;
let hintNumber = boomHint[i][j];
if(isBoom) {
cells[j].querySelector('.boom').style.display = 'block';
}
if(hintNumber != null && hintNumber > 0) {
}
}
}
var r = confirm("Game over! Play again?");
if (r == true) {
init();
} else {
return;
}
} else {
//console.log('show thong tin hint');// nay de choi game tiep moiws biet nos show the nao
if(boomHint[a][b] > 0) {
//var countHint = boomHint[a][b];
//console.log(countHint);
event.target;
event.target.querySelector('.number').innerText = boomHint[a][b];
event.target.querySelector('.number').style.display = 'block';
}
if(boomHint[a][b] == 0) {
//event.target;
event.target.style.background = 'green';
for(let i= a; i < 6; i++) {
for(let j = b; b < 6; b++) {
if(boomHint[i][j] == 0) {
document.querySelectorAll('table tr:nth-child('+(i+1)+') td')[j].style.background = 'green';
} else {
break;
}
}
for(let j = b; b >= 0; b--) {
if(boomHint[i][j] == 0) {
document.querySelectorAll('table tr:nth-child('+(i+1)+') td')[j].style.background = 'green';
} else {
break;
}
}
}
for(let i= a; i >= 0; i--) {
for(let j = b; b < 6; b++) {
if(boomHint[i][j] == 0) {
document.querySelectorAll('table tr:nth-child('+(i+1)+') td')[j].style.background = 'green';
} else {
break;
}
}
for(let j = b; b >= 0; b--) {
if(boomHint[i][j] == 0) {
document.querySelectorAll('table tr:nth-child('+(i+1)+') td')[j].style.background = 'green';
} else {
break;
}
}
}
}
}
}
function init() {
// TODO: an het may cai boom voi number lai
// TODO: tao random booom
countBoom();
}
init();Editor is loading...