Javascript array and object/classes

Question

i am trying to display three playing cards on the screen and for some reason everytime i run the code a type error appears and i have tried everything to try to fix it but nothing has worked. I think that the problem is in the array/object constructor but i think that everything is right inside of those.

"use strict";

function main(){
var cvs = document.getElementById("foo");
var ctx = foo.getContext("2d");
function Card(posX, posY, imgX, imgY){
    this.posX = posX;
    this.posY = posY;
    this.imgX = imgX;
    this.imgY = imgY;
    this.width = 97;
    this.height = 129;
}
Card.img = new Image();
Card.img.src = "allcards.png";
var cards = [new Card(0,0,0,0), new Card(400,400,194,258), new Card(200,200,291,387)];
var greaterX = false;
var lessX = false;
var greaterY = false;
var lessY = false;
var offsetX;
var offsetY;
setInterval(draw, 10);

function draw(){
    ctx.fillStyle="rgb(0,255,255)";
    ctx.clearRect(0,0,600,600);
    ctx.drawImage(Card.img,cards[1].imgX,cards[1].imgY,Card.width,Card.height,cards[1].posX, cards[1].posY);
    ctx.drawImage(Card.img,cards[2].imgX,cards[2].imgY,Card.width,Card.height,cards[2].posX, cards[2].posY);
}

}

What's the error? One problem is that you're using Card.width and Card.height which don't look like they've been defined. — Mark Rhodes
– Mark Rhodes, Commented Aug 29, 2012 at 19:14
there is a typeerror that always shows up on the 3rd line in the draw function — CRS
– CRS, Commented Aug 29, 2012 at 19:17
@MarkRhodes - The Card.width and Card.height are defined in the constructor — CRS
– CRS, Commented Aug 29, 2012 at 19:19
@CRS: No, they're not. cards[...].width is defined in the constructor, but Card.width isn't defined anywhere. — cHao
– cHao, Commented Aug 29, 2012 at 19:20
did you want, for example, cards[1].width instead of Cards.width? (same for height) — Erik Eidt
– Erik Eidt, Commented Aug 29, 2012 at 19:21

James · Accepted Answer · 2012-08-29 19:21:26Z

1

var ctx = foo.getContext("2d");

should this not be

var ctx = cvs.getContext("2d");

answered Aug 29, 2012 at 19:21

James

22.4k5 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bergi · Accepted Answer · 2012-08-29 19:52:40Z

You seem to have confused the static properties of the Card function object with those of the Card instances - the width and height properties are instance properties.

var cvs = document.getElementById("foo");
var ctx = cvs.getContext("2d");

function Card(posX, posY, imgX, imgY){
    this.posX = posX;
    this.posY = posY;
    this.imgX = imgX;
    this.imgY = imgY;
}
// default values/methods, accessible and overwritable on all instances:
Card.prototype.width = 97;
Card.prototype.height = 129;
Card.prototype.draw = function() {
    ctx.drawImage(Card.img, this.imgX, this.imgY, this.width, this.height, this.posX, this.posY);
};

// static property:
Card.img = new Image();
Card.img.src = "allcards.png";
Card.img.onload = draw;

var cards = [new Card(0,0,0,0), new Card(400,400,194,258), new Card(200,200,291,387)];

function draw(){
    ctx.fillStyle="rgb(0,255,255)";
    ctx.clearRect(0,0,600,600);
    for (var i=0; i<2; i++)
        cards[i].draw();
};

Collectives™ on Stack Overflow

Javascript array and object/classes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related