Помогите найти ошибку

Vlad · June 22, 2011

Сделал небольшой пример, но в нём вылезает ошибка в 209 строке --- переменная cell не определена. Это случается, если по диагонали попробовать сходить.

http://jsfiddle.net/EhDWR/

Подскажите, где ошибка?

psywalker · June 22, 2011

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>22 хода</title>
<style>
h1 {
  text-align: center;
}
#main {
  width: 400px;
  margin: auto;
}
#msg {
  float: right;
  text-align: right;
  background: #333;
  color: #fff;
}
.transp {
  -moz-transition: opacity 1s ease-in;
  -o-transition: opacity 1s ease-in;
  -webkit-transition: opacity 1s ease-in;
}

</style>
<script>
window.onload = function() {

  var gBoard   = 400;      // Ширина и высота поля
  var gR       = 26;       // Радиус поля под фишкой
  var gRP      = 17;       // Радиус фишек
  var gSCircle = 2;        // Толщина линии в окружностях
  var gRDot    = 4;        // Радиус точки
  var gField   = '#fff';   // Цвет заливки поля под фишкой
  var gBlack   = '#000';   // Цвет чёрных фишек
  var gWhite   = '#ccc';   // Цвет светлых фишек
  var gDot     = '#666';   // Цвет точек
  var gLine    = '#ccc';   // Цвет линий между полями
  var gSel     = '#f00';   // Цвет линии при выделении фишки
  var gSLine   = 1;        // Толщина линии между полей
  var gGrid    = (gBoard - 2*gR)/4;  // Шаг сетки

  // Начальная позиция фишек
  // 0 - нет фишки, 1 - чёрная, 2 - светлая, 3 - точка
  var boardInit = boardCur = [[0,0,1,2,2], [0,0,2,1,1], [1,2,3,2,3], [1,2,1,0,0], [1,2,2,0,0]];

  // Конечная позиция для победы
  var boardOver = [[0,0,1,1,1], [0,0,1,1,1], [2,2,3,1,3], [2,2,2,0,0], [2,2,2,0,0]];
  var move = 0; // Количество ходов
  var isSelect = 0; // Фишка не выбрана
  var cell = {x:0,y:0}; // Координаты выбранной фишки
  var cell2 = []; // Координаты пустого поля для хода

  var canvas = document.getElementById('game');
  if (canvas.getContext) {
    var game = canvas.getContext('2d');
    drawBoard(game, boardInit);
    window.onclick = clickOnBoard;

  }

  // Рисование поля
  function drawBoard(g, pos) {

    g.clearRect(0, 0, gBoard, gBoard); // Очищаем всё
    g.fillStyle = gField;

    for (i=0;i<3;i++) {
      // Рисуем горизонтальные линии
      g.strokeStyle = gLine;
      g.lineWidth = gSLine;

      g.beginPath();
      g.moveTo(gBoard/2,gR+gGrid*i);
      g.lineTo(gBoard-gR,gR+gGrid*i);
      g.stroke();

      g.beginPath();
      g.moveTo(gR,gBoard/2+gGrid*i);
      g.lineTo(gBoard/2,gBoard/2+gGrid*i);
      g.stroke();

      // Рисуем вертикальные линии
      g.beginPath();
      g.moveTo(gR+gGrid*i,gBoard/2);
      g.lineTo(gR+gGrid*i,gBoard-gR);
      g.stroke();

      g.beginPath();
      g.moveTo(gBoard/2+gGrid*i,gR);
      g.lineTo(gBoard/2+gGrid*i,gBoard/2);
      g.stroke();
    }

    for (i=0;i<5;i++) {
      for (j=0;j<5;j++) {
        // Рисуем поле для фишки
        if (pos[i][j] != 0) {
          g.strokeStyle = gBlack;
          g.fillStyle = gField;
          g.lineWidth = gSCircle;          
          g.beginPath();
          g.arc(gR+gGrid*i,gR+gGrid*j,gR-(gSCircle/2),0,Math.PI*2,true);
          g.stroke();
          g.fill();
        }
        // Рисуем чёрные фишки
        if (pos[i][j] == 1) {
          g.fillStyle = gBlack;
          g.beginPath();
          g.arc(gR+gGrid*i,gR+gGrid*j,gRP,0,Math.PI*2,true);
          g.fill();  
        }
        // Рисуем светлые фишки
        if (pos[i][j] == 2) {
          g.fillStyle = gWhite;
          g.beginPath();
          g.arc(gR+gGrid*i,gR+gGrid*j,gRP,0,Math.PI*2,true);
          g.fill();  
        }
      }
    }

    // Рисуем точки
    g.fillStyle = gDot;
    i = 2; j = 2;
    g.beginPath();
    g.arc(gR+gGrid*i,gR+gGrid*j,gRDot,0,Math.PI*2,true);
    g.fill();  
    i = 2; j = 4;
    g.beginPath();
    g.arc(gR+gGrid*i,gR+gGrid*j,gRDot,0,Math.PI*2,true);
    g.fill();  

  }


  // Игрок щёлкнул по полю с фишкой
  function clickOnBoard(e) {

    if (isSelect) cell2 = movePiece(e);

    // Выбрали фишку для хода и щелкнули на пустое место
    if (isSelect && cell2['x'] !=0 && cell2['y'] !=0) {
      boardCur[cell2['x']][cell2['y']] = boardCur[cell['x']][cell['y']];
      boardCur[cell['x']][cell['y']] = 3;
      drawBoard(game, boardCur);
      isSelect = 0;
      move++;
      document.getElementById("move").innerHTML = move;
    }
    else {
      cell = selectPiece(e);
    }
  }


  // Выделяем фишку
  function selectPiece(e) {
    coords = getCursorPosition(e);

    // Пробегаемся по всем фишкам
    for (var i=0;i<5;i++) {
      for (var j=0;j<5;j++) {
        c = Math.sqrt(Math.pow(coords['x']-(gR+gGrid*i), 2) + Math.pow(coords['y']-(gR+gGrid*j), 2));

        // Нажали внутри поля с фишкой
        if (c < gR && boardCur[i][j] != 3 && boardCur[i][j] != 0) {

          // Проверяем, может ли фишка быть выбрана (у неё есть ходы)
          if (isMoveAllaw(i, j)) { // Да, может
            // Перерисовываем поле
            drawBoard(game, boardCur);
            // Обводим выделенную фишку
            game.beginPath();
            game.strokeStyle = gSel;
            game.arc(gR+gGrid*i,gR+gGrid*j,gRP,0,Math.PI*2,true);
            game.stroke();

            isSelect = 1;

			if(cell){
            cell['x'] = i;
            cell['y'] = j;
			}

            return {x:i,y:j};

          }
          else {
            // document.getElementById("msg").innerHTML = "Эта фишка не может ходить";
          }
        }
      }
    }
  }


  // Передвигаем фишку на свободное поле
  function movePiece(e) {
    coords = getCursorPosition(e);

    // Пробегаемся по всем фишкам
    for (var i=0;i<5;i++) {
      for (var j=0;j<5;j++) {
        c = Math.sqrt(Math.pow(coords['x']-(gR+gGrid*i), 2) + Math.pow(coords['y']-(gR+gGrid*j), 2));

        // Нажали на пустое поле
        if (c < gR && boardCur[i][j] == 3) {

          // Проверяем, что пустое поле не по диагонали
          if (cell && (cell['x'] == i || cell['y'] == j)) {
            cell2['x'] = i;
            cell2['y'] = j;
            return cell2;
          }
        }
      }
    }
    return {x:0,y:0};
  }  


  // Получаем координаты курсора мыши внутри холста
  function getCursorPosition(e) {
    var x;
    var y;
    var coords = new Array;
    if (e.pageX != undefined && e.pageY != undefined) {
      x = e.pageX;
      y = e.pageY;
    }
    else {
      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= canvas.offsetLeft;
    y -= canvas.offsetTop;
    coords['x'] = x;
    coords['y'] = y;
    return coords;
  }


  // Проверяем, может ли текущая фишка ходить
  function isMoveAllaw(i, j) {
    var isAllaw; // 0 - не может перемещаться, 1 - может

    isLeft  = (i > 0 && boardCur[i-1][j] == 3)? 1 : 0;  // Влево
    isRight = (i < 4 && boardCur[i+1][j] == 3)? 1 : 0;  // Вправо
    isDown  = (j < 4 && boardCur[i][j+1] == 3)? 1 : 0;  // Вниз
    isUp    = (j > 0 && boardCur[i][j-1] == 3)? 1 : 0;  // Вверх

    isLeftLeap  = (i > 1 && boardCur[i-2][j] == 3)? 1 : 0;  // Влево через одну
    isRightLeap = (i < 3 && boardCur[i+2][j] == 3)? 1 : 0;  // Вправо через одну
    isDownLeap  = (j < 3 && boardCur[i][j+2] == 3)? 1 : 0;  // Вниз через одну
    isUpLeap    = (j > 1 && boardCur[i][j-2] == 3)? 1 : 0;  // Вверх через одну

    isAllow = isLeft + isRight + isDown + isUp + isLeftLeap + isRightLeap + isDownLeap + isUpLeap;
    return (isAllow);
  }

}
</script>
</head>
<body>
<div id="main">
<h1>22 хода</h1>
<canvas id="game" width="400" height="400">
<img src="images/old.png" alt="">
</canvas>
<p>Ходов: <span id="move">0</span>
<span id="msg"></span>
</p>
<h3>Цель игры</h3>
<p>Вам необходимо за 22 хода сгруппировать все серые фишки
на кружках в верхнем квадрате, а чёрные фишки — в нижнем.
Кружки с точкой должны оказаться незанятыми.</p>
<p>Фишка может перемещаться только по линиям — по горизонтали
или вертикали, а также перепрыгивать через фишку, если за ней есть свободное
поле.</p>
</div>
</body>
</html>

Vlad · June 22, 2011

Макс, я же просил подсказать где ошибка, а не приводить простыню текста!

psywalker · June 22, 2011

Макс, я же просил подсказать где ошибка, а не приводить простыню текста!

Ааа, просто подсказать? Да не вопрос, у тебя там почему то проблемы с объектом, т.е. он бывает undefined, и я просто поставил две проверки, чтобы проверять его, перед тем, как делать действия.

   
			if(cell){
            cell['x'] = i;
            cell['y'] = j;
			} 
      if (cell && (cell['x'] == i || cell['y'] == j)) {
            cell2['x'] = i;
            cell2['y'] = j;
            return cell2;
          }

Vlad · June 22, 2011

Спасибо, разобрался.

psywalker · June 22, 2011

Спасибо, разобрался.

Так в чём всё таки была проблема?

Vlad · June 23, 2011

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

http://jsfiddle.net/EhDWR/1/

Для простоты сделал ограничение на два хода, после чего сообщается, что проиграли и поле должно обновиться, а оно по прежнему "старое". Опять прошу помощи в выявлении ошибки.

Vlad · June 23, 2011

Проблему нашёл, массив boardInit по каким-то причинам переопределяется, хотя должен быть константой. В самой программе нигде нет его явного изменения.

psywalker · June 23, 2011

Проблему нашёл, массив boardInit по каким-то причинам переопределяется, хотя должен быть константой. В самой программе нигде нет его явного изменения.

Значит есть. Ищи лучше. Не может же быть такого? :unsure:

s0rr0w · June 23, 2011

Проблему нашёл, массив boardInit по каким-то причинам переопределяется, хотя должен быть константой. В самой программе нигде нет его явного изменения.


var boardInit = boardCur =

Создается один реальный массив и одна ссылка на этот массив. Любое изменение boardCur ведет к изменению boardInit

Vlad · June 24, 2011

Спасибо, разобрался.

stars · June 24, 2011

почему он постоянно пишет вы проиграли?)

Vlad · June 24, 2011

Это для отладки сделано. Последняя рабочая версия здесь

http://jsfiddle.net/EhDWR/2

Sign In

Помогите найти ошибку

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information