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>

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

0 个答案: