sprite가 서로 겹치지 않게하십시오.

Question

내 코드에서 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); 
} 

:

여기에 내가 캔버스에 내 차를 그려 내 모든 코드입니다. 당신이 here

Answer 1

, 오른쪽 바이올린을 선호하는 경우

나는 내가이 일을 위해 당신이 요청하지 않았다 알고 죄송합니다. 하지만 계속하기 전에 현재 자바 스크립트를 다시 작성 했으므로 아무 것도 이해하지 못한다면 알려주십시오. 캔버스

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