Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 18.12.2020, 16:37
Кандидат Javascript-наук
Отправить личное сообщение для Katy93 Посмотреть профиль Найти все сообщения от Katy93
 
Регистрация: 28.12.2018
Сообщений: 138

Ошибка, при создании логической игры. Как исправить?
Создаю логическую игру. Механика почти как у шашек. Нужно перепрыгивать, фигуры и убирать их с доски, победа зачисляется только когда останется одна фигура.

Разумеется условия победы я еще не сделала. Суть проблемы заключается, в следующем первый ход срабатывает, а вот со второй попытки выдает ошибку
"VM44 index.html:173 Uncaught TypeError: Cannot read property 'theRow' of undefined"
В чем может быть проблема?
Код:
    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Example</title>
    <script>
    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();
    }
    </script>
    </head>
    <body>
    <canvas id="drawingCanvas" width="500" height="500"></canvas>
    </body>
    </html>
Вот пример, бить надо не по диагонали как в шашках, а горизонтали и вертикале. https://codepen.io/Smith37/pen/BaLRZRg
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как делать редирект при клике по adsense? kaylos Общие вопросы Javascript 0 30.09.2016 12:44
JQuery UI Autocomplete клонируется. Как исправить? Prorab337 jQuery 1 09.01.2016 18:59
Как сделать, чтоб глобус при клике вращался вокруг указателя мышки? missbells Events/DOM/Window 1 05.12.2015 00:48
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как сделать? При выходе мышкой за пределы окна браузера, начинает грузится другая стр alb Events/DOM/Window 13 01.09.2010 12:19