Spieleentwicklung mit JavaScript - Maus-Steuerung

Maus-Steuerung

Dank der Vorarbeit mit der pixelgenauen Positionierung des Kartenausschnitts ist die Steuerung mit der Maus relativ einfach. Beim Drücken der Maustaste wird die aktuelle Position gespeichert, beim Loslassen die Differenz der aktuellen Position und der gespeicherten auf die aktuelle Kartenposition addiert und dann die Karte neu gezeichnet.

Dmait sich die Karte auch bei gedrückter Maustaste mit der Maus bewegt, wird die Neu-Positionierung bei jeder Mausbewegung durchgeführt.

uerst werden allerdings die EventHandler installiert. Diese werden aber nicht dem Canvas-Objekt zugewiesen, sondern dem umschießenden DIV-Element:

  var div = document.getElementById("board_div");
  div.addEventListener('mousedown', OnMouseDown, false);
  div.addEventListener('mousemove', OnMouseMove, false);
  div.addEventListener('mouseup', OnMouseUp, false);

Das DIV-Element ist bereits im HTML-Code vorhanden. Es muss lediglich eine ID zugewiesen werden:

    <div class="board frame" id="board_div"><canvas id="board" width="460" height="340">Dieser Browser ist nicht geeignet.</canvas></div>

Der MouseDown-Handler macht nichts weiter als die aktuelle Position zu speichern:

  var dragx = -1;
  var dragy = -1;
      
  function OnMouseDown( e )
  {
    dragx = e.pageX;
    dragy = e.pageY;
  }

Beim Loslassen der Maustaste muss nun die Differenz zwischen der neuen Position und der gespeicherten Position berechnet werden. Um diese Differenz ist der Ausschnitt zu verschieben:

  function OnMouseUp( e )
  {
    pfx += dragx - e.pageX;
    pfy += dragy - e.pageY;
    while( pfx < 0 ) pfx += map_pixel_width;
    while( pfy < 0 ) pfy += map_pixel_height;
    drawPlayfield( level, pfx, pfy );
    dragx = -1;
    dragy = -1;
  }

Wichtig ist, dass die Position nie negativ wird. Deshalb werden beide Werte solange um die Kartengröße erhöht, bis sie positiv sind. Anschließend kann der Ausschnitt gezeichnet werden. Um zu kennzeichnen, dass der Vorgang abgeschlossen ist (wird später für OnMouseMove benötigt) werden dragx und dragy mit -1 initialisiert.

Die Funktion OnMouseMove kann nun von der Implementierung der beiden anderen Handler profitieren:

  function OnMouseMove( e )
  {
    if( dragx > 0 && dragy > 0 )
    {
      OnMouseUp( e );
      OnMouseDown( e );
    }
  }

Wenn die beiden Werte größer 0 sind, wurde die Maustate gedrückt und bei einer Mausbewegung soll der Ausschnitt an der neuen Position neu gezeichnet werden. Dies geschieht mit dem Aufruf von OnMouseUp(). Durch einen erneuten Aufruf von OnMouseDown() wird die aktuelle Position gespeichert, die später wieder von OnMouseUp() verwendet werden kann.