Else If 语句从不运行

Question

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

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()
    }
}

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

然而，如果 x>1（所以基本上运行需要一个 else if 语句）它不绘制任何东西。

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

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

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

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..

但是对于 -> if (platform2[i] ==2){ 这应该是 if (platform2[i] == 1){

但是说了这么多，您的 createPlatforms 只是创建了一个平台。它实际上并不需要任何 If/else 或数组。

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

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()
    }
}

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

Else If 语句从不运行

Else If statement never runs

javascript

if-statement

rect