|
javascript:(function(){let e={x:0,y:0},t=document.querySelector(".viewOnline2DContainer"),n=t?t.querySelector("canvas"):null;if(!n)return void console.error("Canvas not found in the specified container!");let a=n.getContext("2d"),l=33,c=new Set,o=Math.floor(n.height/l),r=Math.floor(n.width/l),i=a.getImageData(0,0,n.width,n.height);function d(){a.strokeStyle="rgba(0,0,255,0.7)",a.lineWidth=6,a.strokeRect(e.x*l,e.y*l,l,l)}function s(){c.forEach((e=>{let[t,n]=e.split(",").map(Number);a.fillStyle="rgba(0,0,255,0.2)",a.fillRect(t*l,n*l,l,l)}))}function w(t){let{key:n}=t;"ArrowUp"!==n&&"w"!==n|| (e.y=Math.max(0,e.y-1)),"ArrowDown"!==n&&"s"!==n||(e.y=Math.min(o-1,e.y+1)),"ArrowLeft"!==n&&"a"!==n||(e.x=Math.max(0,e.x-1)),"ArrowRight"!==n&&"d"!==n||(e.x=Math.min(r-1,e.x+1)),"q"===n&&((n=`${e.x},${e.y}`),c.has(n)?c.delete(n):c.add(n)),requestAnimationFrame((()=>{a.putImageData(i,0,0),d(),s()}))}window.addEventListener("keydown",w),d();})(); |