Question

所以我试图为我正在为一个项目（类似于falldown）制作的游戏实现平台，并创建了包含所有可能平台的多个数组（画布是360，所以如果有的话platform [i] == 1它画一个矩形）

＆＃13;

var canvas;
var ctx;
var isPlaying = false;

window.onload = function(){
  canvas= document.getElementById("gamesCanvas");
  ctx = canvas.getContext("2d");
  var fps = 60;
  setInterval(function(){    
  }, 1000/fps);
  createMenu();
  canvas.addEventListener('click', getClicks.bind(this), false)
    //canvas.addEventListener("mousemove", getPos)    
}

function initialise(){
  isPlaying = true;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  createRect(0,0, canvas.width, canvas.height, 'black');
  createPlatforms();
}

function createPlatforms(){
  x = randint(1,2);
  console.log(x)
  var i;
  var pos = -60;
  var platform1 = [0,1,1,1,1,1];
  var platform2 = [1,0,1,1,1,1];
  var platform3 = [1,1,0,1,1,1];
  var platform4 = [1,1,1,0,1,1];
  var platform5 = [1,1,1,1,0,1];
  var platform6 = [1,1,1,1,1,0];
  if(x==1){  
    for (i=0; i<platform1.length; ++i) {
      var pos = (pos+60); 
      if(platform1[i] == 1){
        createRect(pos, 60, 60,5, 'white');       
      }
    } 
  }
  else if(x==2){
    for (i=0; i<platform2.length; ++i){
      var pos = (pos+60);
      if (platform2[i] ==2){
        createRect(pos,60,75,5,'white');
      }
    }
  }
}

function randint(min, max) {
    return ~~(Math.random() * (max - min + 1) + min);
}

function background(color) {
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function createMenu(){
    background("black");
    if (!isPlaying) {
        ctx.font = "60px monospace";
        ctx.fillStyle = "white";
        ctx.fillText("FallDown", 40, 130);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("PLAY", 130, 260);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("LEADERBOARD", 50, 340);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("SETTINGS", 90, 420);
    }
}

function createRect(leftX, topY, width, height, color){
    ctx.fillStyle = color;
    ctx.fillRect(leftX, topY, width, height);

}

function getClicks(evt) {
    var x = evt.offsetX;
    var y = evt.offsetY;
    if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) {
        initialise()
    }
}

＆＃13;

<html>
  <head>
    <title>Falldown</title>
  </head>
  <body>
    <canvas id="gamesCanvas" width="360" height="640"></canvas>
    <!--script src="test.js"></script-->
  </body>
</html>

＆＃13;

但是，如果x> 1（因此基本上需要运行其他if语句），它不会绘制任何内容。

我正在测试是否是我可以解决的问题，但是，我设法意识到，如果if语句获得了else if语句的内容，那么它将把rects绘制在正确的位置，所以这种情况（platform2）将被绘制。

我设法缩小了问题范围，但我不确定如何解决问题。我有使用python的经验但从未经历过这样的事情

只是让你知道我不能只使用else语句，因为我必须实现6个平台，如果我只是使用if而不是那个意味着我只能绘制6个平台中的2个< / p>

Answer 1

您可以在javascript中使用switch语句来处理大量案例。

示例：

switch(x){
    case 1: 
        //logic here
        break;
    case 2:
        // and so on
        break:
    default:
        break;
}

您可以根据需要添加任意数量的案例。这样就无需使用if else。

希望这有帮助！

Answer 2

你最初的问题不是if / else ..而是if inside ..

但是 - ＆gt; if (platform2[i] ==2){这个想成为if (platform2[i] == 1){

但是说这一切，你的createPlatforms只创建了一个平台。它并不真正需要任何If / else或数组。

下面我修改了createPlatforms，只使用了两个for循环。

＆＃13;

var canvas;
var ctx;
var isPlaying = false;

window.onload = function(){
  canvas= document.getElementById("gamesCanvas");
  ctx = canvas.getContext("2d");
  var fps = 60;
  setInterval(function(){    
  }, 1000/fps);
  createMenu();
  canvas.addEventListener('click', getClicks.bind(this), false)
    //canvas.addEventListener("mousemove", getPos)    
}

function initialise(){
  isPlaying = true;
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  createRect(0,0, canvas.width, canvas.height, 'black');
  createPlatforms();
}

function createPlatforms(){
  for (var y = 0; y < 8; y ++) {
    var x = randint(0, 5), pos = 0;    
    for (var i = 0; i < 6; i ++) {
      if (i !== x) {
        createRect(pos, 60 + y*60 ,75,5,'white');
      }
      pos += 60;
    } 
  }
}

function randint(min, max) {
    return ~~(Math.random() * (max - min + 1) + min);
}

function background(color) {
    ctx.fillStyle = color;
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function createMenu(){
    background("black");
    if (!isPlaying) {
        ctx.font = "60px monospace";
        ctx.fillStyle = "white";
        ctx.fillText("FallDown", 40, 130);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("PLAY", 130, 260);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("LEADERBOARD", 50, 340);

        ctx.font = "34px Arial";
        ctx.fillStyle = "white";
        ctx.fillText("SETTINGS", 90, 420);
    }
}

function createRect(leftX, topY, width, height, color){
    ctx.fillStyle = color;
    ctx.fillRect(leftX, topY, width, height);

}

function getClicks(evt) {
    var x = evt.offsetX;
    var y = evt.offsetY;
    if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) {
        initialise()
    }
}

＆＃13;

<html>
  <head>
    <title>Falldown</title>
  </head>
  <body>
    <canvas id="gamesCanvas" width="360" height="640"></canvas>
    <!--script src="test.js"></script-->
  </body>
</html>

＆＃13;

否则If语句永远不会运行

2 个答案: