Good Morning Community!
I have been coding in JavaScript for < 1 year now and I am getting hung up on a small problem. I am creating a simulation that allows a user to choose between 2 shapes that are colored with an array of colors for each shape. When one is clicked, both recolor with a new pair. I haven't even gotten to the keeping score portion, but I hope by reaching out someone can help guide me in the right direction.
Note: I have been coding, deleting, coding, and mixing things up. I didn't want to change it further because it is closer to what I want currently. S.O.S!
P.S. I realize that it is a bit messy now. I guess that's what happens in the world of code(In the beginning)
Be Gentle HAHA... I went down the rabbit hole
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( );
Okay, I took a step back and solved the initial issue. This works so far, If anyone has any advice on how to make the "circle" the object unless it already is. I couldn't console.log() this. I may be missing just one thing.
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();