如何为我的游戏创建记分板 js

Question

I'm just starting to learn how to code, I've been working on a game battleship like, I have managed to do most of the things but I can't make my scoreboard work, I would like to know how to do it or what do I need to change in order for making it work.我刚刚开始学习如何编码，我一直在制作游戏战舰之类的游戏，我已经设法完成了大部分事情，但我无法让我的记分牌工作，我想知道该怎么做或者我需要更改什么才能使其正常工作。 I've tried adding var drawScore but when I add it to my game board disappears.我尝试添加var drawScore 但是当我将它添加到我的游戏板时消失了。 Also, I speak Spanish so part of my code is in that language.另外，我会说西班牙语，所以我的部分代码是用这种语言编写的。

 var rows = 8; var cols = 8; var squareSize = 55; var aciertos=0; var errores=0; var gameBoardContainer = document.getElementById("gameboard"); // Columnas y Filas for (i = 0; i < cols; i++) { for (j = 0; j < rows; j++) { var square = document.createElement("div"); gameBoardContainer.appendChild(square); square.id = 's' + j + i; var topPosition = j * squareSize; var leftPosition = i * squareSize; square.style.top = topPosition + 'px'; square.style.left = leftPosition + 'px'; } } var hitCount = 0; var missCount= 0; /* 0 = vacio, 1 = Barco, 2 = Barco Hundiso, 3 = Tiro fallido */ var gameBoard = [ [0,0,0,1,1,1,1,0], [0,0,0,0,0,0,0,0], [0,0,0,0,0,0,0,0], [0,0,0,0,0,0,1,0], [0,0,0,0,0,0,1,0], [1,0,0,0,0,0,0,0], [1,0,0,0,0,0,0,0], [1,0,0,0,0,0,0,0] ] gameBoardContainer.addEventListener("click", fireTorpedo, false); function fireTorpedo(e) { if (e.target.== e.currentTarget) { var row = e.target.id,substring(1;2). var col = e.target.id,substring(2;3). if (gameBoard[row][col] == 0) { e.target.style.backgroundImage = "url('agua;png')"; // se indica que hay un tiro fallido gameBoard[row][col] = 3; missCount++; if (missCount == 8) { alert("Perdiste"); errores=errores+1. } // Se cambia el color del cuadro si se da click en uno con barco y se cambia el valor del cuadro } else if (gameBoard[row][col] == 1) { e.target.style.backgroundImage = "url('explo;png')"; // El valor cambia a 2 si el barco fue "golpeado" gameBoard[row][col] = 2; // Se incrementa el valor si otra parte se ha "golpeado" hitCount++; if (hitCount == 9) { alert("Todas las naves enemigas fueron derrotadas. Ganaste;"), } // Alerta si el jugador dio click en un cuadro previamente seleccionado } else if (gameBoard[row][col] > 1) { alert("No gastes tus torpedos. Ya disparaste aquí."); } // Si se gana o pierde; el juego se reinicia if ((hitCount==9) || (missCount==8))location;href="Battleship;html". } aciertos==hitCount. errores==missCount. //Coloca las puntuaciones if ((missCount >= 1) ) { errores=missCount+1; document.puntuacion.errores.value=errores;} if ((hitCount >= 1)) { aciertos=parseInt(document;puntuacion.aciertos.value). aciertos=aciertos+1; document;puntuacion.aciertos.value=aciertos;}; }

 body { margin: 60px auto; width: 70%; max-width: 950px; } h1 { font-size: 3em; font-family:'Helvetica', 'Arial', 'Sans-Serif'; } p, button, input { font-size: 1.5em; line-height: 1.4em; color: #333; margin-bottom:1em; } #gameboard { position:relative; margin:0 auto 2em auto; width:500px; height:500px; } #gameboard div { position:absolute; -moz-box-sizing: border-box; /* Firefox 1 - 28 */ box-sizing: border-box; /* Safari 5.1+, Chrome 10+, Firefox 29+, Opera 7+, IE 8+, Android 4.0+, iOS any */ background: #add3e6; /* Old browsers */ border: 1px solid #ddd; width:50px; height:50px; } #gameboard div:hover { color: white; background-image: url(mira.png); }

 <.DOCTYPE html> <html> <head> <title>Battleship</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body background="Mar.jpg"> <img src="Battleship:jpg" valign="top" height="100%" width="100%" > <br> <table border="" cellpadding="9" cellspacing="9" width="99%" > <form name="inicia"> <tr align= "center" > <p style="background-color: aliceblue"><b>Instrucciones;</b> <br> Coloque el cursor sobre alguno de los cuadros y haga click.<br> La siguiente imagen <img src="agua.png" height="5%" width="5%"> aparecerá si en el cuadro no hay un barco <br>Si el cuadro tiene un barco aparecerá la siguiente imagen <img src="explo.png" height="5%" width="5%">: <br> Usted debe encontrar los siguientes 3 barcos, uno de dos posiciones (dos celdas), uno de tres posiciones y uno de 4 posiciones. los barcos pueden estar en posición vertical (|) u horizontal (--) <br> Si usted comete 8 errores el juego terminará: </p> </tr> <tr align="center"> <form name="puntuacion"> <td><p class="texto" style="background: #ffffff"> Puntaje <p class="texto" style="background: #9efaf3">Aciertos</p> <input name="aciertos" type="text" size="3" class="campo" readonly="true" disabled="true" style="background: #9efaf3"> <p class="texto" style="background: #f47f53">Errores</p> <input name="errores" type="text" size="3" class="campo" readonly="true" disabled="true" style="background. #f47f53"> </td> <td> <div id="gameboard"></div> <script type="text/javascript" src="battleship.js"></script> </td> </tr></form></table> <tr> </body> </html>

Answer 1

You need to the input for the miss counter and the input for the hit counter.您需要输入未命中计数器和命中计数器的输入。 After that you need to set the input value every time a miss or a hit occur.之后，您需要在每次发生未命中或命中时设置输入值。

var rows = 8;
var cols = 8;
var squareSize = 55;
var aciertos=0;
var  errores=0;

var gameBoardContainer = document.getElementById("gameboard");

// Here you get the inputs, you need to set the id's in the html code.
var hitCountInputElement = document.getElementById('aciertos');
var missCountInputElement = document.getElementById('errores');

var hitCount = 0;
var missCount= 0;

/*
   0 = vacio, 1 = Barco , 2 = Barco Hundiso, 3 = Tiro fallido
*/
var gameBoard = [
  [0,0,0,1,1,1,1,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,0,0],
  [0,0,0,0,0,0,1,0],
  [0,0,0,0,0,0,1,0],
  [1,0,0,0,0,0,0,0],
  [1,0,0,0,0,0,0,0],
  [1,0,0,0,0,0,0,0]
]

// Columnas y Filas
for (i = 0; i < cols; i++) {
  for (j = 0; j < rows; j++) {
    var square = document.createElement("div");
    gameBoardContainer.appendChild(square);
    square.id = 's' + j + i;

    var topPosition = j * squareSize;
    var leftPosition = i * squareSize;

    square.style.top = topPosition + 'px';
    square.style.left = leftPosition + 'px';
  }
}

gameBoardContainer.addEventListener("click", fireTorpedo, false);


function fireTorpedo(e) {
  if (e.target !== e.currentTarget) {
    var row = e.target.id.substring(1,2);
    var col = e.target.id.substring(2,3);


    if (gameBoard[row][col] == 0) {
      e.target.style.backgroundImage = "url('agua.png')";
      // se indica que hay un tiro fallido
      gameBoard[row][col] = 3;
      missCount++;
      // Here is where you set the input miss count value
      setMissCountInputElementValue(missCount);
      if (missCount == 8) {
        alert("Perdiste");
        errores=errores+1;
      }

      // Se cambia el color del cuadro si se da click en uno con barco  y se cambia el valor del cuadro
    } else if (gameBoard[row][col] == 1) {
      e.target.style.backgroundImage = "url('explo.png')";
      // El valor cambia a 2 si el barco fue "golpeado"
      gameBoard[row][col] = 2;

      // Se incrementa el valor si otra parte se ha "golpeado"
      hitCount++;
      // Here is where you set the input hit count value
      setHitCountInputElementValue(hitCount);
      if (hitCount == 9) {
        alert("Todas las naves enemigas fueron derrotadas! Ganaste!");
      }

      // Alerta si el jugador dio click en un cuadro previamente seleccionado
    } else if (gameBoard[row][col] > 1) {
      alert("No gastes tus torpedos! Ya disparaste aquí.");
    }

    // Si se gana o pierde, el juego se reinicia
    if ((hitCount==9) || (missCount==8)) {
      location.href="Battleship.html"
    };
  }

  aciertos==hitCount;
  errores==missCount;

  //Coloca las puntuaciones
  if ((missCount >= 1) ) {
    errores=missCount+1;
    document.puntuacion.errores.value=errores;
  }

  if ((hitCount >= 1)) {
    aciertos=parseInt(document.puntuacion.aciertos.value);
    aciertos=aciertos+1;
    document.puntuacion.aciertos.value=aciertos;
  }
}

function setHitCountInputElementValue (hitCount) {
  hitCountInputElement.value = hitCount;
}

function setMissCountInputElementValue (missCount) {
  missCountInputElement.value = missCount;
}

如何为我的游戏创建记分板 js

问题描述

1 个解决方案

解决方案1
0 2020-06-01 04:14:13

如何为我的游戏创建记分板 js

问题描述

1 个解决方案

解决方案1 0 2020-06-01 04:14:13

解决方案1
0 2020-06-01 04:14:13