Блог

Главная - Вопросы по программированию - Пятнадцатая игра-головоломка

Пятнадцатая игра-головоломка

#javascript #html #puzzle

#javascript #HTML #Головоломка

Вопрос:

Я делаю пятнадцатую игру-головоломку, и я хочу, чтобы вы могли нажимать только на число рядом с пустым полем, но теперь вы можете нажимать везде … как это изменить? Я подумал, что вы можете создать оператор if для столбцов и строк..

 <!DOCTYPE html>

<html>
<head>
  <title>The Fifteen Puzzle Game</title>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script>

    $(document).ready(function(){ 

      var currentBoard = new Array(' ','1','2','3','4','5','6','7','8','9','10','11','12','13','14','15');

   
     
	  for(i=0 ; i  <100 ; x = Math.floor(Math.random()*16), y = Math.floor(Math.random()*16), currentBoard[x] = currentBoard.splice(y, 1, currentBoard[x])[0]);


      repaint(); // Redraw puzzle board     

      //
      // Funktion repaint()
      // Redraw puzzle board
      function repaint(){
        currentString = "";
        for(i=1;i<17;i  ){
          currentString  = "<input type='button'  id='"   i   "' value='"   currentBoard[i-1]   "' />";
          if ( (i%4) == 0 ) currentString  = "<br />";
        }
        $("#board").html(currentString);
      }

     
      function swapArrElems(index_a, index_b) {
          var temp = currentBoard[index_a];
          currentBoard[index_a] = currentBoard[index_b];
          currentBoard[index_b] = temp;
      }

     
      $('#board').click(function(event){
        current = $(event.target).attr("id")-1;

        for(i=0;i<16;i  ) if( currentBoard[i]==0 ) zeroIndex = i; 
        swapArrElems(current, zeroIndex);
        repaint();
        
      });


     });
    
  </script>

  <style>
    input[type="button"] { width: 80px; height: 80px; font-size: 30px; }
  </style>
</head>

<body>

<div id="board">
</div>

</body>
</html>

Ответ №1:

Насколько я понял ваш код, у вас есть 16 кнопок, обозначенных строками по 4. Каждый раз, когда нажимается кнопка, значение массива этой кнопки и пустой кнопки меняются местами. Вы почти на месте. Наиболее важной деталью здесь является идентификатор кнопки, который остается неизменным повсюду.

Вам нужно добавить сравнение между идентификатором нажатой кнопки и идентификатором пустой кнопки, для чего требуется условие.

Я не собираюсь предоставлять вам код, потому что я не хочу просто выдавать ответ. Вместо этого я собираюсь дать вам логику:

В вашей последней функции после if( currentBoard[i]==0 ) zeroIndex = i;

 **Else if** the id(clicked button) == id(blank button)-1. OR id(blank button) 1. OR
id(blank button)-4. OR id(blank button) 4 ........

Swap the elements.

Else

don't swap the elements.

Удачи! Надеюсь, это поможет.

Ответ №2:

 for (i = 0; i < 16; i  ) {
  if (currentBoard[i] == 0) {
    if ((i - current) == 4 || (current - i) == 4 || (current - i) == 1 || (i - current) == 1) {
      zeroIndex = i;
      swapArrElems(current, zeroIndex);
      repaint();
    }
  }
}