矩形类无法在画布上显示

时间：2018-11-09 21:17:10

标签： javascript canvas rendering

我正在尝试制作2D平台游戏，到目前为止一切正常，但是现在我试图让我创建的平台来回移动，所以我决定创建一个draw()方法在我的Platform类中以渲染平台：

var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
canvas.setAttribute('tabindex', 0);
canvas.focus();
canvas.addEventListener("keydown", movePlayer);

//Maybe I can get a class working?

class Platform {
  constructor(x, y, xS, yS, moveBool) {
    this.xPos = x;
    this.yPos = y;
    this.xSize = xS;
    this.ySize = yS;

    this.moveable = moveBool;
  }

  draw(ctx) {
    ctx.fillStyle = "red";
    ctx.fillRect(this.xPos, this.yPos, this.xSsize, this.ySsize);
  }

  get getX() {
    return this.xPos;
  }
  get getY() {
    return this.yPos;
  }
  get getxSize() {
    return this.xSize;
  }
  get getySize() {
    return this.ySize;
  }
  get getMoveable() {
    return this.moveable;
  }

  set moveRight(speed) {
    this.xPos = speed;
  }
}

//Platform array:
platformArray = [];

//Vars:

var x_new = 50;
var y_new = 50;

var isJumping = false;
var isColliding = false;

var speed = 5;

var keys = {
  up: false,
  right: false,
  left: false
};

function movePlayer(event) {
  switch (event.keyCode) {
    //Right key down:
    case 39:
      keys["right"] = true;
      break;
      //Left key down:
    case 37:
      keys["left"] = true;
      break;
      //Up key down:
    case 38:
      keys["up"] = true;
      isJumping = true;
      break;
  }
}

function keyUp(event) {
  switch (event.keyCode) {
    //Up key up:
    case 38:
      isJumping = false;
      keys["up"] = false;
      break;
      //Right key up:
    case 39:
      keys["right"] = false;
      break;
      //Left key up:
    case 37:
      keys["left"] = false;
      break;
  }

}

function boundsIntersect(x1, y1, x2, y2) {
  if (x1 > x2 - 50 && x1 < x2 + 200 && y1 < y2 && y1 > y2 - 55) {
    return true;
  }
  return false;
}

function update() {
  window.requestAnimationFrame(update);
  ctx.clearRect(0, 0, 900, 500);
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.fillRect(x_new, y_new, 50, 50);
  //Draw ground:
  ctx.beginPath();
  ctx.rect(0, 490, 900, 10);
  ctx.fillStyle = "green";
  ctx.fill();

  //PLayer movement:
  if (keys["up"] && !keys["right"] && !keys["left"]) {
    y_new -= speed;
  } else if (keys["right"] && !keys["up"]) {
    x_new += speed;
  } else if (keys["left"] && !keys["up"]) {
    x_new -= speed;
  } else if (keys["up"] && keys["right"]) {
    y_new -= speed;
    x_new += speed;
  } else if (keys["up"] && keys["left"]) {
    y_new -= speed;
    x_new -= speed;
  }

  if (y_new < 440 && isJumping == false && isColliding == false) {
    y_new += 5;
    y_previous = y_new - 5;
  }

  //Platforms:
  platform1 = new Platform(50, 300, 200, 10, true);
  platformArray.push(platform1);
  platform1.draw(ctx);

  platform2 = new Platform(300, 200, 200, 10, false);
  platformArray.push(platform2);

  platform3 = new Platform(400, 300, 200, 10, false);
  platformArray.push(platform3);

  //Platform intersections:
  platformArray.forEach(function(platform) {
    if (boundsIntersect(x_new, y_new, platform.getX, platform.getY) && isJumping == false) {
      isColliding = true;
      y_new -= 0.5;
    } else if (boundsIntersect(x_new, y_new, platform.getX, platform.getY) && isJumping == true) {
      isJumping = false;
      y_new += 11;
      isColliding = true;
    } else {
      isColliding = false;
    }
  });

  var platSpeed = 2;

  //Move platforms:
  platformArray.forEach(function(platform) {
    if (platform.getMoveable) {
      if (platform.getX > 0) {
        platform.moveRight = 300;
        platform.draw(ctx);
      }
    }
  });

  ctx.save();
  ctx.restore();
}

window.requestAnimationFrame(update);
update();
canvas {
  background: #eee;
}
<!DOCTYPE html>
<html>

<body>
  <canvas id="ctx" tabindex=0 width=900 height=500 style="border:1px solid #000000;" onkeypress="movePlayer(event)" onkeyup="keyUp(event)"></canvas>
</body>

</html>

