如何绘制基于2D数组的关卡？

Question

我正在尝试制作具有随机关卡生成的基本等距游戏。 我还没有涉及到它的随机或等距部分。（不过，对此的帮助将不胜感激）我现在只想在画布上绘制.png以进行基本关卡生成。 当我运行时，唯一的错误是“脚本错误”。 注意：我只是WEBGL游戏开发的初学者，因此任何建议都将不胜感激。

 public class main() { void setup() { var level = { [ [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,], [ 0, 0, 756, 756, 756, 756, 756, 756, 0, 0, 0,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 756, 756, 756, 756, 756, 756, 756, 756, 756, 756,], [ 0, 0, 756, 756, 756, 756, 756, 756, 0, 0, 0,], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,], [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,],] } void drawLevel() { var image=document.getElementById("tile"); var canvas=document.getElementById("floor"); var ctx = canvas.getContext("2d"); int rows = 11; int cols = 15; int [][] level = new int[cols][rows] for (int i = 0; i<cols; i++) { for (int j=0; j<rows; j++) { if (i = 756 && j = 756) { int i = ctx.x; int j = ctx.y; ctx.drawImage(image, x, y); } } } } } 

 .img{position:absolute; z-index:20;} #container { width:1920px; height:1080px; margin:0 auto; background: black; position:absolute; border:0px; border-radius:0px; } #gameCanvas { position: relative; margin: 0 auto; background: blue; border: 0px; border-radius: 0px; } 

 <!DOCTYPE html> <html> <head> <img src="756.png" id="tile"/> <style> html, body, canvas{ margin: 0; padding: 0; background: black; display:block; } canvas{ -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none } .page { margin: 0px; width: 1920px; height: 1080px; border: 0px; } </style> </head> <body> <div class="page" id="container" width="1920" height="1080"> <img class='img' src="https://gynvael.coldwind.pl/img/gwgc201819_overlay.png" alt="overlay" id="overlay"/> <div width="1025" height="769" style="position:absolute; top:182px; left:60px;"> <canvas id="floor" width="1025" height="769"></canvas> </div> </div> <link rel="stylesheet" href="styles.css"> <script> window.onerror=alert var canvas=document.getElementById("floor"); var ctx = canvas.getContext("2d"); canvas.width = 1025; canvas.height = 769; </script> <script src="main.js"></script> </body> </html>