document.title = '一筆書きパズル 順路をすべて塗りつぶすゲーム';

var dirs = [[1,0],[0,1],[-1,0],[0,-1]];
var len = 9;
var blocks = [];

var one = [-1,1];
var min = 0;
var max = 10;
var missCount = 0;
var ary =[];

var line = [...Array(max)].map((_, i) => 0);
var map = [...Array(max)].map((v, i) => _.clone(line));

var readyStage = false;
console.log(map);

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+1){return true;}
  if(a.x>max-2){return true;}
  if(a.y<min+1){return true;}
  if(a.y>max-2){return true;}
}

var checkPos = function(a,v){
  if(map[a.x][a.y] === v){
    return true;
  }
}
var checkCross = function(a, v){
  if(
    map[a.x+1][a.y] === v ||
    map[a.x-1][a.y] === v ||
    map[a.x][a.y+1] === v ||
    map[a.x][a.y-1] === v
  ){
    return true;
  } else {
    return false;
  }
}

var nextStage = function(){
  readyStage = true;
  setTimeout(function(){
    readyStage = false;
    setStage();
  },1999);
}

var setStage = function(){

  area.empty();
  setTable();
  missCount = 0;
  isStart = false;
  map = [...Array(max)].map((v, i) => _.clone(line));
  var c = {};
  ary =[];
  blocks = [...Array(len)].map((_, i) => i);
  blocks.forEach(function(v, i){
    var ele = $('<i>');
    var r = Math.floor(Math.random()*dirs.length);
    var x = 0;
    var y = 0;
    var dir = dirs[r];
    var dx = 0;
    var dy = 0;
    //console.log(map);
    if(i===0){
      x = 4;
      y = 4;
    } else {
      x = c.x + c.dx;
      y = c.y + c.dy;
    }

    dirsR = _.shuffle(dirs);
    dirsR.some(function(v){
      //console.log([x,y]);
      if(x+v[0]>max-2){return;}
      if(x+v[0]<min+1){return;}
      if(y+v[1]>max-2){return;}
      if(y+v[1]<min-1){return;}
      if(map[x+v[0]][y+v[1]] === 0){
        map[x][y] = 1;
        dx = v[0];
        dy = v[1];
        if(i===0){
          map[x][y] = 3;
        }
        return true;
      }
    });

    var v = map[x][y];
    var b = {
      i:i,
      x:x,
      y:y,
      dx:dx,
      dy:dy,
      v:v,
    };

    var isPosCol = false;
    if(checkOut(b)){
/*
      if(c.dx !== 0){
        c.dx = 0;
        c.dy = one[Math.floor(Math.random()*2)];
      }
      if(dy === 0){
        c.dy = 0;
        c.dx = one[Math.floor(Math.random()*2)];
      }
*/
      isPosCol = true;
    }
    ary.some(function(a){
      if(checkPosSame(a,b)){isPosCol = true;}
      //if(isPosCol){return true;}
    });
    if(isPosCol){map[x][y] = 0;return;}
    c = b;
    ary.push(b);

    ele.addClass('v'+v);
    ele.attr(b);
    ele.css({top:(x*10)+'vmin',left:(y*10)+'vmin'});


    ele.on('touchmove', function(){
      ele.trigger('mouseover');
    });

    ele.on('mouseover', function(){
      if(checkPos(b,3)){isStart = true;}
      if(readyStage){return;}
      if(!isStart){return;}
      if(checkPos(b,2) || checkPos(b,3)){
      } else if(checkCross(b,3)){
        $(this).addClass('v3');
        if($('.v2').length>1){map[c.x][c.y] = 2;}
        c = b;
        map[x][y] = 3;
        ele.removeClass('v1');
        if(!$('.v1').length){
          len += 4;
          if(len>60){len=60;}
          nextStage();
        } else if(!checkCross(b,1)) {
          console.log(map);
          ele.addClass('v4');
          nextStage();
        }
      }
    });
    area.append(ele);
  });
  console.log(ary);
  console.log(map);
}
setStage();

html,body{
  overflow:hidden;
}

td{
  width:10vmin;
  height:10vmin;
  border:1px dotted #888;
  background-color:#666;
  box-sizing:border-box;
}

#area{
  position:relative;
  top:0;
  left:0;
  width:100vmin;
  height:100vmin;
  margin:0 auto;
}
#demo i{
  position:absolute;
  width:10vmin;
  height:10vmin;
  user-select:none;
}
.v0{
  background-color:#111;
}
.v1{
  background-color:#eee;
}
.v2{
  background-color:#00f;
}
.v3{
  background-color:#00f;
}
.v4{
  background-color:#a00;
}
#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-one-stroke/