0
У меня есть фон и 2 спрайта. Я загрузил фон, но оба моих спрайта не появляются. Возможно, они отстают от фона. Как я могу сделать так, чтобы оба спрайта были на моем фоне и фон за спрайтами?Sprites Overlayed for Background
Мой код 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.