背景后覆覆的精灵

Question

我有背景和两个精灵。我上传了背景，但我的两个精灵没有出现。他们可能在幕后。如何使我的精灵既在我的背景上，又在精灵背后的背景上？

我的Js代码：

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

//ENTER: USER CAR

//Uploading car sprite
var car = new Image();
car.src = "file:///C:/Users/Saqib/Desktop/Game/img/car.png";

//Setting properties of car
var x = 450;
var y = 730;
var speed = 10;
var angle = 990;
var mod = 0;

//Event listeners for keys
window.addEventListener("keydown", keypress_handler, false);
window.addEventListener("keyup", keyup_handler, false);

//Interval for animation
var moveInterval = setInterval(function () {
    draw();
}, 30);

//Drawing the car turning and changing speed
function draw() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    x += (speed * mod) * Math.cos(Math.PI / 180 * angle);
    y += (speed * mod) * Math.sin(Math.PI / 180 * angle);

    context.save();
    context.translate(x, y);
    context.rotate(Math.PI / 180 * angle);
    context.drawImage(car, -(car.width / 2), -(car.height / 2));
    context.restore();

    drawCar();



}

//Setting the keys
function keyup_handler(event) {
    if (event.keyCode == 38 || event.keyCode == 40) {

        mod = 0;
    }
}

//Setting all of the keys
function keypress_handler(event) {
    console.log(x, y);
    if (event.keyCode == 38) {
        mod = 1;
    }
    if (event.keyCode == 40) {
        mod = -1;
    }
    if (event.keyCode == 37) {
        angle -= 5;
    }
    if (event.keyCode == 39) {
        angle += 5;
    }
}

//ENTER: OBSTACLE CAR

//Uploading car
var car1 = new Image();
car1.src = "file:///C:/Users/Saqib/Desktop/Game/img/car.png";

//Setting properties of car
var x1 = 450;
var y1 = 40;
var speed1 = 10;
var angle1 = -990;
var mod1 = 0.2;

//Interval for animation
 var moveInterval = setInterval(function () {
     drawCar();
 }, 30);

//Drawing the car turning and changing speed
function drawCar() {
    x1 += (speed1 * mod1) * Math.cos(Math.PI / 180 * angle1);
    y1 += (speed1 * mod1) * Math.sin(Math.PI / 180 * angle1);

    context.save();
    context.translate(x1, y1);
    context.rotate(Math.PI / 180 * angle1);
    context.drawImage(car1, -(car1.width / 2), -(car1.height / 2));
    context.restore();

}

//ENTER: MOVING BACKGROUND

//Creating one abstract object to hold all images
var imageRepository = new function() {
    //Upload background image
    this.background = new Image();
    this.background.src = "file:///C:/Users/Saqib/Desktop/Game/img/level%201.jpg";
};

//Abstract function that will hold most all other properties
function Drawable() {
    this.init = function(x, y) {
        // Default variables
        this.x = x;
        this.y = y;
    };
    this.speed = 0;
    this.canvasWidth = 0;
    this.canvasHeight = 0;
}

//Creating the background image and drawing it
function Background() {
    this.speed = 3; // Resetting speed of background for animation (positive so top to bottom motion)
    this.draw = function() {
        //Setting velocity to y-component, since track needs to go from top to bottom
        this.y += this.speed;
        this.context.drawImage(imageRepository.background, this.x, this.y);
        // Draw it again for animation, top edge of the first background
        this.context.drawImage(imageRepository.background, this.x, this.y - this.canvasHeight);
        // If one background ends, reset
        if (this.y > this.canvasHeight)
            this.y = 0;
    };
}

// Make background have properties from Drawable function
Background.prototype = new Drawable();

//Makes object to hold everything else the game will have
function Game() {
    this.init = function() {

        // Gets canvas element
        this.bgCanvas = document.getElementById('background');
        // Sees if canvas is supported by the browser
        if (this.bgCanvas.getContext) {
            this.bgContext = this.bgCanvas.getContext('2d');
            // Initialize objects to contain their context and canvas
            Background.prototype.context = this.bgContext;
            Background.prototype.canvasWidth = this.bgCanvas.width;
            Background.prototype.canvasHeight = this.bgCanvas.height;
            // Initialize the background image
            this.background = new Background();
            this.background.init(0,0); // Set draw point to 0,0
            return true;
        } else {
            return false;
        }
    };
    // Start the animation loop for the background
    this.start = function() {
        animate();
    };
}

//Requests animation frame
function animate() {
    requestAnimFrame( animate );
    game.background.draw();
}

//Setting all animation frames required
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame   ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            function(callback, element){
                window.setTimeout(callback, 1000 / 60);
            };
})();

//Create the final object and run it
var game = new Game();
function init() {
    if(game.init())
        game.start();

}

如果你需要HTML就告诉我。

Answer 1

HTML或CSS会有所帮助，但有一件事您可能会尝试:将背景z索引设置为0，或者设置另一个较低的数字；然后将您的两个精灵设置为一个大得多的数字。确保数字也变得更大，他们越向前看。