不错的示例网格可以位于此站点中:https://playgameoflife.com,您可以在其中单击并在该网格中移动。所以我想学习如何制作这样一个无尽的网格,以便你可以继续前进。
片段: https: //jsfiddle.net/omar_red/wfsLuynd/1/
canvas = document.querySelector('.field');
ctx = canvas.getContext('2d');
canvas.width = window.screen.width;
canvas.height = window.screen.height;
for (let x = 0.5; x < canvas.width; x += 10) {
ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height);
}
for (let y = 0.5; y < canvas.height; y += 10) {
ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y);
}
ctx.strokeStyle = "#888";
ctx.stroke();Run Code Online (Sandbox Code Playgroud)
body {
margin: 0;
padding: 0;
}Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Infinite Grid</title>
</head>
<body>
<canvas class="field"></canvas>
</body>
</html>Run Code Online (Sandbox Code Playgroud)