I have my html5 document that contains a JavaScript script. 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:
Thanks in advance!
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow:hidden;
}
</style>
</head>
<body>
<canvas onmousemove=" load(event)" id="myCanvas" width="5000" height="5000">
</canvas>
<script>
// canvas and context objects
var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
// viewport or camera dimensions = available height and available width in browser windows
//these dimensin need to be verified ********************************************
//**********************************************************************************************
var vWidth = window.screen.availWidth;
var vHeight = window.screen.availHeight;
//mouse position
var mousex;
var mousey;
var player = new car(300, 400, 2, 001, 1);
function carData(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;
}
function car(x, y, orientation, id, type) {
this.data = new carData(x, y, orientation, id, type);
this.TO_RADIANS = Math.PI/180;
this.image = new Image();
this.image.source = 'car1.png';
this.image.width = 150;
this.image.height = 150;
//You should check if the image is loaded. If not then listen to the load event - from stackoverflow
// http://ift.tt/2lLG7zc
this.updatePosAndOrien = function(){
//caclcuate orientation using mousex and mousey and x y position of our car
var targetX = mousex - this.data.x;
var targetY = mousey - this.data.y;
trgtOrien = Math.atan2(targetY, targetX);
//orientation
/*
if(this.data.orientation < trgtOrien) {
this.data.orientation += 20 * this.TO_RADIANS;
}
else{
this.data.orientation -= 20 * this.TO_RADIANS;
}
*/
this.data.orientation = trgtOrien;
console.log("player orientation is: " +this.data.orientation);
//now update position of our car
//this.data.x= this.data.x+ this.data.speed * Math.cos(trgtOrien);
//this.data.y= this.data.y + this.data.speed * Math.sin(trgtOrien);
var dx = mousex -this.data.x ;
var dy = mousey - this.data.y ;
var distance = Math.sqrt(dx*dx + dy*dy);
//Now we can compute xspeed and yspeed of character
var factor = distance / this.data.speed;// 50 / 5 = 10
var xspeed = dx / factor; // 40 / 10 = 4
var yspeed = dy / factor ;// 30 / 10 = 3
this.data.x += xspeed;
this.data.y += yspeed;
console.log("player position is: " +this.data.x+", "+this.data.y);
};
this.draw = function() {
//if the image is loaded - which it should be after first draw
this.image.onload = function() {
ctx.save();
ctx.translate(this.data.x, this.data.y); //translate or move context origin to center of image
ctx.rotate(this.data.orientation);
ctx.drawImage(this.image, -(this.image.width/2), -(this.image.height/2),
this.image.width, this.image.height);
//ctx.drawImage(this.image, this.x, this.y);
ctx.restore();
}
};
}
/* Tthis function does all the drawing for each frame. It works */
function drawAll() {
ctx.setTransform(1,0,0,1,0,0);//reset the transform matrix to identity = no transform applied to drawn objects
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);//clear the viewport AFTER the matrix is reset
//Clamp the camera position to the world bounds while centering the camera around the player
var camx = clamp(-player.data.x + vWidth/2, 0, 5000 - vWidth); //5000 x 5000 is our who arena dimensions
var camy = clamp(-player.data.y + vHeight/2, 0, 5000 - vHeight);
ctx.translate( camx, camy );
//Draw everything - the lists of cars and power ups
player.draw();
}
//clamp function
function clamp(value, min, max){
if(value < min) return min;
else if(value > max) return max;
return value;
}
function updateMousePos(evt) {
var rect = myCanvas.getBoundingClientRect();
mousex = evt.clientX - rect.left;
mousey = evt.clientY - rect.top;
console.log("mouse postion: "+mousex+", "+mousey);
}
function load(event){
updateMousePos(event);
player.updatePosAndOrien();
drawAll();
}
</script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire