¡Buenos días comunidad!
He estado codificando en JavaScript por menos de 1 año y estoy obsesionado con un pequeño problema. Estoy creando una simulación que le permite al usuario elegir entre 2 formas que están coloreadas con una variedad de colores para cada forma. Cuando se hace clic en uno, ambos se vuelven a colorear con un nuevo par. Ni siquiera he llegado a la parte de llevar el puntaje, pero espero que al comunicarme con alguien pueda ayudarme a guiarme en la dirección correcta.
Nota: He estado codificando, eliminando, codificando y mezclando cosas. No quería cambiarlo más porque está más cerca de lo que quiero actualmente. ¡LLAMADA DE SOCORRO!
PS Me doy cuenta de que es un poco desordenado ahora. Supongo que eso es lo que sucede en el mundo del código (Al principio)
Sé amable, jaja... Me bajé por la madriguera del conejo.
const canvas = document.querySelector('canvas'); const ctx = canvas.getContext('2d'); canvas.width = "400"; canvas.height = "200"; canvas.style.backgroundColor = 'black'; const color = ['#f00','#f60','#ff0','#0f0','#0ff','#60f','#a0f'] class Shape{ constructor(x, y, size, color, key){ this.x = x; this.y = y; this.radius = size; this.color = color; this.key = key; } clicked(pX,pY){ let d = dist(pX,pY, this.x, this.y) if (d < this.radius){ return console.log("True"); } else { return console.log("False"); } } draw(ctx){ ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false); ctx.strokeStyle = 'white'; ctx.lineWidth = 2; ctx.fillStyle = newColor(); ctx.fill(); ctx.stroke(); ctx.closePath(); const key = 0; ctx.key = key + 1 } } let group = [ ]; function setup( ){ for(let i = 0; i < 2; i++){ let x = 125 + 150 * i let y = 100 let size = 40 let key = 1 * i let color = newColor(); let circle = new Shape(x, y, size, color, key); circle.draw(ctx); group.push(circle); } } canvas.addEventListener('click', ()=>{ console.log("canvas") }) function newColor(){ var randomColor = color[Math.floor(Math.random() * color.length)] console.log(randomColor) return randomColor } setup( );Bien, di un paso atrás y resolví el problema inicial. Esto funciona hasta ahora, si alguien tiene algún consejo sobre cómo hacer el "círculo" del objeto a menos que ya lo esté. No pude console.log() esto. Puede que me esté perdiendo una sola cosa.
const canvas = document.querySelector('canvas') const ctx = canvas.getContext('2d') canvas.width = "800"; canvas.height = "600"; canvas.style.backgroundColor = "black"; let group = [] function Shape(x, y, size, color) { this.x = x; this.y = y; this.size = size; this.color = color; this.n = function (){ return this.x, this.y, this.size, this.color }; } function selectColor(color){ var letters = '0123456789ABCDEF'; var color = '#' for (var i = 0; i < 3; i++) color += letters[(Math.floor(Math.random() * 16))]; return color } function draw(x, y, size, color){ let circle = new Object(); new Shape(x, y, size, color); for(var i = 0; i < 2; i++){ let x = canvas.height/2 + 200 * i; let y = canvas.width / 2.5; let size = 40; ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI * 2, false); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; let color = selectColor(); ctx.fillStyle = selectColor(); ctx.fill(); ctx.stroke(); ctx.closePath(); group.push(circle); // console.log(x, y, size, color) } return circle, x, y, size, color } draw();