if (tim) { clearInterval(tim); } var gt1=window.location+'GAMETILESx1.png'; //detail var gt2=window.location+'GAMETILESx2.png'; //collision var w=500;var h=500;var g=450 var tsz=100;//tile sizes var tim; var head=document.getElementsByTagName("body")[0]; if (!ctx) { var canvas=document.createElement('canvas'); canvas.onmousemove = function(e){mm(e)}; canvas.id="canv"; canvas.width=w;canvas.height=h; canvas.style.zIndex= 8; canvas.style.position ="fixed"; canvas.style.top="10";canvas.style.right="10"; canvas.style.border="1px solid"; head.appendChild(canvas); var c = document.getElementById("canv"); var ctx = c.getContext("2d"); } //load collision image var colz=new Image(); colz.src=gt2; colz.src=gt1;//test colz.onload = function() { drw(1); tim=setInterval(function(){ drw(0); }, 100); }; function mm(e) { var rect = canvas.getBoundingClientRect(); px=e.clientX- rect.left;py=e.clientY- rect.top; } function drtl(tlx,tly,lox,loy,ofx,ofy) { tsz=90; //tile size (sq) //lox=0; loy=0; //tile grid location //tlx=2; tly=9; //exact tile ctx.drawImage(colz, tlx*tsz, tly*tsz, tsz, tsz, ofx-tsz+(lox*tsz), ofy-tsz+(loy*tsz), tsz, tsz); } function drw(zz) { //for loop to draw tiles //console.log('hi'); if (zz!=1) { ofx=Math.floor((Math.random()*10)); ofy=Math.floor((Math.random()*10)); for (yyy=0;yyy<7;yyy++) { for (xxx=0;xxx<7;xxx++) { drtl(8,5,xxx,yyy,ofx,ofy); } } } else { //head.appendChild(colz); } }