Javascript Collision Issues

Question

J'ai une balle qui rebondit autour de l'écran et j'ai besoin d'écrire du code qui termine le jeu quand il entre en collision avec le joueur ... C'est mon code actuel, mais ça ne marche pas. Faites-moi savoir si vous avez besoin de plus d'informations. Où playerLoc/ballLoc sont mesurés en fonction des mesures des axes X et Y.

<script language="JavaScript"> 
    //get info, process data, update screen objects 
     //instance vars 
     var player; 
     var ball; 
     var score; 
     var axis; 
     var ballaxis; 
     //initial speeds 
     var dx = 6; 
     var dy = 6; 
     var currentScore = 0; 
     var timer; 
     //set initial conditions for ball and paddle 

     var playerTop = 400; 
     var playerLeft = 200; 
     var ballLeft = 228; 
     var ballTop = 4; 
     var playerLoc = playerLeft + playerTop; 
     var ballLoc = ballLeft + ballTop; 

     function init(){ 
      //instantiate HTML object instance vars 
      player = document.getElementById('player'); 
      ball = document.getElementById('ball'); 
      score = document.getElementById('score'); 
      axis = document.getElementById('axis'); 
      ballaxis = document.getElementById('ballaxis'); 
      //register key listener with document object 
      document.onkeydown = keyListener; 
      //start the game loop 
      start(); 

     } 

     function keyListener(e){ 
      if(!e){ 
       //for IE 
       e = window.event; 
      } 
      if(e.keyCode==37 && playerLeft > 0){ 
       //keyCode 37 is left arrow 
       playerLeft -= 10; 
       player.style.left = playerLeft + 'px'; 
      } 
      if(e.keyCode==39 && playerLeft < 450){ 
       //keyCode 39 is right arrow 
       playerLeft += 10; 
       player.style.left = playerLeft + 'px'; 
      } 
      if(e.keyCode==38 && playerTop > 0){ 
       //keyCode 38 is up arrow 
       playerTop -= 10; 
       player.style.top = playerTop + 'px'; 
      } 
      if(e.keyCode==40 && playerTop < 450){ 
       //keyCode 40 is down arrow 
       playerTop += 10; 
       player.style.top = playerTop + 'px'; 
      } 
     } 

     function start(){ 
      //game loop 
      render(); 
      detectCollisions(); 
      difficulty(); 
      axisMeasure(); 

      //end conditions 

      if(playerLoc == ballLoc){ 
       gameOver(); 
       } 
      else{ 
       //still in play - keep the loop going 
       timer = setTimeout('start()',50); 
      } 

     } 



     function detectCollisions(){ 
      //just reflect the ball on a collision 
      //a more robust engine could change trajectory of ball based 
      //on where the ball hits the paddle 
      if(collisionX()) 
       dx = dx * -1; 
      if(collisionY()) 
       dy = dy * -1; 
     } 

     function collisionX(){ 
      //check left and right boundaries 
      if(ballLeft < 2 || ballLeft > 480) 
       return true; 

      else { 
       return false; 
      } 

     } 

     function collisionY(){ 
      //check if at top of playing area 
      if(ballTop < 2 || ballTop > 480) 
       return true; 

      else { 
       return false; 
      }  

     } 

     function render(){ 
      moveBall(); 
      updateScore(); 
     } 

     function moveBall(){ 
      ballLeft += dx; 
      ballTop += dy; 
      ball.style.left = ballLeft; 
      ball.style.top = ballTop; 
     } 

     function axisMeasure(){ 
      axis.innerHTML = 'P X-Axis: ' + playerLeft + ' P Y-Axis: ' + playerTop 
      ballaxis.innerHTML = 'B X-Axis: ' + ballLeft + ' B Y-Axis: ' + ballTop   
     } 

     function updateScore(){ 
      currentScore += 5; 
      score.innerHTML = 'Score: ' + currentScore; 
     } 

     function difficulty(){ 
      //as the game progresses, increase magnitude of the vertical speed 
      if(currentScore % 1000 == 0){ 
       if(dy > 0) 
        dy += 1; 
       else 
        dy -= 1; 
      } 
     } 

     function gameOver(){ 
      //end the game by clearing the timer, modifying the score label 
      clearTimeout(timer); 
      score.innerHTML += " Game Over"; 
      score.style.backgroundColor = 'rgb(128,0,0)'; 

Answer 1

Lol .. eh bien vous n'avez comme aucun code indiqué. Donc, ceci est un complet tourné dans le noir.

if(playerLoc.x == ballLoc.x && playerLoc.y == ballLoc.y){ 
     gameOver(); 
} 

OU, essayez même la méthode de distance.

var distance = Math.sqrt((ballLoc.x- playerLoc.x) *(ballLoc.x-playerLoc.x) + (ballLoc.y - playerLoc.y) * (ballLoc.y-playerLoc.y)); 

if(distance < *some amount*)} 
     gameOver(); 
} 

Also heres a live demo of the distance check in action.

Modifier

Ok bien maintenant que le code est affiché, ma réponse est un peu hors de propos, mais gardez Ill ici peu importe puisque le contrôle à distance est une méthode valide qui serait même travailler dans le cas de l'OP.

var ballX = ballLeft + (ballWidth/2), 
    ballY = ballTop + (ballHeight/2), 
    playerX = playerLeft + (playerWidth/2), 
    playerY = playerTop + (playerHeight/2); 

var distance = Math.sqrt((ballX - playerX) *(ballX - playerX) + (ballY - playerTop) * (ballY - playerTop)); 
if(distance < 25){ gameOver(); }