Minesweeper wie das Gitter anklickbar machen

Ich versuche ein Minesweeper Spiel zu bauen. Ich denke, ich habe alle Back-End-Codes, wie erstellt die Grid, und erhalten Sie die Minen, etc.Minesweeper wie das Gitter anklickbar machen

Aber ich habe jetzt ein Problem, dass ich nicht weiß, wie man das Raster klickbar macht.

Kann mir jemand dabei helfen? Dies ist mein erstes JavaScript-Projekt und ich bin so verwirrt. Vielen Dank.

$(document).ready(function() { 
    $("#create").click(createMinefield); 
    $("#clear").click(reset); 
}); 

var reset = function(){ 
    var minefield=$('#minefield'); 
    minefield.empty(); 
} 

var createMinefield = function(){ 
    var rows=$('#rows').val(); 
    var columns=$('#columns').val(); 
    var mines=$('#mines').val(); 
    var minefield=$('#minefield'); 
    minefield.empty(); 

    if(rows > 30) { 
     rows=30; 
     alert("The number of rows should less than or equal to 30") 
    } 
    if(rows < 8) { 
     rows=8; 
     alert("The number of rows should greater than or equal to 8") 
    } 
    if(columns>40){ 
     columns=40; 
     alert("The number of columns should less than or equal to 40") 
    } 
    if(columns<8){ 
     columns=8; 
     alert("The number of columns should greater than or equal to 8") 
    } 

    if(mines<1){ 
     mines=1; 
     alert("The number of mines should greater than or equal to 1") 
    } 

    if(mines>(rows*columns)-1){ 
     mines=rows*columns-1; 
     alert("The number of mines should less than or equal to the size of grid minus one") 
    } 


    for(var y=0; y<rows;y++){ 
     var currentRow="<tr>" 
     for(var x=0;x<columns;x++){ 
      currentRow+="<td><button></button></td>" 
     } 
     currentRow+="</tr>" 
     minefield.append(currentRow); 
    } 



    var arr=new Array(); 
    var min=1; 
    var max= (rows * columns)-1; 
    var minesNum= mines; 
    console.log("numMine:",minesNum); 

    // set 2d array 
    for(var i=0; i<rows;i++){ 
     arr[i]=new Array() 
     for(var j=0;j<columns;j++){ 
      arr[i][j]=0; 
     } 
    } 


    for (var i=0; i<minesNum; i++){ 
     var x = Math.floor(Math.random()*rows); 
     var y = Math.floor(Math.random()*columns); 
     if(arr[x][y]==-1){ 
      i--; 
      continue; 
     } 
     console.log("i",i); 
     arr[x][y]=-1; 
    }

Hier überprüfte ich die Nachbarn von mir

 for(var i=0;i<rows;i++){ 
     for(var j=0;j<columns;j++){ 
      if(arr[i][j]==-1){  
       continue; 
      } 
      if((i-1)>=0 && arr[i-1][j]==-1){ //left 
       arr[i][j]=arr[i][j]+1; 
      } 

      if((j-1) >=0 && arr[i][j-1]==-1){ //down 
       arr[i][j]=arr[i][j]+1; 
      } 
      if(i+1<rows && arr[i+1][j]==-1){ 
       arr[i][j]=arr[i][j]+1; 
      } 
      if(j+1<columns && arr[i][j+1]==-1){ 
       arr[i][j]=arr[i][j]+1; 
      } 
      if(i+1<rows && j+1<rows && arr[i+1][j+1]==-1){ 
       arr[i][j]=arr[i][j]+1; 
      } 
      if(i-1>=0 && j-1 >=0 && arr[i-1][j-1]==-1){ 
       arr[i][j]=arr[i][j]+1; 
      } 
      if(i-1>=0 && j+1<rows && arr[i-1][j+1]==-1){ 
       arr[i][j]=arr[i][j]+1; 
      } 
      if(i+1<rows && j-1>=0 && arr[i+1][j-1]==-1){ 
       arr[i][j]=arr[i][j]+1; 
      } 

     } 
    } 
    console.log("arr",arr); 

}

Hier ist mein HTML-Code

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="UTF-8"> 
     <title>MineSweeper</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
     <script src="MinePlay.js"></script> 
     <link rel="stylesheet" type="text/css" href="minesweepercss.css"> 
    </head> 

    <body> 
     Rows: <input id="rows" type="number" value="8" min="8" max="30" name="fname"><br> 
     Columns: <input id="columns" type="number" value="8" min="8" max="40" name="lname"><br> 
     Mines: <input id="mines" type="number" value="1" name="mines" ><br> 
     <button id="create"> Create!</button> 
     <button id="clear"> Restart!</button> 

     <table> 
      <tbody id="minefield"></tbody> 
     </table>  
    </body> 

</html>

Quelle

2017-11-13 user6428015

for(var y=0; y<rows;y++){ 
    var currentRow="<tr>" 
    for(var x=0;x<columns;x++){ 
     currentRow+="<td><button></button></td>" 
    } 
    currentRow+="</tr>" 
    minefield.append(currentRow); 
}

Hier zwischen <button> Tags gibt so etwas setzen -

<button type="button" onclick="alert('Hello world!')">Click Me!</button>

Quelle

2017-11-13 05:35:02

Es funktioniert nicht. Ich habe auch meinen HTML-Code hinzugefügt. Könnten Sie bitte einen Blick darauf werfen? Vielen Dank. – user6428015

Ich bekomme diesen Fehler, können Sie das überprüfen? 'MinePlay.js: 6 Uncaught SyntaxError: fehlt) nach der Argumentliste' in Zeile 6 –

Ich habe diesen Fehler: "Minesweeper.html: 2 Uncaught SyntaxError: Unexpected token}". Ich habe sowohl Ihren Fehler als auch meinen Fehler überprüft, aber ich habe nichts falsches gesehen, beide sind korrekt. – user6428015

Minesweeper wie das Gitter anklickbar machen

Antwort

Verwandte Themen