I would like to create a class with an array of object in the constructor. The idea is to create rects in a canvas with the values inside the objects.
I have this array:
const blueBoxs = [
{ x: 38, y: 31, w: 50, h: 50 },
{ x: 47, y: 31, w: 25, h: 19 },
]
I tried the following:
class Collision {
constructor (boxs) {
this.boxs=boxs;
};
createBox(boxs=[]){
for (let box of boxs) {
ctx.fillStyle = 'blue'
ctx.fillRect(box.x, box.y, box.w, box.h)
}
return
};
};
let createBluebox= new Collision(blueBoxs);
createBluebox.createBox();
Thanks for your help.
As already written, the addition of this works. See example with this.boxs
const blueBoxs = [
{
x: 38,
y: 31,
w:50,
h:50,
},
{
x: 47,
y: 31,
w:25,
h:19,
} ]
class Collision {
constructor (boxs) {
this.boxs=boxs;
};
createBox(boxs=[]){
for (let box of this.boxs) {
ctx.fillStyle = 'blue'
ctx.fillRect(box.x, box.y, box.w, box.h)
}
return
};
};
let canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
let createBluebox= new Collision(blueBoxs);
createBluebox.createBox();<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>I forgot the this keyword everywhere. Thanks for all!
class Collision {
constructor (boxs, ctx) {
this.boxs=boxs;
this.ctx=ctx;
};
createBox(){
for (let box of this.boxs) {
this.ctx.fillStyle = 'blue'
this.ctx.fillRect(box.x, box.y, box.w, box.h)
}
return
};
};
let createBluebox= new Collision(blueBoxs, ctx);
createBluebox.createBox();