javascript - 检查代码中的错误，如何解决？

问题描述

做了一个小游戏，主要目标是通过跳棋来消除所有的棋子。第一次可以删除检查器，第二次它给出错误？

未捕获的类型错误：无法读取未定义的属性“theRow”

在第 180 行。我看了看行，在这里。

代码：

Point = function(x, y) {
  this.x = x;
  this.y = y;
}
window.onload = function() {
  var canvas;
  var context;
  var BB;
  var offsetX;
  var offsetY;
  var dragok = false;
  var startX;
  var startY;
  var oldX, oldY;
  var fieldArray = [
    [1, 0, 1, 1, 0, 0],
    [1, 0, 0, 1, 1, 0],
    [0, 0, 0, 0, 0, 0]
  ];
  var shapes = [];
  var possibleLandings = [];
  var localX, localY;
  var pickedMonster;
  var sx = 0;
  var sy = 0;
  var i1 = 0;

  function draw() {

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.save();

    for (var i = 0; i < fieldArray.length; i++) {
      for (var j = 0; j < fieldArray[i].length; j++) {
        context.lineWidth = 1;
        context.strokeRect(j * 60, i * 60, 60, 60);
        context.fillRect(j * 60, i * 60, 60, 60);
      }
    }

    for (var i = 0; i < shapes.length; i++) {
      circle(shapes[i]);
    }

    context.restore();
    if (possibleLandings.length > 0) {
      context.save();
      context.fillStyle = "#4CFF00";
      context.fillRect(oldX, oldY, 20, 20);
      context.restore();
    } else {
      context.save();
      context.fillStyle = "#FF0000";
      context.fillRect(oldX, oldY, 20, 20);
      context.restore();
    }
  }

  function circle(c) {

    context.fillStyle = c.fill;
    context.beginPath();
    context.arc(c.x, c.y, c.r, 0, Math.PI * 2);
    context.closePath();
    context.fill();
  }

  function myDown(e) {
    e.preventDefault();
    e.stopPropagation();
    var mx = parseInt(e.clientX - offsetX);
    var my = parseInt(e.clientY - offsetY);

    dragok = false;
    for (var i = 0; i < shapes.length; i++) {
      var s = shapes[i];
      var dx = s.x - mx;
      var dy = s.y - my;

      if (dx * dx + dy * dy < s.r * s.r) {
        dragok = true;
        s.isDragging = true;

        pickedMonster = {
          x: s.x,
          y: s.y,
          i: i,
          theRow: s.theRow,
          theCol: s.theCol
        };
        oldX = s.x;
        oldY = s.y;
        localX = mx - s.x + (30 / 2);
        localY = my - s.y + (30 / 2);
        checkMonster(s);
        canvas.onmousemove = moveMonster;
        canvas.onmouseup = dropMonster;
      }
    }
    startX = mx;
    startY = my;
  }

  function moveMonster(e) {
    if (dragok) {
      e.preventDefault();
      e.stopPropagation();
      var mx = parseInt(e.clientX - offsetX);
      var my = parseInt(e.clientY - offsetY);
      var dx = mx - startX;
      var dy = my - startY;
      for (var i = 0; i < shapes.length; i++) {
        var s = shapes[i];

        if (s.isDragging) {
          s.x += dx;
          s.y += dy;
          pickedMonster.x = e.clientX - localX;
          pickedMonster.y = e.clientY - localY;
        }
      }

      draw();
      startX = mx;
      startY = my;
    }
  }

  function dropMonster(e) {
    e.preventDefault();
    e.stopPropagation();
    var legalMove = false;

    var dropX = Math.floor((pickedMonster.x + 30) / 60);
    var dropY = Math.floor((pickedMonster.y + 30) / 60);
    console.log(dropX);

    for (var i = 0; i < possibleLandings.length; i++) {

      if (possibleLandings[i].x == dropY && possibleLandings[i].y == dropX) {

        legalMove = true;
        break;
      }
    }
    if (!legalMove) {

      shapes[pickedMonster.i].x = oldX;
      shapes[pickedMonster.i].y = oldY;
    } else {

      var rowOffset = (dropY - pickedMonster.theRow) / 2;

      var colOffset = (dropX - pickedMonster.theCol) / 2;

      fieldArray[pickedMonster.theRow][pickedMonster.theCol] = 0;
      fieldArray[pickedMonster.theRow + rowOffset][pickedMonster.theCol + colOffset] = 0;
      fieldArray[pickedMonster.theRow + 2 * rowOffset][pickedMonster.theCol + 2 * colOffset] = 1;

      for (i = 0; i < 5; i++) {
        var currentMonster = shapes[i];
        if (currentMonster.theRow == pickedMonster.theRow + rowOffset &&
          currentMonster.theCol == pickedMonster.theCol + colOffset) {
          shapes.splice(i, 1);
        }
      }
    }

    dragok = false;
    for (var i = 0; i < shapes.length; i++) {
      shapes[i].isDragging = false;
    }
    draw();
  }

  function checkMonster(s) {

    for (var i = 0; i < 4; i++) {
      var deltaRow = (1 - i) * (i % 2 - 1);

      var deltaCol = (2 - i) * (i % 2);
      if (checkField(s, deltaRow, deltaCol)) {

        possibleLandings.push(new Point(s.theRow + 2 * deltaRow, s.theCol + 2 * deltaCol));
      }
    }
  }

  function checkField(s, rowOffset, colOffset) {


    if (fieldArray[s.theRow + 2 * rowOffset] != undefined &&
      fieldArray[s.theRow + 2 * rowOffset][s.theCol + 2 * colOffset] != undefined) {
      if (fieldArray[s.theRow + rowOffset][s.theCol + colOffset] == 1 &&
        fieldArray[s.theRow + 2 * rowOffset][s.theCol + 2 * colOffset] == 0) {
        return true;
      }
    }

    return false;
  }

  function main() {
    canvas = document.getElementById("drawingCanvas"),
      context = canvas.getContext("2d");
    canvas.style.background = "#A0A0A0"
    BB = canvas.getBoundingClientRect();
    context.fillStyle = 'rgb(150,190,255)';
    context.globalAlpha = 0.7;
    offsetX = BB.left;
    offsetY = BB.top;
    for (var i = 0; i < fieldArray.length; i++) {

      for (var j = 0; j < fieldArray[i].length; j++) {

        if (fieldArray[i][j] == 1) {
          shapes.push({
            x: j * 60 + 30,
            y: i * 60 + 30,
            r: 30,
            theRow: i,
            theCol: j,
            fill: "#444444",
            isDragging: false
          });
        }
      }
    }
    draw();
    canvas.onmousedown = myDown;
  }
  main();
}

<canvas id="drawingCanvas" width="500" height="500">

怎么修？

标签： javascripthtmlhtml5-canvas

javascript - 检查代码中的错误，如何解决？

问题描述

解决方案

推荐阅读