CODEWITHSUNDEEP
javascripthtmlcanvas
L4undry
L4undry

Reputation: 201

Canvas won't update?

I am making an online checkers game.

I added piece moving capabilities and the pieces move, but they don't appear to move.

Here is a JSFiddle I made of my project: https://jsfiddle.net/y1s0uoq6/

When you click on a piece and then click on one of the options to move, the pieces x y coordinates update and they can be clicked at the new spot, but the checker does not appear at the new spot.

I update all of the checkers' positions with this:

for(var checker of this.checkers) {
    checker.draw();         
}

Yet the checkers still don't update graphically. Only their position seems to update.

Why is this? Can someone shed some light on this problem?

Upvotes: 0

Views: 78

Answers (1)

nnnnnn
nnnnnn

Reputation: 150080

The problem is this line within the .draw() function:

ctx.ellipse(x+32,y+32,28,28,45 * Math.PI/180,0,2 * Math.PI);

You are using x and y, which are the original coordinates used when the checker is created - they're the arguments from your Checker() constructor. You need to use this.x and this.y to get the current coordinates:

ctx.ellipse(this.x+32,this.y+32,28,28,45 * Math.PI/180,0,2 * Math.PI);

Updated demo: https://jsfiddle.net/y1s0uoq6/1/

Upvotes: 1

Related Questions