精灵不画在画布上（Javascript）

Question

我画了6个精灵（正方形），他们假设在一定时间后在我的画布上产生（我有一个计时器），但由于某种原因，其中只有一个被绘制在0,0坐标处，并且即使在一定的秒数之后，也没有精灵被抽出。

我真的很感激一些帮助，如果您有任何问题，请在下面留言，我会立即回答。

您可以看到演示here，您将清楚地了解我在说什么。

或者这是Javascirpt的所有代码：

//Setting the canvas and context
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

var canvasWidth = canvas.width;
var canvasHeight = canvas.height;

var keys = [];  // contains, for each keyCode, the key status

//================
// CAR Class
//================

//Uploading obstacle car
var carImage = new Image();
carImage.src = "img/Car.png";

function Car(x, y, speed, mod, angle) {
    this.x = x; // x center of car
    this.y = y; // y center of car
    this.speed = speed;
    this.mod = mod;
    this.angle = angle;

   this.listenInput = function(dt) {
        if (keys[37]) {
            this.x -= this.speed*dt;
        }
        if (keys[39]) {
            this.x += this.speed*dt;
        }
    };

    this.move = function (dt) {
        this.x += dt*(this.speed * this.mod) * Math.cos(Math.PI / 180 * this.angle);
        this.y += dt*(this.speed * this.mod) * Math.sin(Math.PI / 180 * this.angle);
        if (this.y > canvasHeight + 150) {
            this.spawn();
        }
    };

    this.draw = function () {
        context.save();
        context.translate(this.x, this.y);
        context.rotate(this.angle* Math.PI / 180);
        context.drawImage(carImage, -(carImage.width / 2), -(carImage.height / 2));
        context.restore();

        if (this.x > context.canvas.width){
        context.beginPath();
        context.fillStyle = "red";
        context.font = "50px Verdana";
        context.fillText("Out of bounds! Get Back!", 100, 100);
        }

        if (this.x < 0){
        context.beginPath();
        context.fillStyle = "red";
        context.font = "50px Verdana";
        context.fillText("Out of bounds! Get Back!", 100, 100);
        }
    };

  this.testCollision = function(other) {
    dx = (Math.abs(other.x - this.x));
    dy = (Math.abs(other.y - this.y));
    da = (carImage.width / 2);
    db = (carImage.height);
    if (dx < da && dy < db) {
        this.mod = 0;
    }
   };
}

//================
//ENTER: USER CAR
//================
var userCar  = new Car(450, canvasHeight - 100, 4/16, -1, -90);

//=========================
//Properties for score keep
//=========================
var score;
var startTime;
var gameOver;
var spaceBarPressed = false;

//=========================
// Launch the game
//=========================
setupKeys();
setupGame () ;
var gameTime=Date.now();
gameLoop();
//=====================
//ENTER: OBSTACLE CARS
//=====================

var obstacleCar1;
var obstacleCar2;
var obstacleCar3;
var obstacleCar4;
var obstacleCar5;
var obstacleCar6;

// ================
//Starting game
// ================

function setupGame () {
  obstacleCar1 = new Car(100, 10, 5, 2.9, 90);
  obstacleCar2 = new Car(300, 10, 5, 2.9, 90);
  obstacleCar3 = new Car(450, 10, 5, 2.9, 90);
  obstacleCar4 = new Car(600, 10, 5, 2.9, 90);
  obstacleCar5 = new Car(750, 10, 5, 2.9, 90);
  obstacleCar6 = new Car(900, 10, 5, 2.9, 90);
  gameOver = false;
  startTime = Date.now();
  score = 0;
}

//=========================
//Properties for score keep
//=========================
var score;
var startTime;
var gameOver;
var spaceBarPressed = false;

//=========================
// Launch the game
//=========================
setupGame();
gameLoop();

//===========================
//Draw Final and Elasped Time
//===========================
function drawElapsedTime() {
    context.save();
    context.fillStyle = "black";
    context.font = "30px Verdana";
    context.fillText(parseInt((Date.now() - startTime) / 1000) + " secs", canvas.width - 110, 40);
    context.restore();
}

function drawFinalScore() {
    context.save();
    context.fillStyle = "black";
    context.font = "30px Verdana";
    context.fillText("Game Over: " + score + " secs", 368, 100);
    context.font = "12px Verdana";
    context.fillText("Press space to restart", 450, 150);
    context.restore();
}

//========================
//All game draw properties
//========================

function gameLoop() {

     requestAnimationFrame(gameLoop);
    context.clearRect(0, 0, canvas.width, canvas.height);

    var now=Date.now();
    var dt = now-gameTime;

    if (dt>16) dt=16;

    gameTime+=dt;

    if (gameOver) {
      drawFinalScore();
      if (spaceBarPressed) {
         setupGame();
      }
      return;
    }

obstacleCar1.move();
obstacleCar1.draw();
obstacleCar1.testCollision(userCar);


//Spawn obstacle cars at different times

if (parseInt((Date.now() - startTime) / 1000) >= 3){
    obstacleCar2.move();
    obstacleCar2.testCollision(userCar);
    obstacleCar2.draw();
}

if (parseInt((Date.now() - startTime) / 1000) >= 5){ 
    obstacleCar3.move();
    obstacleCar3.testCollision(userCar);
    obstacleCar3.draw();
}

if (parseInt((Date.now() - startTime) / 1000) >= 7){ 
    obstacleCar4.move();
    obstacleCar4.testCollision(userCar);
    obstacleCar4.draw();
}

if (parseInt((Date.now() - startTime) / 1000) >= 10){ 
    obstacleCar5.move();
    obstacleCar5.testCollision(userCar);
    obstacleCar5.draw();
}

if (parseInt((Date.now() - startTime) / 1000) >= 13){ 
    obstacleCar6.move();
    obstacleCar6.testCollision(userCar);
    obstacleCar6.draw();
}

//ULTIMATE MODE increase speed for all cars
if (parseInt((Date.now() - startTime) / 1000) >= 15){

    obstacleCar1.speed = 9;
    obstacleCar2.speed = 9;
    obstacleCar3.speed = 9;
    obstacleCar4.speed = 9;
    obstacleCar5.speed = 9;
    obstacleCar6.speed = 9;
}

//Display ULTIMATE MODE When it starts
if (parseInt((Date.now() - startTime) / 1000) >= 15 && parseInt((Date.now() - startTime) / 1000) <= 19){
    context.beginPath();
    context.fillStyle = "red";
    context.font = "50px Verdana";
    context.fillText("ULTIMATE MODE!", 100, 100);
}

    if (obstacleCar1.mod === 0) {
       score = parseInt((Date.now() - startTime) / 1000);
       gameOver = true;
       spaceBarPressed = false;
    }

    if (obstacleCar2.mod === 0) {
       score = parseInt((Date.now() - startTime) / 1000);
       gameOver = true;
       spaceBarPressed = false;
    }
    if (obstacleCar3.mod === 0) {
       score = parseInt((Date.now() - startTime) / 1000);
       gameOver = true;
       spaceBarPressed = false;
    }
    if (obstacleCar4.mod === 0) {
       score = parseInt((Date.now() - startTime) / 1000);
       gameOver = true;
       spaceBarPressed = false;
    }

    if (obstacleCar5.mod === 0) {
       score = parseInt((Date.now() - startTime) / 1000);
       gameOver = true;
       spaceBarPressed = false;
    }
    if (obstacleCar6.mod === 0) {
       score = parseInt((Date.now() - startTime) / 1000);
       gameOver = true;
       spaceBarPressed = false;
    }

    userCar.draw();
    userCar.listenInput(dt);  
    drawElapsedTime();
}

//========================
//  Keys handling
//========================

function setupKeys() {
    var listenedKeys = [32, 37, 38, 39, 40];

    function keyUpHandler(event) {
       var keyCode = event.keyCode;
       if (listenedKeys.indexOf(keyCode) == -1) return;
       keys[keyCode] = false;        
    }

    function keyDownHandler(event) {
        var keyCode = event.keyCode;
        if (listenedKeys.indexOf(keyCode) == -1) return;
        keys[keyCode] = true;        
        if (keyCode == 32) {
           spaceBarPressed =  true;
        }
       event.preventDefault();
    }

    //Event listeners for keys
    window.addEventListener("keydown", keyDownHandler, false);
    window.addEventListener("keyup", keyUpHandler, false);
}

另外，如果你需要我的html，我会马上给它

谢谢！

Answer 1

在功能function gameLoop()中，您应该使用参数 dt 调用obstacleCar1.move() ，如下所示：
obstacleCar1.move(dt)

否则obstacleCar1.move()中未对其进行定义，导致obstacleCar1.x未定义。