Question

我创建了一个简单的代码，看起来有点像＃34; Impossible Game＆＃34;。我是javascript的新手，所以我的问题可能听起来有点奇怪，但我已经创建了一些对象，就像你在下面看到的那样。当我用ctx.fillstyle更改颜色时，我的所有对象都会更改此特定颜色。如何为每个对象赋予不同的颜色？

谢谢;）

var PlayerX;
var Blocka;
var Ground

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

var Gamespeed = 5;
var Gravity = 0.9;
var Score = 0;
var velocity = 0.01;
var jumping;

PlayerX = new Player();
Blocka = new Block(1);
Ground = new Gameground();

setInterval(Update, 20);

function startGame() {

}

function Player() {
  // this staat voor verwijzing naar zichzelf
  this.width = 30;
  this.height = 50;
  this.x = canvas.width / 4;
  this.y = canvas.height / 3 * 2;
  this.draw = function() {
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }

}

function Block(kolb) {
  this.width = 20;
  this.height = 40;
  this.show = true;
  //this.x = canvas.width/2;
  this.x = canvas.width + 20;
  this.y = (canvas.height / 3 * 2) + 10;
  this.draw = function() {
    this.move();
    if (this.show) {
      if (kolb == 1) {
        ctx.fillRect(this.x, this.y, this.width, this.height);
      }
    }
  }
  this.move = function() {
    this.x -= Gamespeed;
    this.death();
  }
  this.death = function() {
    if (this.x <= 20) {
      this.show = false;
    }
  }
}

function Gameground() {
  // this staat voor verwijzing naar zichzelf
  this.width = 800;
  this.height = 150;
  this.x = 0;
  this.y = 450;
  this.draw = function() {
    ctx.fillStyle = "#00FFBF"
    ctx.fillRect(this.x, this.y, this.width, this.height);
  }
}

function Update() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  Blocka.draw();
  PlayerX.draw();
  if (PlayerX.x < Blocka.x + Blocka.width &&
    PlayerX.x + PlayerX.width > Blocka.x &&
    PlayerX.y < Blocka.y + Blocka.height &&
    PlayerX.height + PlayerX.y > Blocka.y) {
    // collision detected!
    ctx.fillStyle = "#FF0000";
  }

  Ground.draw();
}

window.addEventListener("keydown", checkKeyPressed, false);

function checkKeyPressed(e) {
  if (e.keyCode == "32") { //kijkt of de spatiebalk is ingedrukt

    var interval1, interval2, velo, tijd;

    velo = 0.00001;

    tijd = 20;
    interval1 = setInterval(plus, tijd);

    function plus() {

      if (velo < 20) {
        velo += 1.5;
      } else {
        velo -= 1.5;
      }

      if (PlayerX.y > 480) {
        clearInterval(interval1);
        interval2 = setInterval(min, tijd);
      }

      PlayerX.y += velo;
      console.log(PlayerX.y);
    }

    function min() {

      if (velo < 20) {
        velo += 1.5;
      } else {
        velo -= 1.5;
      }

      if (PlayerX.y < 430) {
        clearInterval(interval2);
      }

      PlayerX.y -= velo;
      console.log(PlayerX.y);
    }
  }
}

Answer 1

您可以在个别颜色更改之前和之后使用ctx.save();和ctx.restore();。

这将在更改颜色之前保存当前上下文状态，然后在绘制一个特定矩形之后，在绘制其他矩形之前将其恢复为原始状态。

见下文。

ctx.save();
ctx.fillStyle = "#00FFBF";
ctx.fillRect(this.x, this.y, this.width, this.height);
ctx.restore();

---编辑---

根据对OP问题的评论 - 另一个解决方案是确保在每个fillStyle函数之前调用fillRect函数。参见下面的示例和小提琴（由OP提供）。

this.draw = function(){ 
  ctx.fillStyle = "#00FFBF"; 
  ctx.fillRect(this.x, this.y, this.width, this.height); 
}

这是OP的小提琴 - https://jsfiddle.net/Nielsvangils/v9hL9d3k/

如何更改javascript对象的颜色？

1 个答案: