Javascript 如何在单击按钮时更改组件颜色

我试图用javascript制作一个绘画游戏，但似乎无法更改“画笔”组件的颜色。我想通过一个函数来实现它，并让一个按钮在单击时实现该函数。除了如何让画笔改变颜色，我已经把一切都整理好了。这很复杂，请帮忙。这是我的密码： HTML:

Javascript:

document.onkeydown = checkKey;
function startGame() {
GameArena.start();
}
var PaintBrush; 
var GameArena = {
canvas : document.createElement("canvas"),
start : function() {
    this.canvas.width = 1280;
    this.canvas.height = 480;
    this.context = this.canvas.getContext("2d");
    document.body.insertBefore(this.canvas, document.body.childNodes[0]);
  this.interval = setInterval(updateGameArea, 20);
},
clear : function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
}
function startGame() {
GameArena.start();
PaintBrush = new component(30, 30, "red", 10, 320);
}
function component(width, height, color, x, y) {
this.width = width;
this.height = height;
this.speedX = 0;
this.speedY = 0;
this.x = x;
this.y = y; 
this.color = color;
this.update = function(){
ctx = GameArena.context;
ctx.fillStyle = color;
ctx.fillRect(this.x, this.y, this.width, this.height);
}
this.newPos = function() {
    this.x += this.speedX;
    this.y += this.speedY; 
} 

}
function updateGameArea() {
PaintBrush.newPos();
PaintBrush.update();
}
function checkKey(e) {

if (e.keyCode == '38') {
    // up arrow
   PaintBrush.speedY -= 1;
}
else if (e.keyCode == '40') {
    // down arrow
  PaintBrush.speedY += 1;
}
else if (e.keyCode == '37') {
   // left arrow
  PaintBrush.speedX -= 1;
}
else if (e.keyCode == '39') {
   // right arrow
  PaintBrush.speedX += 1;
}

}
function ThickYellow() {
PaintBrush.color = Yellow;
}

请帮忙

使用字符串

“yellow”

而不是

yellow

或在文件顶部定义

var yellow=“yellow”

。 要反映

上下文。使用选定的颜色填充样式

，请按如下所示修改

更新

功能。区别在于

ctx.fillStyle=this.color

不仅仅是

color

this.update = function () {
            ctx = GameArena.context;
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }

使用字符串

“yellow”

而不是

yellow

或在文件顶部定义

var yellow=“yellow”

。 要反映

上下文。使用选定的颜色填充样式

，请按如下所示修改

更新

功能。区别在于

ctx.fillStyle=this.color

不仅仅是

color

this.update = function () {
            ctx = GameArena.context;
            ctx.fillStyle = this.color;
            ctx.fillRect(this.x, this.y, this.width, this.height);
        }

---

我尝试以位面向对象的方式组织代码，下面是您的代码

您还可以在JSFIDLE中找到正在运行的示例

为了简单起见，我有一个启动游戏的按钮（你可以替换为on document load）和两个按钮，红色和黄色

<button id="btn">StartGame</button>
<button id="btnRed" >Thick Red</button>
<button id="btnYellow">Thick Yellow</button>

这里是主要的javascript

document.onkeydown=checkKey

// Global variables
var btn = document.getElementById('btn');
var btnYellow = document.getElementById('btnYellow');
var btnRed = document.getElementById('btnRed');
var paintBrush;

// Main GameArena object
var GameArena = {
    canvas : document.createElement("canvas"),
    start : function() {
            this.canvas.width = 1280;
            this.canvas.height = 480;
            this.context = this.canvas.getContext("2d");
         document.body.insertBefore(this.canvas,document.body.childNodes[0]);
            this.interval = setInterval(updateGameArea, 20);
        },
   clear : function() {
    this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
    }
 };

// Paint Brush Constructor
var PaintBrush = function (width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.color = color;
    this.speedX = 0;
    this.speedY = 0;

    this.update = function(){
        ctx = GameArena.context;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    };

   this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY; 
    };
 }

 PaintBrush.prototype.setColor = function(color){
     this.color = color;
     this.update();
 };  


