document.title = 'コックリさん おいでください';

var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:pointer;}';
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 = 10;
var iw = min/max;
var ih = min/max;
var rAry = [];
var grayLine;


var img = new Image();
img.src = 'coin-10yen.png';


var x = 0;
var y = 0;
var fontSize = min/10;
var fontFamily = 'メイリオ';
var font = 'bold' + ' '+ fontSize + 'px' + ' ' + '"' + fontFamily + '"';
ctx.font = font;
ctx.textAlign = 'center';

var mouseP = {x:w/2,y:h/2};

let textsOrg = 'あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもや　ゆ　よらりるれろわ　をーん';
let map = [];
x = (w-min)/2+iw*10.5;
y = iw*3;
textsOrg.split('').forEach(function(v,i){
  if(i%5===0){
    y = iw*3;
  }
  if(i%5===0){
    x-=iw;
  }
  let hash = {
    v:v,
    x:x,
    y:y,
  }
  y+=iw;
  map.push(hash);
});

let numTexts = '9876543210';
x = (w-min)/2+iw*10.5;
y = iw*3+iw*6;
numTexts.split('').forEach(function(v,i){
  x-=iw;
  let hash = {
    v:v,
    x:x,
    y:y,
  }
  map.push(hash);
});

let startMap;
let yesNoAry = ['いいえ','⛩','はい',];
x = (w-min)/2+iw*11;
y = iw;
yesNoAry.forEach(function(v,i){
  x-=iw*3;
  let hash = {
    v:v,
    x:x,
    y:y,
  }
  if(v==='⛩'){
    startMap = hash;
  }
  map.push(hash);
});


console.log(map);

function draw() {
  ctx.clearRect(0, 0, w, h);;
  ctx.strokeStyle = '#000000';
  
  map.forEach(function(o){
    if(o.v==='⛩'){
      ctx.fillStyle = '#ff0000';
    } else {
      ctx.fillStyle = '#000000';
    }
    ctx.fillText(o.v, o.x, o.y);
  });
  player.draw();

}



//********************************************
var Player = function(_o){
  var that = this;

  var t = 0;
  var x = _o.x;
  var y = _o.y;
  var i = _o.i;
  var j = _o.j;
  var isDead = false;

  that.o = function(){
    return {
      x:x,
      y:y,
      isDead:isDead,
    }
  }
  that.set = function(ex,ey){
    x=ex
    y=ey
  }
  that.move = function(ex,ey){
    mouseP.x = ex;
    mouseP.y = ey;
    if(ex > x-iw && ex < x+iw && ey > y-iw && ey < y+iw){
      x+=(ex-x)/12;
      y+=(ey-y)/12;
    }
  }

  that.draw = function(){
    ex = mouseP.x;
    ey = mouseP.y;
    if(ex > x-iw && ex < x+iw && ey > y-iw && ey < y+iw){
      x+=Math.random()*min/120 - min/240;
      y+=Math.random()*min/120 - min/240;
    }
    ctx.drawImage(img, x-iw/2, y-iw/2, iw, ih);
  }
  return that;
}
var player = new Player(startMap);

function setFont() {
  fontSize = min/10;
  font = 'bold' + ' '+ fontSize + 'px' + ' ' + '"' + fontFamily + '"';
  ctx.font = font;
}

setInterval(function(){
  draw();
  player.move(mouseP.x,mouseP.y);
},99);



draw();



document.oncontextmenu = function () {return false;}
function resize() {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  console.table({w:canvas.width, h:canvas.height});
  w = document.body.clientWidth;
  h = document.body.clientHeight;
  cx = w/2;
  cy = h/2;
  iw = min/max;
  ih = min/max;
}

window.onresize = resize;


var supportTouch = 'ontouchend' in document;
var TOUCHMOVE = supportTouch ? 'touchmove' : 'mousemove';
window.addEventListener(TOUCHMOVE, function(e) {
  if(e.touches) {
    ex = e.changedTouches[0].pageX;
    ey = e.changedTouches[0].pageY;
  } else {
    ex = e.clientX;
    ey = e.clientY;
  }
  player.move(ex,ey);
}, false );


window.addEventListener('click', function(ev) {
  player.set(ev.clientX,ev.clientY);
  return false;
}, false );

document.addEventListener('fullscreenchange',function(e){
  resize();
  setFont();
});

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

view-source:https://hi0a.com/demo/-js/js-canvas-grid-kokkurisan/