Question

我试图在javascript中制作绘画游戏，但似乎无法改变'PaintBrush'组件的颜色。我想通过一个函数来完成它，并有一个按钮执行该功能onclick。除了如何让画笔改变颜色外，我把它全部整理好了。这很复杂所以请帮忙。这是我的代码： HTML：

<html>
<body onload="startGame()">
<br>
<button onclick="ThickRed()">Thick Red</button>
<button onclick="ThinRed()">Thin Red</button>
<button onclick="ThickYellow()">Thick Yellow</button>
<button onclick="ThinYellow()">Thin Yellow</button>
</html>

CSS：

canvas {
border: 1px solid #d3d3d3;
background-color: #f1f1f1;
}

使用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;
}

请帮忙！

Answer 1

我尝试按照面向对象的方式组织代码，遵循您的代码。

您还可以在JSfiddle中找到正在运行的示例 https://jsfiddle.net/rj1405/qa7q0b9m/

为简单起见，我有一个启动游戏的按钮（可以用文档加载替换）和2个按钮，红色和黄色。

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

你的CSS，

canvas { border: 1px solid #d3d3d3; background-color: #f1f1f1; }

这是主要的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;
     }
 }

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

Answer 2

使用字符串"yellow"代替Yellow或在文件顶部定义var Yellow = "yellow"。要反映具有所选颜色的context.fillStyle，请修改您的update功能，如下所示。差异为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);
        }

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

2 个答案: