Benötigen Neupositionierung einen Kreis helfen, wenn die Leinwandgröße

Question

ändert So verwende ich die Funktion von diesem Tutorial

http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/#disqus_thread

sieht es so aus -

function resizeGame() { 
     var gameArea = document.getElementById('canvas-container'); 
     var widthToHeight = 11/6; 
     var newWidth = window.innerWidth; 
     var newHeight = window.innerHeight; 
     var newWidthToHeight = newWidth/newHeight; 

     if (newWidthToHeight > widthToHeight) { 
      newWidth = newHeight * widthToHeight; 
      gameArea.style.height = newHeight + 'px'; 
      gameArea.style.width = newWidth + 'px'; 
     } else { 
      newHeight = newWidth/widthToHeight; 
      gameArea.style.width = newWidth + 'px'; 
      gameArea.style.height = newHeight + 'px'; 
     } 

     gameArea.style.marginTop = (-newHeight/2) + 'px'; 
     gameArea.style.marginLeft = (-newWidth/2) + 'px'; 

     var gameCanvas = document.getElementById('ctx'); 
     gameCanvas.width = newWidth; 
     gameCanvas.height = newHeight; 
     HEIGHT = newHeight; 
     WIDTH = newWidth 
    } 

So alles, was ich Verwenden Sie BREITE und HÖHE, um auf der Leinwand zu arbeiten. Aber es gibt andere Dinge, die ich in meinem Spiel habe, die nur ein x und y verwenden und nicht mit der Leinwand wechseln.

if(drawBall){ 
       ctx.save(); 
       ctx.beginPath(); 
       ctx.arc(ball.x, ball.y, (ball.diameter/2) - 5,0, 2*Math.PI); 
       ctx.fillStyle = ball.color; 
       ctx.fill(); 
       ctx.restore(); 
      } 

Was kann ich tun, um meine ball.x und ball.y zu machen, so ist es richtig mit der Leinwand verändert?

Answer 1

Es kommt alles auf das Verhältnis an. Zu wissen, dass Sie Dinge immer neu positionieren können, wenn der Bildschirm die Größe ändert.

Dabei sollte es egal sein, welche Größe der Benutzer hat, die Leinwand wird bei der gleichen relativen Position und Größe zeichnen.