0

I have my HTML5 document that contains JavaScript code. The script defines a constructor to create a car object along with methods to compute the position of the car as the mouse moves and draw it in canvas.

I'm not getting any errors in the Chrome browser console and the log messages aren't showing any problems, but the car isn't showing. here's the code:

Edit: In this game, the car rotates and moves following the the mouse position. Also, I have a viewport that must centered around the car. So before drawing anything, I translate the origin of the canvas to (camx, camy), which according to my calculations are where the canvas should be positioned for it to be centered around the car.

Basically, my idea is: Instead of scrolling the viewport around the map, the viewport remains stationary and I just move the entire canvas. 

function Car(x, y, orientation, id, type) {
    // x and y are the cooredinates of the center of a car object
    this.x = x;
    this.y = y;
    this.type = type;
    this.speed = 5;  // default speed = 5
    this.isAlive = 1;
    this.stillExists = 1;
    this.id = id;
    this.orientation = orientation;
    this.img = new Image();
    this.img.source = "car1.png";
    this.img.width = 200;
    this.img.x = this.x;
    this.img.y = this.y;
    this.img.height = 100;
    this.img.orientation = this.orientation; 

    // update position and orienttaion of car based on mouse position
    this.updatePosAndOrien = function() {

        // caclcuate orientation using mousex and mousey and x y position of our car
        var targetX  = mousex - this.x;
        var targetY  = mousey - this.y;
        var trgtOrien = Math.atan2(targetY, targetX);
        this.orientation = trgtOrien;

        //calculate position
        var dx = mousex -this.x ;
        var dy = mousey - this.y ;
        var distance = Math.sqrt(dx*dx + dy*dy);
        var factor = distance / this.speed;
        var xspeed = dx / factor; 
        var yspeed = dy / factor;

        this.x = this.x + xspeed;
        this.y = this.y+ yspeed;
    };

    // draw method that draws the car on canvas
    this.draw = function() {
        this.img.onload = function() {
            ctx.save();  // save context
            ctx.translate(Math.round(this.x), Math.round(this.y));  // translate or move context origin to center of image 
            ctx.rotate(this.orientation);
            ctx.drawImage(img, -(this.width / 2), -(this.height / 2), 
            this.width, this.height);
            ctx.restore();  // restore context
        }
    };
}

function drawIt() {
    if (ourCar != undefined) {
        ourCar.updatePosAndOrien();
        console.log("drawing the car");
        ourCar.draw();
    }
    console.log("car is not defined");
    requestAnimationFrame(drawIt);
}

// player
var ourCar = new Car(300, 400, 2, 111, 1);
requestAnimationFrame(drawIt);
body {
  overflow: hidden;
}
<canvas onmousemove=" load(event)" id="myCanvas" width="5000" height="5000"></canvas>
Matheus Avellar
  • 1,507
  • 1
  • 22
  • 29
Gary Ridgeway
  • 13
  • 2
  • what are you trying to achieve.Position from mouse?if we move the mouse position will change and how you are planing to draw the object – Jijo Cleetus Feb 24 '17 at 06:03
  • HTMLImageElement has no `source` parameter ; I guess you meant `src`. Also, you have to wait for your image has loaded before being able to draw it on the canvas : http://stackoverflow.com/questions/32880641/canvascontext2d-drawimage-issue-onload-and-cors/ – Kaiido Feb 24 '17 at 08:35
  • @ Jijo Cleetus The car position gets updated as the mouse moves using the mouse coordinates to compute both the orientation of the car and it's new position. So the car is both moving and rotating following the mouse. – Gary Ridgeway Feb 24 '17 at 16:11
  • @Kaiido It has a source. The car constructor sets the image field and assigns a source to it. In the draw method of the constructor I am waiting for the load event before I draw the image. – Gary Ridgeway Feb 24 '17 at 16:18
  • Kaiido means there is no such property as "source" on the `this.image` object you've created. See [HTMLImageElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement) and [the specification](https://www.w3.org/TR/html5/embedded-content-0.html#attr-img-src). – Heretic Monkey Feb 24 '17 at 16:38
  • @Mike I just fixed that. It's still not working. I also edited the code so you can see the changes. What am I missing? – Gary Ridgeway Feb 24 '17 at 17:28
  • If you look at @Kaiido's comment again, there is a link to another question regarding images not showing a canvas. Perhaps you can visit that link and determine if it answers your question? Also, you might take a look at how to create a [mcve]. There's a lot of code in your question, and if your question is just about an image, you could try removing code until it's just about loading the image. – Heretic Monkey Feb 24 '17 at 17:37
  • Done as requested Mike. The image is still not showing. I looked at the post linked by Kaido, and it doesn't seem to conflict with the way I'm drawing the image. – Gary Ridgeway Feb 28 '17 at 07:59
  • Glad you fixed your biggest typos. So now, `this` in the context of `img.onload` function will refer to the image, not your `car` object. But anyway, you should not create a new ImageObject at each `draw`. Instead, create it once, listen for its load event to tell your main routine that it is ready to be drawn, and in `car.draw` method, just draw the image. https://jsfiddle.net/cxoe0vdh/ – Kaiido Feb 28 '17 at 08:42
  • Thanks for the feedback. I fixed the reference issue. However, my instantiated car object "ourCar" is undefined. What could be the cause? – Gary Ridgeway Mar 01 '17 at 21:56

0 Answers0