どうすればjavascriptオブジェクトの色を変更できますか？

Question

"Impossible Game"のような単純なコードを作成しました。私はjavascriptで新しいので、私の質問は少し奇妙に聞こえるかもしれませんが、私はあなたが下に見ることができるようにいくつかのopjectsを作成しました。 ctx.fillstyleで色を変更すると、すべてのオブジェクトがこの特定の色を変更します。どのように私は各オブジェクトに異なる色を与えることができますか？

おかげで、あなたはあなたの個々の色の変化の前と後ctx.save();とctx.restore();を使用することができます）

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

。

これは、色を変更する前に現在のコンテキスト状態を保存し、特定の1つの矩形が描画された後、元の状態に復元します。

たとえば以下を参照してください。

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

--- EDIT --- OPの質問にコメントを1として

- 別の解像度を使用すると、各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/