document.title = '駐車場から順に出る矢印パズル';

var dirs = [[1,0],[0,1],[-1,0],[0,-1]];
var blocks = [0,1,2,3,4,5];

var one = [-1,1];
var min = 0;
var max = 10;
var missCount = 0;
var ary =[];
var area = $('<div>',{id:'area'});
$('#demo').append(area);

var setTable = function(){
  var table = $('<table>');
  for(let i =0;i<max;i++){
    var tr = $('<tr>');
    table.append(tr);
    for(let j =0;j<max;j++){
      var td = $('<td>')
      tr.append(td);
    }
  }
  area.append(table);
}

var checkPosSame = function(a,b){
  if(a.x === b.x && a.y === b.y){
    return true;
  }
}
var checkOut = function(a){
  if(a.x<min){return true;}
  if(a.x>max-1){return true;}
  if(a.y<min){return true;}
  if(a.y>max-1){return true;}
}

var checkArrow = function(a,b){
  if(
    b.dx>0 && a.x >= b.x+b.dx && a.y === b.y ||
    b.dx<0 && a.x <= b.x+b.dx && a.y === b.y ||
    b.dy>0 && a.y >= b.y+b.dy && a.x === b.x ||
    b.dy<0 && a.y <= b.y+b.dy && a.x === b.x
  ){
    return true;
  }
}

var checkArrowReverse = function(a,b){
  //if(a.x !== b.x && a.y !== b.y){return false;}
  //if(a.dx === b.dx && a.dx !==0){return false;}
  //if(a.dy === b.dy && a.dy !==0){return false;}
  if(
    a.x === b.x && a.y > b.y && b.dy > 0 ||
    a.x === b.x && a.y < b.y && b.dy < 0 ||
    a.y === b.y && a.x > b.x && b.dx > 0 ||
    a.y === b.y && a.x < b.x && b.dx < 0 
  ){
    return true;
  }
}


var removeEle = function(aryA, ele ,b){
  ary = aryA.filter(function(a){
    return a.i !== b.i;
  });
  console.log(ary);
  setTimeout(function(){
    ele.remove();
    if(ary.length < 1){
      blocks = blocks.concat([0,0,0,0,0,0]);
      setStage();
    }
  },400);
}

var setStage = function(){

  area.empty();
  setTable();
  missCount = 0;
  var c = {};
  ary =[];
  blocks.forEach(function(v, i){
    var ele = $('<i>');
    var r = Math.floor(Math.random()*dirs.length);
    var x = Math.floor(Math.random()*max);
    var y = Math.floor(Math.random()*max);
    var dir = dirs[r];
    var dx = dir[0];
    var dy = dir[1];
    if(i===0){
      x = 4;
      y = 4;
    } else {
      x = c.x + c.dx;
      y = c.y + c.dy;
      if(c.dx === 0){
        dx = one[Math.floor(Math.random()*2)];
        dy = 0;
      }
      if(c.dy === 0){
        dy = one[Math.floor(Math.random()*2)];
        dx = 0;
      }
    }

    if(i>5 && Math.random()*9 > 5 && i%5 === 0){
      x = Math.floor(Math.random()*(max-1));
      y = Math.floor(Math.random()*(max-1));
    }

    var b = {
      i:i,
      x:x,
      y:y,
      dx:dx,
      dy:dy,
    };

    var isPosCol = false;
    if(checkOut(b)){isPosCol = true;}
    ary.some(function(a){
      if(checkPosSame(a,b)){isPosCol = true;}
      if(checkArrowReverse(a,b)){isPosCol = true;}
      if(isPosCol){return true;}
    });
    if(isPosCol){return;}

    var img = $('<img>',{src:'tri.svg'});
    if(dx===1){
      img.css({transform:'rotate(90deg)'});
    } else if(dx===-1){
      img.css({transform:'rotate(-90deg)'});
    } else if(dy===1){
      img.css({transform:'rotate(180deg)'});
    }
    c = b;
    ary.push(b);
    ele.append(img);

    ele.attr(b);
    ele.css({left:(x*10)+'vmin',top:(y*10)+'vmin'});
    ele.on('click', function(){
      var isCol = false;
      //console.log(b);
      //console.log(ary);
      ary.some(function(a){
        if(checkArrow(a,b)){isCol = true;return true;}
      });
      if(isCol){
        $(this).css({backgroundColor:'#ff0000'});
        missCount++;
        if(missCount>3){
          setStage();
        }
        return;
      }
      removeEle(ary, ele, b);
      $(this).animate({left:(x*10)+(dx*90)+'vmin',top:(y*10)+(dy*90)+'vmin'});
    });
    area.append(ele);
  });
  console.log(ary);
}
setStage();

html,body{
  overflow:hidden;
}

td{
  width:10vmin;
  height:10vmin;
  border:1px dotted #ddd;
  box-sizing:border-box;
}

#area{
  position:relative;
  top:0;
  left:0;
  width:100vmin;
  height:100vmin;
  margin:0 auto;
}
#demo i{
  position:absolute;
  width:8vmin;
  height:8vmin;
  background-color:#999;
  margin:1vmin;
  border-radius:2vmin;
  user-select:none;
}
#demo i:hover{
  background-color:#ccc;
  cursor:pointer;
}
#demo i img{
  width:60%;
  height:40%;
  margin:30% 20%;
  transform-origin: 50% 50%;
}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-game-puzzle-arrow-block/