我該如何更改JavaScript對象的顏色？

Question

我創建了一個簡單的代碼，看起來有點像「不可能的遊戲」。我是新的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上的問題的意見 - 另一項決議是確保你調用每個fillRect函數之前fillStyle功能。請參閱下面的示例和小提琴（由OP提供）。

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

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