Я сделал как 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);
}
В комментариях «Enter препятствия автомобилей», где я порождая все мои заградительные автомобили.
Если вы предпочитаете скрипку, его правый here
Круто, но не могли бы вы сказать мне, где конкретно код для избежания препятствий на нерест друг на друга. –
Я проверил только две проверки объектов, если они появляются в том же месте, но у вас появилось несколько автомобилей. Так каким-то образом, как в методе порождения. Сохраните позиции в массиве, а затем сгенерируйте значения x и y и проверьте, существует ли в массиве –