// On click Button events
 btn.onclick = function(e) {
    GameArena.start();
    paintBrush = new PaintBrush(30, 30, "red", 10, 320);
 };

 btnYellow.onclick = function(e) {
    paintBrush.setColor('yellow');
 };

 btnRed.onclick = function(e) {
    paintBrush.setColor('red');
 };

 // Other methods
 function updateGameArea() {
    paintBrush.newPos();
    paintBrush.update();
 }

 function checkKey(e) {
     if (e.keyCode == '38') {
       paintBrush.speedY -= 1;
     }
     else if (e.keyCode == '40') {
       paintBrush.speedY += 1;
     }
     else if (e.keyCode == '37') {
       paintBrush.speedX -= 1;
     }
     else if (e.keyCode == '39') {
       paintBrush.speedX += 1;
     }
 }

---

请注意，我使用了全局变量。这段代码解决了您的问题，但可以通过多种方式即兴编写。

我尝试以位面向对象的方式组织代码，下面是您的代码

您还可以在JSFIDLE中找到正在运行的示例

为了简单起见，我有一个启动游戏的按钮（你可以替换为on document load）和两个按钮，红色和黄色

<button id="btn">StartGame</button>
<button id="btnRed" >Thick Red</button>
<button id="btnYellow">Thick Yellow</button>

这里是主要的javascript

document.onkeydown=checkKey

// Global variables
var btn = document.getElementById('btn');
var btnYellow = document.getElementById('btnYellow');
var btnRed = document.getElementById('btnRed');
var paintBrush;

// Main GameArena object
var GameArena = {
    canvas : document.createElement("canvas"),
    start : function() {
            this.canvas.width = 1280;
            this.canvas.height = 480;
            this.context = this.canvas.getContext("2d");
         document.body.insertBefore(this.canvas,document.body.childNodes[0]);
            this.interval = setInterval(updateGameArea, 20);
        },
   clear : function() {
    this.context.clearRect(0,0,this.canvas.width,this.canvas.height);
    }
 };

// Paint Brush Constructor
var PaintBrush = function (width, height, color, x, y) {
    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
    this.color = color;
    this.speedX = 0;
    this.speedY = 0;

    this.update = function(){
        ctx = GameArena.context;
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    };

   this.newPos = function() {
        this.x += this.speedX;
        this.y += this.speedY; 
    };
 }

 PaintBrush.prototype.setColor = function(color){
     this.color = color;
     this.update();
 };  


// On click Button events
 btn.onclick = function(e) {
    GameArena.start();
    paintBrush = new PaintBrush(30, 30, "red", 10, 320);
 };

 btnYellow.onclick = function(e) {
    paintBrush.setColor('yellow');
 };

 btnRed.onclick = function(e) {
    paintBrush.setColor('red');
 };

 // Other methods
 function updateGameArea() {
    paintBrush.newPos();
    paintBrush.update();
 }

 function checkKey(e) {
     if (e.keyCode == '38') {
       paintBrush.speedY -= 1;
     }
     else if (e.keyCode == '40') {
       paintBrush.speedY += 1;
     }
     else if (e.keyCode == '37') {
       paintBrush.speedX -= 1;
     }
     else if (e.keyCode == '39') {
       paintBrush.speedX += 1;
     }
 }

---

请注意，我使用了全局变量。此代码可以解决您的问题，但可以通过多种方式即兴创作。

两件事，什么是黄色？尝试“黄色”，更新笔刷颜色后，确保ctx.fillStyle使用正确的颜色。你想要这个。颜色，不是颜色。按照目前的方式，画笔将始终使用创建时指定的初始颜色进行渲染？尝试“黄色”，更新笔刷颜色后，确保ctx.fillStyle使用正确的颜色。你想要这个。颜色，不是颜色。按照您当前的使用方式，您的画笔将始终使用创建时指定的初始颜色进行渲染。感谢您组织我的代码，尽管在我的代码中，我只需要使用ctx.fillStyle=this.color，并使颜色变为“黄色”，而不是黄色谢谢您组织我的代码，虽然在我的代码中，我只需要将ctx.fillStyle=this.color设置为“黄色”，而不是黄色