document.title = 'すごろく';

var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:crosshair;}';
document.getElementsByTagName('head').item(0).appendChild(style);

var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);

var ctx = canvas.getContext('2d');
var cx = w/2;
var cy = h/2;
var t = 0;
var max = 16;
var iw = min/max;
var ih = min/max;
var rAry = [];
var goalAry = ['a','b','c','d','e','f','g','h','i','k','l',];
var grayLine;


var roots = [
  {
    x:1,
    y:1,
  },
  {
    x:2,
    y:1,
  },
  {
    x:3,
    y:1,
  },
  {
    x:4,
    y:1,
  },
  {
    x:5,
    y:1,
  },
  {
    x:6,
    y:6,
  },
  {
    x:6,
    y:6,
  },
  {
    x:6,
    y:6,
  },
];

var dir = [[1,0],[-1,0],[0,1],[0,-1]];
for(let i=0;i<19;i++){
  var r = Math.floor(Math.random()*4);
  var next = dir[r];
  var hash = {x:roots[i].x+next[0], y:roots[i].y+next[1]};
  roots.push(hash);
  
}
console.log(roots);


function draw() {
  ctx.clearRect(0, 0, w, h);;
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = iw/4;
  ctx.textAlign = 'center';
  ctx.font = 'bold' + ' '+  (iw/4) + 'px' + ' ' + '"メイリオ"';

  ctx.beginPath();
  for(j=0;j<roots.length;j++){
    var r = roots[j];
    if(j===0){
      ctx.moveTo(r.x*iw*2, r.y*ih*2);
    } else {
      ctx.lineTo(r.x*iw*2, r.y*ih*2);
    }
  }
  ctx.stroke();

  ctx.fillStyle = '#ffffff';
  ctx.strokeStyle = '#000000';
  ctx.lineWidth = iw/4;
  for(j=0;j<roots.length;j++){
    var r = roots[j];
    ctx.beginPath();
    ctx.arc(r.x*iw*2, r.y*ih*2, iw/2, 0, 2 * Math.PI); 
    ctx.closePath();
    ctx.fill();
    ctx.stroke();
  }
}
draw();

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

view-source:https://hi0a.com/demo/-js/js-game-sugoroku/