在自動生成的網格上選擇一行

Question

我和幾個朋友一起制作的游戲需要幫助，我們正在制作一款帶有角色和“力量”的戰艦游戲，他們中的大多數人都選擇了幾個插槽或行並同時擊中它們，因為我自動生成了網格並使用 xy 坐標定位要點擊的位置 我不知道如何選擇整行，我需要一些幫助。

這是代碼：

記者：

/* diseña navios */
var ship =  [[[1,5], [1,2,5], [1,2,3,5], [1,2,3,4,5]], [[6,10], [6,7,10], [6,7,8,10], [6,7,8,9,10]]];

/* array para posicion de nave */
var dead = [[[201,203], [201,202,203], [201,202,202,203], [201,202,202,202,203]], [[204,206], [204,205,206], [204,205,205,206], [204,205,205,205,206]]];

/* descripcion de navios */
var shiptypes = [["Lancha",2,4],["Submarino",3,4],[ "Buque",4,2],[ "Porta-aviones",5,1]];

var gridx = 16, gridy = 16;
var player = [], computer = [], playersships = [], computersships = [];
var playerlives = 0, computerlives = 0, playflag=true, statusmsg="";

/* Funcion para cargar imagenes */
var preloaded = [];

function imagePreload() {
  var i,ids = [1,2,3,4,5,6,7,8,9,10,100,101,102,103,201,202,203,204,205,206];
  window.status = "Precarga de imagenes.";
  for (i=0;i<ids.length;++i) {
    var img = new Image, name = "batt"+ids[i]+".gif";
    img.src = name;
    preloaded[i] = img;
  }
  window.status = "";
}

/* Funcion para colocar naves */
function setupPlayer(ispc) {
  var y,x;
  grid = [];
  for (y=0;y<gridx;++y) {
    grid[y] = [];
    for (x=0;x<gridx;++x)
    grid[y][x] = [100,-1,0];
  }
  var shipno = 0;
  var s;
  for (s=shiptypes.length-1;s>=0;--s) {
    var i;
    for (i=0;i<shiptypes[s][2];++i) {
      var d = Math.floor(Math.random()*2);
      var len = shiptypes[s][1], lx=gridx, ly=gridy, dx=0, dy=0;
      if ( d==0) {
        lx = gridx-len;
        dx=1;
      } else {
        ly = gridy-len;
        dy=1;
      }
      var x,y,ok;
      do {
        y = Math.floor(Math.random()*ly);
        x = Math.floor(Math.random()*lx);
        var j,cx=x,cy=y;
        ok = true;
        for (j=0;j<len;++j) {
          if (grid[cy][cx][0] < 100) {
          ok=false;
          break;
        }
        cx+=dx;
        cy+=dy;
      }
    } while(!ok);
      var j,cx=x,cy=y;
      for (j=0;j<len;++j) {
        grid[cy][cx][0] = ship[d][s][j];
        grid[cy][cx][1] = shipno;
        grid[cy][cx][2] = dead[d][s][j];
        cx+=dx;
        cy+=dy;
      }
      if (ispc) {
        computersships[shipno] = [s,shiptypes[s][1]];
        computerlives++;
      } else {
        playersships[shipno] = [s,shiptypes[s][1]];
        playerlives++;
      }
      shipno++;
    }
  }
return grid;
}

/* Funcion para poner imagenes en cuadricula */
function setImage(y,x,id,ispc) {
  if ( ispc ) {
    computer[y][x][0] = id;
    document.images["pc"+y+"_"+x].src = "batt"+id+".gif";
  } else {
    player[y][x][0] = id;
    document.images["ply"+y+"_"+x].src = "batt"+id+".gif";
  }
}

/* Funcion que diseña cuadricula y x */
function showGrid(ispc) {
  var y,x;
  for (y=0;y<gridy;++y) {
    for (x=0;x<gridx;++x) {
      if ( ispc )
      document.write ('<a href="javascript:gridClick('+y+','+x+');"><img name="pc'+y+'_'+x+'" src="batt100.gif" width=20 height=20></a>');
      else
      document.write ('<a href="javascript:void(0);"><img name="ply'+y+'_'+x+'" src="batt'+player[y][x][0]+'.gif" width=20 height=20></a>');
    }
    document.write('<br>');
  }
}

