Untitled

mail@pastecode.io avatar
unknown
plain_text
3 years ago
11 kB
2
Indexable
Never
<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();