javascript - Canvas translate values are mysteriously doubling themselves - some things drawing in the wrong place but not others -


i'm making little canvas game , adding in power ups player can collect. here's use make them appear:

thepowerups.foreach ( function(t)  {     c.beginpath();     c.save();     c.translate(t.x,t.y);     c.fillstyle = t.fill;     c.moveto(t.x - 15, t.y - 15);     c.lineto(t.x + 15, t.y - 15);     c.lineto(t.x + 15, t.y + 15);     c.lineto(t.x - 15, t.y + 15);     c.lineto(t.x - 15, t.y - 15);     c.fill();     c.restore();     c.closepath();  });  

so i'm cycling through power ups array drawing each one. in test case t.x , t.y both 200. code draws power @ location 400, 400. console logged power ups array, returned 200 x , y. if move player character on coordinates 200,200, power up, drawn @ 400,400 disappears , code power executes.

so functional purposes, it's in right place. doesn't appear there. yet player, bad guy , bullets in correct coordinates.

i've tried doing this;

    c.beginpath();     c.save();     c.translate(150,150);     c.fillstyle = 'orange';     c.moveto(150 - 15, 150 - 15);     c.lineto(150 + 15, 150 - 15);     c.lineto(150 + 15, 150 + 15);     c.lineto(150 - 15, 150 + 15);     c.lineto(150 - 15, 150 - 15);     c.fill();     c.restore();     c.closepath();  

a "static" box without looking values in array. draws in wrong location (300,300 in case). i've tried putting @ different locations in game loop (including before , after code parts drawn correctly). no effect.

here's code zombie bad guys, drawing in right place:

c.beginpath(); c.save(); c.translate(i.x,i.y); zomangle = getzomangle(i.x, i.y); if (player1.x - i.x < 0) { c.rotate(zomangle); } else { c.rotate(zomangle); c.scale(-1,1); } c.translate(-i.x,-i.y); c.fillstyle = i.fill; c.moveto(i.x - 18, i.y); c.lineto(i.x + 18, i.y + 15); c.lineto(i.x + 18, i.y - 15); c.lineto(i.x - 18, i.y); c.fill(); c.restore(); c.closepath();  

as can see it's same thing, except bad guys have rotate keep them facing player. tried adding power up, had no effect -- still triggered walking on 200,200 no matter box being drawn.

any ideas?

if use translate(x, y) following drawing instructions drawn relative position. offsetting drawing instructions twice now. instead, should this:

thepowerups.foreach ( function(t)  {     c.beginpath();     c.save();     c.translate(t.x,t.y);     c.fillstyle = t.fill;     c.moveto(-15, -15);     c.lineto(15, -15);     c.lineto(15, 15);     c.lineto(-15, 15);     c.lineto(-15, -15);     c.fill();     c.restore();     c.closepath();  });  

Comments

Popular posts from this blog

html5 - What is breaking my page when printing? -

html - Unable to style the color of bullets in a list -

c# - must be a non-abstract type with a public parameterless constructor in redis -