料青山看我应如是
如果你改变：<body onmousedown='return false'>到：<body onkeydown='return false'>它应该有效！///////////////////// DOC variables /////////////////////let table = document.querySelector(".table-block");let buttons= document.querySelectorAll(".node");buttons.forEach(button => button.addEventListener("click", trueOrFalse));let goals = document.querySelectorAll(".goal");let scoreDsipaly = document.querySelector("#score");let dispalaySeconds = document.querySelector("#seconds");//////////////////////// global variables ////////////////////////// let roundTime = 20+1;let roundTime =20000;let rowLength = table.rows.length -1;let colLength= table.rows.item(0).cells.length-1;// added for clarity's sakelet rowGoal=rowLength;let colGoal=colLength;let score=0;///////////////// functions // ///////////////function init(){ resetVals(); rowsGoalsGenerater(); colsGoalsGenerater();}function resetVals() { //roundTime = 20+1; roundTime=20000; for (let button = 0; button < buttons.length; button++) { buttons[button].classList.remove("node-true"); buttons[button].innerHTML = 0; } for (let goal = 0; goal < goals.length; goal++) { goals[goal].classList.remove("goal-achived"); }}// turns the value of a node 1/0 or true/ falsefunction trueOrFalse(){ let row = this.parentElement.rowIndex; let col= this.cellIndex; let val= this.innerHTML; if(val==1){ this.classList.remove("node-true"); this.innerHTML=0; }else{ this.classList.add("node-true"); this.innerHTML=1; } checkRow(row); checkCol(col); if(checkGoals()){ score+=rowLength; scoreDsipaly.innerHTML=score; init(); }}// generates rows's goalsfunction rowsGoalsGenerater(){ for ( let col=0;col<rowLength;col++){ let randomNum = Math.floor(Math.random() * (Math.pow(2, rowLength) - 1))+1; table.rows.item(col).cells.item(rowGoal).innerHTML= randomNum; }}// generates columns's goals// for compatibility's sake, they will be made from rows goals function colsGoalsGenerater() { let goalsArray = [];// row's goals for ( let row =0; row<colLength; row++){ goalsArray.push(table.rows.item(row).cells.item(rowGoal).innerHTML); } goalsArray=goalsArray.map((item)=>{ item=Number(item).toString(2); if( item.length<rowLength){ let addZeros="0".repeat(rowLength-item.length); item=addZeros.concat(item) } return item.split("") }) for( let col=0; col<colLength; col++){ let newGoal= []// col goal for( let row=0; row<rowLength; row++){ newGoal.push(goalsArray[row][col]); } newGoal = parseInt(newGoal.join(""), 2).toString(10); if (newGoal==0){// to avoid zero values on col goals setTimeout(init, 10); } table.rows.item(rowGoal).cells.item(col).innerHTML =newGoal; }}// checks if nodes values equals the row's goalfunction checkRow(row){ let rowGoal= table.rows.item(row).cells.item(colGoal).innerHTML; let userInput=[]; for ( let column = 0; column< rowLength; column++){ userInput.push(table.rows.item(row).cells.item(column).innerHTML); } if(rowGoal== parseInt(userInput.join(""),2).toString(10)){ table.rows.item(row).cells.item(colGoal).classList.add("goal-achived"); }else{ table.rows.item(row).cells.item(colGoal).classList.remove("goal-achived"); }}// checks if nodes values equals the col's goalfunction checkCol(col){ let colGoal = table.rows.item(rowGoal).cells.item(col).innerHTML; let userInput=[]; for( let row=0; row< colLength; row++){ userInput.push(table.rows.item(row).cells.item(col).innerHTML) } if (colGoal == parseInt(userInput.join(""), 2).toString(10)) { table.rows.item(rowGoal).cells.item(col).classList.add("goal-achived"); } else { table.rows.item(rowGoal).cells.item(col).classList.remove("goal-achived"); }}function checkGoals(){ for ( let goal=0;goal< goals.length;goal++){ if (!goals[goal].classList.contains("goal-achived")) return false; } return true;}function checkStatue(){ if(roundTime<=0 && !isPlaying){ }}function timeReducer() { if (roundTime > 0) { roundTime--; } else { window.location.href = `../game-over-page/game-over.html?score=${score}`; } dispalaySeconds.innerHTML = roundTime;}function changeLevel(){ alert("fucks")}////////////// runing //////////////init();setInterval(timeReducer, 1000);*{ padding: 0; margin: 0; box-sizing: border-box; cursor: default; /* to prevent the cursor to be Text Select when it hovers on score and time counters */}body { background-color: #272727; color: #effffb; font-size: 24px; font-family: 'Bellota Text', cursive;}nav{ height: 24vh; padding: 1rem; display: flex; justify-content: space-between;}.img-logo{ width: 72px; display: block; margin: 0.8rem; cursor: pointer;}.info{ height: 17vh;}.info,.text-info{ display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;}#seconds,#score,.level-label,.output-info { font-family: 'Lato', sans-serif; display: inline; font-size:1.1rem; font-weight: 400;}.container { width: 100vw; height: 76vh; text-align: center; display: flex; align-items: center; justify-content: center;}.table-block{ transform: translate(0, -20px); border-spacing: 15px;}.node,.goal{ width: 40px; height: 40px; box-shadow: 0 2px 0 0.3px #000000; transition: 0.3s;}.goal{ border: solid 2px #50d890;}.goal-achived{ box-shadow:none; background-color: #50d890; transform: translate(0 , 2px);}.node{ border: solid 2px #4f98ca; cursor: pointer;}.node-true{ box-shadow:none; background-color: #4f98ca; transform: translate(0, 2px);}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- <link rel="stylesheet" href="styles/style.css"> <link rel="stylesheet" href="styles/queries.css"> --> <link href="https://fonts.googleapis.com/css?family=Bellota+Text&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <title>Binary Game</title></head><body onkeydown = 'return false' onselectstart = 'return false'> <nav> <div class="info"> <div class="selection-block"> <label class="level-label" for="levels">Level : </label> <select id="levels" onchange="changeLevel()"> <option value="20" >Easy</option> <option value="14">Meduim</option> <option value="10">Hard</option> </select> </div> <!-- <div> <select> <option >1</option> <option >1</option> <option >1</option> </select> </div> --> <div class="text-info"> <div class="output-block"> <h3 class="output-info">Time Left: </h3> <span id="seconds">20</span> </div> <div class="output-block"> <h3 class="output-info">Score: </h3> <span id="score">0</span> </div> </div> </div> </nav> <div class="container"> <table class="table-block" cellspacing="15"> <tr class="row"> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="goal"></td> </tr> <tr class="row"> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="goal"></td> </tr> <tr class="row"> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="goal"></td> </tr> <tr class="row"> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="goal"></td> </tr> <tr class="row"> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="node">0</td> <td class="goal"></td> </tr> <tr class="row"> <td class="goal"></td> <td class="goal"></td> <td class="goal"></td> <td class="goal"></td> <td class="goal"></td> </tr> </table> </div> <!--<script src="scripts/script.js"></script>--></body></html>