Doppelten Code vermeiden

[Parayia]

So da bin ich schon wieder mit dem nächsten problem ^^
Funktioniert alles mit meinem auto so isses nicht.
ABER ich soll den doppelten code vermeiden in meinem switch.Ich hab nur leider absolut keine Ahnung mehr wie ich das machen soll... wäre nett wenn ich nochmal so tolle hilfe bekommen würde

Mein Code:

var x = 50;    //variable für die x-achse
var y = 50;    //variable für die y-achse
var t = 8;    //variable für die Zeit 
var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
var move = null;
function go(anweisung)  
{
        if(anweisung == "rechts" || anweisung == "links" || anweisung == "runter" ||anweisung == "rauf" ||anweisung == "right")
        {
            if(move != null)
            {
                clear(move);
            }
                move = window.setInterval("moveto('"+anweisung+"')", 40);            
        }       
        if(anweisung=="turbo")
                    {
                        t = t + 10;
                    }
        if(anweisung == "slow")
                    {
                        t =  t - 5;
                    }

        else if(anweisung == "stop")
                    { window.clearInterval (move);}
}
function clear(interval)
{
    window.clearInterval (interval);
}
function moveto(richtung)
{
    switch(richtung)
    {
    case "links":
            if (x > 20)             
            {  
                 x = x -  t;
                 b = "url(images/links.png)"; 
                 document.getElementById("auto").style.left  = (x  + "px"); 
                 document.getElementById("auto").style.backgroundImage = b;        
            }
if( y > 165 && y<350 && x > 500 && x < 840)
            {
                alert("Sie sind in das Loch gefahren");
                clear(move);
            }  
    break;
    case "rechts":
            if (x < 1400) 
            {             
                x = x +  t; 
                b = "url(images/vor.png)"; 
                document.getElementById("auto").style.left  = (x  +   "px"); 
                document.getElementById("auto").style.backgroundImage = b;       
            }  
if( y > 165 && y<350 && x > 500 && x < 840)
            {
                alert("Sie sind in das Loch gefahren");
                clear(move);
            }  
    break;
    case "rauf":
            if (y > 50)         
            {
                y = y -  t;
                b = "url(images/rauf.png)";
                 document.getElementById("auto").style.top  = (y  + "px");
                document.getElementById("auto").style.backgroundImage= b;          
            }     
if( y > 165 && y<350 && x > 500 && x < 840)
            {
                alert("Sie sind in das Loch gefahren");
                clear(move);
            }  
    break;
    case "runter":
            if (y < 450 )
            {
                y = y +  t; 
                b = "url(images/runter.png)";
                document.getElementById("auto").style.top  = (y  + "px");
                document.getElementById("auto").style.backgroundImage= b;                  
            }
if( y > 165 && y<350 && x > 500 && x < 840)
            {
                alert("Sie sind in das Loch gefahren");
                clear(move);
            }    
    break;
    case "right":
            if (x < 1400) 
            {             
                x = x +  t; 
                b = "url(images/rechts.png)"; 
                document.getElementById("auto").style.left  = (x  +   "px"); 
                document.getElementById("auto").style.backgroundImage = b;             
            }
if( y > 165 && y<350 && x > 500 && x < 840)
            {
                alert("Sie sind in das Loch gefahren");
                clear(move);
            }   
            break;  
    case "crash":
            if(y > 165 && y<350)
            {
            alert("dklfhjsfdk");}   
    }
}
function buttonrechts()
{
    if(b=='url(images/rechts.png)'){go('rechts');}
    if(b=='url(images/vor.png)'){go('runter');}
    if(b=='url(images/runter.png)'){go('links');}
    if(b=='url(images/links.png)'){go('rauf');}
    if(b=='url(images/rauf.png)'){go('rechts');}
}            
function buttonlinks()
{
    if(b=='url(images/vor.png)'){go('links');}
    if(b=='url(images/links.png)'){go('runter');}
    if(b=='url(images/runter.png)'){go('right');}
    if(b=='url(images/rechts.png)'){go('rauf');} 
    if(b=='url(images/rauf.png)'){go('links');} 
}

[Kropff]

Pack das in eine eigene Funktion

document.getElementById("auto").style.left  = (x  + "px"); 
document.getElementById("auto").style.backgroundImage = b;

und übergib x und b als Parameter.

Peter

[Parayia]

das dachte ich mir ^^ aber ich weiß nicht wie ichs in der praxis umsetzen soll
das in eine funktion zu schreiben is ja nich schwer ^^ ... aber die variablen immer übergeben ... ich kriegs nich hin ^^

[Kropff]

Wo ist das Problem?

function machWas (x,b)
{
  document.getElementById("auto").style.left  = (x  + "px"); 
  document.getElementById("auto").style.backgroundImage = b;
}
case "links":
  if (x > 20)             
  {  
    x = x -  t;
    b = "url(images/links.png)"; 
    machWas(x,b);             
  }

Peter

[Parayia]

joa stimmt

danke dir ^^ war ja echt einfacher als ich dachte
das ganze sieht jetzt so aus ^^
oder gehts noch einfacher?

    case "links":
            if (x > 20)             
            {  
                 x = x -  t;
                 b = "url(images/links.png)"; 
                 movementx(x,b);     
            }

function movementx (x,b)
{
    document.getElementById("auto").style.left  = (x  +   "px"); 
    document.getElementById("auto").style.backgroundImage = b;  
}

und für Y nochmal eine funktion nur halt das Y übergeben wird anstatt x ^^

[AmicaNoctis]

Hallo,

einen Vorschlag hätte ich noch. Die Methode getElementById ist relativ teuer, daher wäre es besser, es so zu schreiben:

var stl = document.getElementById("auto").style;
stl.left = x + "px"; // die Klammern braucht man hier nicht 
stl.backgroundImage = b;  

Edit: Um noch mehr getElementById-Aufrufe zu sparen, kannst du dein auto auch gleich als globale Variable deklarieren:

var auto;
var x = 50;    //variable für die x-achse
var y = 50;    //variable für die y-achse
var t = 8;    //variable für die Zeit 
var b = "url(images/rechts.png)"; //variable für den Background des Bereichs
var move = null;

window.onload = function () {
    auto = document.getElementById("auto");
};

…

Gruß,

Amica

[Parayia]

ist doch eigentlich total egal ob ich das so mach oder nicht ^^ hab ja jetzt das get elementbyid in ne var gepackt

und weiter gehts mit entschlackung ^^ man hat nämlich noch mehr zu meckern an meinem code

naja eigentlich sinds nur noch 2 sachen ^^
und zwar ... damit das auto im kreis fährt wenn ich rechts klick ... also
rechts -> runter->links->hoch->rechts usw.
mach ich das an den bildern fest.
ich hab jetzt überlegt das mit einem array zu machen ... also alle bilder in ein array fassen und dann ausgeben ... anstatt die url jedes mal hinzuschreiben
das ganze sieht nämlich bisher so aus

function buttonrechts()
{
    if(b=='url(images/rechts.png)'){go('rechts');}
    if(b=='url(images/vor.png)'){go('runter');}
    if(b=='url(images/runter.png)'){go('links');}
    if(b=='url(images/links.png)'){go('rauf');}
    if(b=='url(images/rauf.png)'){go('rechts');}
}            
function buttonlinks()
{
    if(b=='url(images/vor.png)'){go('links');}
    if(b=='url(images/links.png)'){go('runter');}
    if(b=='url(images/runter.png)'){go('right');}
    if(b=='url(images/rechts.png)'){go('rauf');} 
    if(b=='url(images/rauf.png)'){go('links');} 
}