Question

我有一个简单的js程序它为游戏创建基于图块的地图。

整个画布都是绿色的，但不应该发生画布上的网格应根据其单元格是0还是1

进行着色

var tileW = 40,
  tileH = 40;
var mapW = 10,
  mapH = 10;

var gameMap = [
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
  [0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
  [0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
  [0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
  [0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
  [0, 1, 0, 0, 0, 0, 0, 1, 0, 0],
  [0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
  [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

function draw_map() {
  for (var x = 0; x < mapW; x++) {
    for (var y = 0; y < mapH; y++) {
      switch (gameMap[y][x]) {
        case 0:
          ctx.fillStyle = "#999787";
        case 1:
          ctx.fillStyle = "#ccffcc";
      }
      ctx.fillRect(x * tileW, y * tileH, tileW, tileH); //->>?? this part is creating problem
    }
  }
}
draw_map();

<canvas id="canvas" width="400" height="400" style="border:1px solid black;">

Answer 1

您在switch语句中遗漏了break，因此它从黑色变为绿色。试试这个。

      switch(gameMap[y][x]) {
        case 0:
           ctx.fillStyle="#999787";
           break;
        case 1:
           ctx.fillStyle="#ccffcc"; 
           break;
      }

Answer 2

你错过了休息时间;关于开关的陈述：

 switch (gameMap[y][x]) {
    case 0:
      ctx.fillStyle = "#999787";
      break; // <------- here
    case 1:
      ctx.fillStyle = "#ccffcc";
      break; // <------- here
  }

Answer 3

<html>
<body>
<canvas id="canvas" width="400" height="400" style="border:1px solid black;">
</body>
<script>

var tileW=40, tileH=40;
var mapW=10, mapH=10;

var gameMap = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 1, 0, 0, 0, 1, 0, 0, 0, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
[0, 1, 0, 1, 0, 0, 0, 1, 1, 0],
[0, 1, 1, 1, 1, 1, 1, 1, 1, 0],
[0, 1, 0, 0, 0, 0, 0, 1, 0, 0],
[0, 1, 1, 1, 0, 1, 1, 1, 1, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

function draw_map(){
    for(var x=0; x<mapW; x++) {
        for(var y=0; y<mapH; y++) {
          switch(gameMap[y][x]) {
            case 0:
               ctx.fillStyle="#999787";
               ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
               break;
            case1:
               ctx.fillStyle="#ccffcc";
               ctx.fillRect(x*tileW, y*tileH, tileW, tileH);
               break;
          }

        }
     }
}
draw_map();
</script>

</html>

在案例结束时，您需要在切换时使用break;语句呈现每个图块。

canvas fillRect不起作用

3 个答案: