javascript - Sprite 不在 Canvas 上绘制(Javascript)

Question

我画了 6 个 Sprite (它们是正方形)，它们应该在一定秒数后在我的 Canvas 上生成(我有一个计时器)，但由于某种原因，只有其中一个被绘制在 0,0 坐标处，并且即使在一定的秒数之后，也不会绘制任何 Sprite 。

我非常感谢您的帮助，如果您有任何问题，请在下面发表评论，我会立即答复。

您可以查看演示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()中，您应该调用obstacleCar1.move()带有参数dt，例如所以:
obstacleCar1.move(dt)

否则 obstacleCar1.move() 中未定义它，这会导致 obstacleCar1.x 未定义。