Как изменить цвет компонента при нажатии кнопки

im пытается сделать игру с картинкой в 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 использует правильный цвет. Вы хотите this.color, а не цвет. Теперь, когда у вас есть это, ваша кисть всегда будет отображаться с начальным цветом, указанным при создании. – 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; 
    } 
}

Обратите внимание, что я использовал глобальные переменные. Этот код разрешает ваше задание, но его можно импровизировать по-разному.

источник

2017-02-22 23:13:26

Спасибо за организацию моего кода, хотя в моем коде мне только нужно было ctx.fillStyle = this.color и цвета стали «желтыми», а не желтыми – TechEndling

Как изменить цвет компонента при нажатии кнопки

ответ

Смежные вопросы