如何更改按鈕上的組件顏色點擊

即時通訊嘗試在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; 
}

請幫幫忙！

來源

2017-02-22 TechEndling

兩件事，什麼是黃色？嘗試「黃色」，更新刷子顏色後，確保ctx.fillStyle使用正確的顏色。你想要這個顏色，而不是顏色。您目前使用的方式，您的畫筆將始終以創建時指定的初始顏色進行渲染。 – nick

使用字符串"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); 
     }

來源

2017-02-22 22:38:14 Paks

我試圖按照面向對象的方式組織代碼，這裏遵循你的代碼。

您還可以找到的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; 
    } 
}

請注意，我已經使用了全局變量。這段代碼解決了你的quession，但它可以用許多方法即興創作。

來源

2017-02-22 23:13:26

感謝您組織我的代碼，儘管在我的代碼中我只需要有ctx.fillStyle = this.color，並且顏色變成「黃色」而不是黃色 – TechEndling

如何更改按鈕上的組件顏色點擊

回答

相關問題