无论如何，平台之所以存在是因为BoundsIntersect可以检测到它们，但是它们并没有在视觉上显示出来，我不确定为什么。任何帮助表示赞赏！

1 个答案:

答案 0 :(得分：1)

您的绘图功能有错字。您还将在底部两次调用override func viewDidLoad() { super.viewDidLoad() preferredContentSize = view.frame.size } 函数。这是固定平台的版本。请记住，您的平台似乎无法正常运行。但是，我认为这是一个不同的问题。

update()
var canvas = document.getElementById("ctx");
var ctx = canvas.getContext("2d");
canvas.setAttribute('tabindex', 0);
canvas.focus();
canvas.addEventListener("keydown", movePlayer);

//Maybe I can get a class working?

class Platform {
  constructor(x, y, xS, yS, moveBool) {
    this.xPos = x;
    this.yPos = y;
    this.xSize = xS;
    this.ySize = yS;

    this.moveable = moveBool;
  }

  draw(ctx) {
    ctx.fillStyle = "red";
    ctx.fillRect(this.xPos, this.yPos, this.xSize, this.ySize);
  }

  get getX() {
    return this.xPos;
  }
  get getY() {
    return this.yPos;
  }
  get getxSize() {
    return this.xSize;
  }
  get getySize() {
    return this.ySize;
  }
  get getMoveable() {
    return this.moveable;
  }

  set moveRight(speed) {
    this.xPos = speed;
  }
}

//Platform array:
platformArray = [];

//Vars:

var x_new = 50;
var y_new = 50;

var isJumping = false;
var isColliding = false;

var speed = 5;

var keys = {
  up: false,
  right: false,
  left: false
};

function movePlayer(event) {
  switch (event.keyCode) {
    //Right key down:
    case 39:
      keys["right"] = true;
      break;
      //Left key down:
    case 37:
      keys["left"] = true;
      break;
      //Up key down:
    case 38:
      keys["up"] = true;
      isJumping = true;
      break;
  }
}

function keyUp(event) {
  switch (event.keyCode) {
    //Up key up:
    case 38:
      isJumping = false;
      keys["up"] = false;
      break;
      //Right key up:
    case 39:
      keys["right"] = false;
      break;
      //Left key up:
    case 37:
      keys["left"] = false;
      break;
  }

}

function boundsIntersect(x1, y1, x2, y2) {
  if (x1 > x2 - 50 && x1 < x2 + 200 && y1 < y2 && y1 > y2 - 55) {
    return true;
  }
  return false;
}

function update() {
  window.requestAnimationFrame(update);
  ctx.clearRect(0, 0, 900, 500);
  ctx.fillStyle = "black";
  ctx.beginPath();
  ctx.fillRect(x_new, y_new, 50, 50);
  //Draw ground:
  ctx.beginPath();
  ctx.rect(0, 490, 900, 10);
  ctx.fillStyle = "green";
  ctx.fill();

  //PLayer movement:
  if (keys["up"] && !keys["right"] && !keys["left"]) {
    y_new -= speed;
  } else if (keys["right"] && !keys["up"]) {
    x_new += speed;
  } else if (keys["left"] && !keys["up"]) {
    x_new -= speed;
  } else if (keys["up"] && keys["right"]) {
    y_new -= speed;
    x_new += speed;
  } else if (keys["up"] && keys["left"]) {
    y_new -= speed;
    x_new -= speed;
  }

  if (y_new < 440 && isJumping == false && isColliding == false) {
    y_new += 5;
    y_previous = y_new - 5;
  }

  //Platforms:
  platform1 = new Platform(50, 300, 200, 10, true);
  platformArray.push(platform1);
  platform1.draw(ctx);

  platform2 = new Platform(300, 200, 200, 10, false);
  platformArray.push(platform2);

  platform3 = new Platform(400, 300, 200, 10, false);
  platformArray.push(platform3);

  //Platform intersections:
  platformArray.forEach(function(platform) {
    if (boundsIntersect(x_new, y_new, platform.getX, platform.getY) && isJumping == false) {
      isColliding = true;
      y_new -= 0.5;
    } else if (boundsIntersect(x_new, y_new, platform.getX, platform.getY) && isJumping == true) {
      isJumping = false;
      y_new += 11;
      isColliding = true;
    } else {
      isColliding = false;
    }
  });

  var platSpeed = 2;

  //Move platforms:
  platformArray.forEach(function(platform) {
    if (platform.getMoveable) {
      if (platform.getX > 0) {
        platform.moveRight = 300;
        platform.draw(ctx);
      }
    }
  });

  ctx.save();
  ctx.restore();
}

window.requestAnimationFrame(update);
canvas {
  background: #eee;
}

相关问题
最新问题