我在我的代码中制作了6个精灵，并且我在画布中随机生成它们，但有时精灵会在彼此之上产生。
以下是我在画布上绘制汽车的所有代码：
//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);
}
在评论＆＃34;输入障碍汽车＆＃34;是我生产所有障碍车的地方。
如果您更喜欢小提琴，则右here
答案 0 :(得分：1)
我道歉我知道你没有要求我这样做。但在我继续之前，我已经重写了您当前的JavaScript，如果您不了解任何内容，请告诉我。您需要做的一件事是将画布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;
});
}