/* funcion para dar clicks en cuadricula */
function gridClick(y,x) {
  if ( playflag ) {
  if (computer[y][x][0] < 100 ) {
    setImage(y,x,103,true);
    var shipno = computer[y][x][1];
    if ( --computersships[shipno][1] == 0 ) {
      sinkShip(computer,shipno,true);
      updateStatus();
      if ( --computerlives == 0 ) {
        alert("Has ganado!, apreta F5\n para volver al menú");
        playflag = false;
      }
    }
    if ( playflag ) computerMove();
    } else if (computer[y][x][0] == 100) {
      setImage(y,x,102,true);
      computerMove();
    }
  }
}
/* IA DE PC */
function computerMove() {
  var x,y,pass;
  var sx,sy;
  var selected = false;

  /* Cambio de turno */
  for (pass=0;pass<2;++pass) {
    for (y=0;y<gridy && !selected;++y) {
      for (x=0;x<gridx && !selected;++x) {
        /* Si le da a un barco */
        if (player[y][x][0]==103) {
          sx=x; sy=y;
          var nup=(y>0 && player[y-1][x][0]<=100);
          var ndn=(y<gridy-1 && player[y+1][x][0]<=100);
          var nlt=(x>0 && player[y][x-1][0]<=100);
          var nrt=(x<gridx-1 && player[y][x+1][0]<=100);
          if ( pass == 0 ) {
            /* Para poder dar a una linea */
            var yup=(y>0 && player[y-1][x][0]==103);
            var ydn=(y<gridy-1 && player[y+1][x][0]==103);
            var ylt=(x>0 && player[y][x-1][0]==103);
            var yrt=(x<gridx-1 && player[y][x+1][0]==103);
            if ( nlt && yrt) { sx = x-1; selected=true; }
              else if ( nrt && ylt) { sx = x+1; selected=true; }
              else if ( nup && ydn) { sy = y-1; selected=true; }
              else if ( ndn && yup) { sy = y+1; selected=true; }
            } else {
              /* Para dno darle de nuevo a parte atinada */
              if ( nlt ) { sx=x-1; selected=true; }
              else if ( nrt ) { sx=x+1; selected=true; }
              else if ( nup ) { sy=y-1; selected=true; }
              else if ( ndn ) { sy=y+1; selected=true; }
            }
          }
        }
      }
    }
  if ( !selected ) {
    /* Funcion que, elige aleatoriamente las posiciones de los navios en el campo */
    do {
      sy = Math.floor(Math.random() * gridy);
      sx = Math.floor(Math.random() * gridx/2)*2+sy%2;
    } while( player[sy][sx][0]>100 );
    }
  if (player[sy][sx][0] < 100) {
    /* Atina */
    setImage(sy,sx,103,false);
    var shipno = player[sy][sx][1];
    if ( --playersships[shipno][1] == 0 ) {
      sinkShip(player,shipno,false);
      if ( --playerlives == 0 ) {
        knowYourEnemy();
        alert("has perdido!, presiona F5\n para volver al menú");
        playflag = false;
      }
    }
  } else {
    /* Erra */
    setImage(sy,sx,102,false);
  }
}

/* Cambia imagen de navio por imagen de hundido */
function sinkShip(grid,shipno,ispc) {
  var y,x;
  for (y=0;y<gridx;++y) {
    for (x=0;x<gridx;++x) {
      if ( grid[y][x][1] == shipno )
      if (ispc) setImage(y,x,computer[y][x][2],true);
      else setImage(y,x,player[y][x][2],false);
    }
  }
}

/* Muestra donde estan los navios cuando perdes */
function knowYourEnemy() {
  var y,x;
  for (y=0;y<gridx;++y) {
    for (x=0;x<gridx;++x) {
      if ( computer[y][x][0] == 103 )
      setImage(y,x,computer[y][x][2],true);
      else if ( computer[y][x][0] < 100 )
      setImage(y,x,computer[y][x][0],true);
    }
  }
}

/* Muestra cuantos navios el enemigo tiene */
function updateStatus() {
  var f=false,i,s = "O";
  for (i=0;i<computersships.length;++i) {
    if (computersships[i][1] > 0) {
      if (f) s=s+", "; else f=true;
      s = s + shiptypes[computersships[i][0]][0];
    }
  }
  if (!f) s = s + "Ninguno";
  statusmsg = s;
  window.status = statusmsg;
}

function setStatus() {
  window.status = statusmsg;
}

/* Inicia el juego */

imagePreload();
player = setupPlayer(false);
computer = setupPlayer(true);
document.write("<center><table><tr><td align=center><p class='heading'>Flota enemiga</p></td>"+
"<td align=center><p class='heading'>Flota aliada</p></td></tr><tr><td>");
showGrid(true);
document.write("</td><td>");
showGrid(false);
document.write("</td></tr></table></center>");
updateStatus();
setInterval("setStatus();", 500);

HTML:

<!DOCTYPE html>
<html>

<head>
<style>
.heading { font-size:14pt; font-weight:bold; font-family:sans-serif }
</style>

<script src="battleship.js" type="text/javascript"></script>

</head>
</html>

Answer 1

如果“select”表示選擇一行html元素的grid，則需要在showGrid()中添加類名，如下所示。

f (ispc)
        document.write('<a class="pc row'+ y +'" href="javascript:gridClick(' + y + ',' + x + ');"><img name="pc' + y + '_' + x + '" src="batt100.gif" width=20 height=20></a>');
      else
        document.write('<a class="npc  row'+ y +'" href="javascript:void(0);"><img name="ply' + y + '_' + x + '" src="batt' + player[y][x][0] + '.gif" width=20 height=20></a>');

可以使用下面的函數調用來選擇一行網格。

const row0 = document.getElementsByClassName("pc row0")