Die guten, alten Point-and-Click Adventure in bester Lucasarts oder Sierra Tradition haben noch lange nicht ausgedient. Wer diese auch ganz ohne HTML5 umsetzen möchte, kann dies mit jQuery bzw. JavaScript tun. Ich habe vor Jahren ein Beispiel dafür in reinem JavaScript erstellt und dies irgendwann auf jQuery umgestellt. Wie einfach die Entwicklung ist, soll folgendes Beispiel zeigen.

http://lab.schenk2000.de/adv/index.html

Das HTML-Template
Der HTML-Teil ist erstaunlich einfach. Wir benötigen eine Seite, in der wir jQuery und die nötigen CSS-Dateien unterbringen. Der Body-Bereich hat folgenden Aufbau:

<div id="stage">
<img src="img/stop.gif" id="player" />
</div>
<span id="output"></span>
<span id="output2"></span>

Viel HTML ist nicht nötig, um das Beispiel ans Laufen zu bringen. Ein DIV fungiert als “Bühne“, welches neben der Hintergrundgrafik auch gleichzeitig die Ausmaße unteres Beispiels festlegt. Innerhalb dieses DIVs wird ein IMG-Tag mit einem transparenten (und manchmal animierten) GIF versehen. Dies Image ist unsere Spielfigur. Die beiden unteren SPANs dienen lediglich zur Ausgabe der Mausposition und können bei bedarf auch entfernt werden. Allerdings erleichtern sie bei der Entwicklung die Positionsfindung auf dem DIV.

Die Funktionen
Der Script-Teil unserer Seite hat folgenden Aufbau:

<script type="text/javascript">
var wPlayer             = 69,
    hPlayer             = 110,
    xPlayer             = 600,
    yPlayer             = 500,
    yHorizon            = 200,
    yHorizonClick       = 500,
    PlayerZoomFactor    = 4,
    /* imgagesize */
    wBG                 = 1000,
    hBG                 = 750,
    /* helpervars */
    pX                  = xPlayer,
    pY                  = yPlayer,
    saveX               = xPlayer,
    saveY               = yPlayer,
    xArrived            = false,
    yArrived            = false,
    /* mouseposition */
    mx                  = 600,
    my                  = 500;

function run()
{
    var oldX = saveX,
        oldY = saveY,
        sizeFactorX = (wBG / oldX),
        sizeFactorY = (hBG / oldY),
        wNew = Math.round(wPlayer / sizeFactorX),
        hNew = Math.round(hPlayer / sizeFactorY),
        dir_left = false,
        dir_up = false;

    /* direction and animpic */
    if(oldX < pX)
    {
        dir_left = false;
    }
    else
    {
        dir_left = true;
    }

    if(oldY < pY)
    {
        dir_up = false;
    }
    else
    {
        dir_up = true;
    }

    if(xArrived === false)
    {
        if(oldX < (pX + 10) && oldX > (pX - 10))
        {
            xPlayer = pX;
            xArrived = true;
        }
        else
        {
            if(dir_left === true)
            {
                xPlayer = oldX - 5;
            }
            else
            {
                xPlayer = oldX + 5;
            }
        }
        $('#player').css('left',''+xPlayer+'px');
    }

    if(yArrived === false)
    {
        if(oldY < (pY + 10) && oldY > (pY - 10))
        {
            yPlayer = pY;
            yArrived = true;
        }
        else
        {
            if(dir_up === true)
            {
                yPlayer = oldY - 5;
            }
            else
            {
                yPlayer = oldY + 5;
            }
        }
        $('#player').css('top',''+yPlayer+'px');
    }

    if(yPlayer > 0)
    {
        hNew = Math.round(PlayerZoomFactor * hPlayer /
                        ((hBG-yHorizon) / (yPlayer-yHorizon)));
    }
    else
    {
        hNew = 0;
    }

    $('#player').css('height',''+hNew+'px');
    saveX = xPlayer;
    saveY = yPlayer;

    /* player not arrived */
    if(xArrived === false || yArrived === false)
    {
        window.setTimeout("run()", 100);
    }
    else
    {
        $('#player').attr('src','img/stop.gif');
    }
}

$(document).ready(function()
{
    $('#player').css('left',''+mx+'px');
    $('#player').css('top',''+my+'px');

    $('#stage').click(function()
    {
        if(parseInt(my,10) >= yHorizonClick) /* set movable space */
        {
            $('#player').attr('src','img/anim.gif');
            var sizeFactorX = (wBG /  parseInt(mx,10)),
                sizeFactorY = (hBG / parseInt(my,10)),
                wNew = Math.round(wPlayer / sizeFactorX),
                hNew = Math.round(hPlayer / sizeFactorY);
            pX = parseInt(mx,10) - (PlayerZoomFactor * wNew / 2);
            pY = parseInt(my,10) - (PlayerZoomFactor * hNew / 2);
            xArrived = false;
            yArrived = false;
            run();
        }
    });
});

$(window).load(function()
{
    try
    {
        $("div").mousemove(function(e)
        {
            var pageCoords = "(" + e.pageX + ", " + e.pageY + ")",
                clientCoords = "(" + e.clientX + ", " + e.clientY + ")";
            $("span:first").text("page: " + pageCoords);
            $("span:last").text("client: " + clientCoords);
            mx = e.clientX;
            my = e.clientY;
        });
    }
    catch(e){}
});
</script>

Neben den Variablen, die Position, Größe, … etc. festlegen, gibt es die Hauptfunktion run() und zwei Hilfsfunktionen, die nach Erstellung der Seite bzw. nach dem Laden des Dokuments aufgerufen werden. $(document).ready legt die Startposition der Figur fest und initialisiert das Click-Event für die Maus. $(window).load inisialisiert die Mausbewegung über dem DIV und kann auch entfernt werden (außerdem gibt es elegantere jQuery Methoden – wer mag kann sie einbauen).
Unsere Hauptfunktion run() hat mehrere Aufgaben. Sie muss nach jedem Klick den nächsten Schritt berechnen, sichergehen dass der Click nicht oberhalb der Horizontlinie auftrat und die Größe der Figur neu setzen. Die Berechnung des Schrittes ist der Zentrale Kern, bei geprüft werden muss, ob die Spielfigur auch angekommen ist. Sollte das der Fall sein, wird das animierte GIF wieder auf das statische gesetzt und die Bewegung wird gestoppt.

Viel Spaß beim Ausprobieren.