Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.
update: function(delta) {
    for (var i = 0; i < this.bullets.length; i++) {
        this.bullets[i].velocity = this.bullets[i].speed * delta;
        this.bullets[i].contextX += this.bullets[i].velocity;
    }
},

draw: function(ctx) {
    for (var i = 0; i < this.bullets.length; i++) {
        ctx.save();

        // Move the context to where the player is then make it face the target degree
        ctx.translate(this.bullets[i].startX, this.bullets[i].startY);
        ctx.rotate(this.bullets[i].rotation);

        ctx.fillRect(this.bullets[i].contextX, -5, 10, 10);
        ctx.restore();
    }
}

The code above contains two methods that describe a class that manages the drawing and updating of bullets. The update method moves a bullet along and the draw function then draws it to the screen.

The canvas does the following:

  1. Saves the current canvas context state
  2. Moves the context to where the bullet originated from
  3. Rotates the canvas to the way the bullet was facing when shot
  4. Draw the rectangle
  5. Restore the canvas context to original state

Here is an image I have made that better describes what the canvas context is doing:

enter image description here

So we know the x position of the bullet but this is relative to the context as it's been rotated. What I need to know is the bullet's X and Y properties in relation to the actual screen. Any ideas as to how I can do this?

share|improve this question
    
You should learn some linear algebra and linear transformations. It will save you hundreds of questions like this in the future. –  Ivan Kuckir Mar 16 at 0:29
    
@IvanKuckir Where do I start? Could you maybe link me to a useful resource? :-) –  jskidd3 Mar 16 at 0:31
    
I learned it at university. Maybe this will help you khanacademy.org/math/linear-algebra –  Ivan Kuckir Mar 17 at 0:13

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.