-1
コードの説明：Carオブジェクトはマウスの位置に基づいてその位置と向きを定期的に更新します。私は、フレームのよりスムーズなレンダリングのためのrequestAnimationFrame関数です。私のプログラムに何が問題なのですか？ショートプログラム
問題： 私が描画機能の中にいるとき、車のオブジェクトのx座標とy座標はNANです。 車はキャンバスに表示されません。
コード：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
overflow:hidden;
}
</style>
</head>
<body>
<canvas id="myCanvas">
</canvas>
<script>
// requestAnimationFrame initialization with cross-browser compatibility
(function(){
var requestAnimationFrame = window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
})();
// canvas and context objects
var myCanvas = document.getElementById("myCanvas");
myCanvas.width = window.innerWidth;
myCanvas.height = window.innerHeight;
var ctx = myCanvas.getContext("2d");
myCanvas.addEventListener('mousemove', updateMousePos, false);
//mouse position coordinates
var mousex;
var mousey;
//constructor for a Car object with methods to update position, orientation, and draw the car
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.height = 100;
//this method computes a new positin and orientation of our car.
this.updatePosAndOrien = function(){
//caclcuate car orientation using mousex and mousey and x y position of our car using atan2
var targetX = mousex - this.x;
var targetY = mousey - this.y;
var trgtOrien = Math.atan2(targetY, targetX);
this.orientation = trgtOrien;
//calculate new positon of car using speed and current location of car
var dx = mousex -this.x;
var dy = mousey - this.y;
//distance between mouse and car
var distance = Math.sqrt(dx*dx + dy*dy);
//Now we compute xspeed and yspeed of car - which are displacements along x and y axis
var factor = distance/this.speed;
var xspeed = dx/factor;
var yspeed = dy/factor;
//set new positon of car
this.x = this.x + xspeed;
this.y = this.y+ yspeed;
};
//draw method that draws the car on canvas
this.draw = function() {
this.img.x = this.x;
this.img.y = this.y;
this.img.orientation = this.orientation;
this.img.onload = function() {
ctx.save();//save context
//translate context origin to center of image
ctx.translate(Math.round(this.x), Math.round(this.y));
ctx.rotate(this.orientation); //rotate context
ctx.drawImage(img, -(this.width/2), -(this.height/2),
this.width, this.height);//draw img
ctx.restore(); //restore context
}
};
}
/*this function update mouse position upon mouse movement*/
function updateMousePos(evt) {
var rect = myCanvas.getBoundingClientRect();
mousex = evt.clientX - rect.left;
mousey = evt.clientY - rect.top;
//log mouse position
console.log("mouse postion: "+mousex+", "+mousey);
}
//defining car and starting the rendering
var ourCar = new Car(300, 400, 2, 111, 1);
console.log("car: "+ourCar.x+", "+ourCar.y);
/*This function draws everything using requestFrameAnimation(). */
function drawIt() {
// Use the identity matrix while clearing the canvas
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
//update orientation of player
ourCar.updatePosAndOrien();
console.log("car in drawIt: "+ourCar.x+", "+ourCar.y); //prints NAN for both
//Draw car
console.log("drawing the car");
ourCar.draw();
requestAnimationFrame(drawIt);
}
//start rendering
requestAnimationFrame(drawIt);
</script>
</body>
</html>
（IMG、 - （this.width/2）、 - （this.height/2）、this.width、this.height）;'あなたがしています'this.img'ではなく、未定義の' img'変数を使用します。 – Xufox
野生の推測： 'mousex'と' mousey'は 'undefined'です' updatePosAndOrien（）の上にNaN'があります – Thomas