javascript - 避免 Sprite 在彼此之上生成

Question

我在代码中制作了 6 个 Sprite ，并在 Canvas 中随机生成它们，但有时 Sprite 会在彼此的顶部生成。

这是我在 Canvas 上绘制汽车的所有代码:

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

//================
// 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.move = function () {
        this.x += (this.speed * this.mod) * Math.cos(Math.PI / 180 * this.angle);
        this.y += (this.speed * this.mod) * Math.sin(Math.PI / 180 * this.angle);
        if (this.y > context.canvas.height + 150) {
            this.y = -carImage.height;
            this.x = Math.floor(Math.random() * (canvas.width));
        }
    };

    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, 730, 20, -1, -90);
setupKeys(userCar);

//=====================
//ENTER: OBSTACLE CARS
//=====================

var obstacleCar1;
var obstacleCar2;
var obstacleCar3;
var obstacleCar4;
var obstacleCar5;
var obstacleCar6;
// ================
//Starting game
// ================

function setupGame () {
  obstacleCar1 = new Car(150, 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();
var gameLoopInterval = setInterval(gameLoop, 30);

//===========================
//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() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    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();

    drawElapsedTime();
}

//=========================
// BORDERS
//=========================

function borderCar() {

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


function borderCar2() {

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

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

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

    function keyUpHandler(event) {
        if (event.keyCode == 38 || event.keyCode == 40) {
            mod = 0;
        }
    }

    function keyDownHandler(event) {
        var keyCode = event.keyCode;
        if (keyCode == 37) {
            target.x -= target.speed;
        }
        if (keyCode == 39) {
            target.x += target.speed;
        }
              if (keyCode == 32) {
           spaceBarPressed =  true;
        }


        // space and arrow keys
        if (cancelledKeys.indexOf(keyCode) > -1) {
            event.preventDefault();
        }
    }

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

在评论“进入障碍车”中，我生成了所有障碍车。

如果您更喜欢 fiddle ，那就对了 here

Answer 1

抱歉，我知道您没有要求我这样做。但在我继续之前，我已经重写了您当前的 JavaScript，如果您有任何不明白的地方，请告诉我。您必须做的一件事是将 Canvas ID 更改为:canvas

var context = canvas.getContext('2d');
var carImage = new Image();

carImage.src = 'http://images.clipartpanda.com/car-top-view-clipart-red-racing-car-top-view-fe3a.png';

function Car(x, y, speed, mod, angle){
    this.x     = x;
    this.y     = y || 10;
    this.speed = speed || 5;
    this.mod   = mod || 2.9;
    this.angle = angle || 90;
}

Car.prototype = {
    move: function(){
        this.x += (this.speed * this.mod) * Math.cos(Math.PI / 180 * this.angle);
        this.y += (this.speed * this.mod) * Math.sin(Math.PI / 180 * this.angle);
        if (this.y > context.canvas.height + 150) {
            this.y = -carImage.height;
            this.x = Math.floor(Math.random() * (canvas.width));
        }
    },
    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);
        }
    },
    testCollision: function(other){
        var dx = (Math.abs(other.x - this.x));
        var dy = (Math.abs(other.y - this.y));
        var da = (carImage.width / 2);
        var db = (carImage.height);
        if (dx < da && dy < db) this.mod = 0;
    }
}



var game = {
    userCar: new Car(450, 730, 20, -1, -90),
    spaceBarPressed: false,
    setup: function(){
        this.obstacleCars    = [new Car(150), new Car(300), new Car(450), new Car(600), new Car(750), new Car(900)];
        this.gameOver        = false;
        this.startTime       = Date.now();
        this.score           = 0;
    },
    drawElapsedTime: function(){
        context.save();
        context.fillStyle = "black";
        context.font = "30px Verdana";
        context.fillText(parseInt((Date.now() - this.startTime) / 1000) + " secs", canvas.width - 110, 40);
        context.restore();
    },
    drawFinalScore: function(){
        context.save();
        context.fillStyle = "black";
        context.font      = "30px Verdana";
        context.fillText("Game Over: " + this.score + " secs", 368, 100);
        context.font      = "12px Verdana";
        context.fillText("Press space to restart", 450, 150);
        context.restore();
    },
    loop: function(){
        context.clearRect(0, 0, canvas.width, canvas.height);
        if (this.gameOver) {
            this.drawFinalScore();
            if (this.spaceBarPressed) this.setup();
            return;
        }
        this.obstacleCars[0].move();
        this.obstacleCars[0].draw();
        this.obstacleCars[0].testCollision(this.userCar);

        this.spawn(3, this.obstacleCars[1]);
        this.spawn(5, this.obstacleCars[2]);
        this.spawn(7, this.obstacleCars[3]);
        this.spawn(10, this.obstacleCars[4]);
        this.spawn(13, this.obstacleCars[5]);

        if(parseInt((Date.now() - this.startTime) / 1000) >= 15){
            for(var car of this.obstacleCars) car.speed = 9;
        }

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

        for(var car of this.obstacleCars){
            if(car.mod === 0){
                this.score = parseInt((Date.now() - this.startTime) / 1000);
                this.gameOver = true;
                this.spaceBarPressed = false;
            }
        }

        this.userCar.draw();

        this.drawElapsedTime();
        requestAnimationFrame(this.loop.bind(this));
    },
    spawn: function(num, car){
        if(parseInt((Date.now() - this.startTime) / 1000) >= num){
            car.move();
            car.testCollision(this.userCar);
            car.draw();
        }
    }
}

setupKeys(game.userCar);
game.setup();
game.loop();

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

    window.addEventListener('keydown', function(event){
        var keyCode = event.keyCode;
        if (keyCode == 37) {
            target.x -= target.speed;
        } else if(keyCode == 39){
            target.x += target.speed;
        } else if(keyCode == 32){
            game.spaceBarPressed = true;
        }

        if (~cancelledKeys.indexOf(keyCode)) event.preventDefault();
    });
    window.addEventListener('keyup', function(event){
        if(event.keyCode == 38 || event.keyCode == 40) game.userCar.mod = 0;
    });
}