Tweet
Wie einigen schon bekannt ist bastel ich momentan ... IMMERNOCH ^^ .. an meinem Javascript auto ... jetzt will ich eigentlich etwas ganz einfaches machen und zwar ein viereckiges hindernis einbauen, ist bei mir jetzt ein div bereich.
wenn der wagen in diesen bereich fährt soll eine fehlermeldung ausgegeben werden.
soweit bisher mein javascript dazu:
Die frage ist jetzt wie krieg ich da die abfrage hin wann er das hindernis passiert und wann nicht?
dazu mein css code nochmal ^^ damit man sich das vorstellen kann und evtl ausprobieren
wenn der wagen in diesen bereich fährt soll eine fehlermeldung ausgegeben werden.
soweit bisher mein javascript dazu:
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 movementx(x,b)
{
document.getElementById("auto").style.left = (x + "px");
document.getElementById("auto").style.backgroundImage = b;
}
function movementy(y,b)
{
document.getElementById("auto").style.top = (y + "px");
document.getElementById("auto").style.backgroundImage= b;
}
function moveto(richtung)
{
switch(richtung)
{
case "links":
if (x > 20)
{
x = x - t;
b = "url(images/links.png)";
movementx(x,b);
crash(x);
}
break;
case "rechts":
if (x < 1400)
{
x = x + t;
b = "url(images/vor.png)";
movementx(x,b);
crash(x);
}
break;
case "rauf":
if (y > 150)
{
y = y - t;
b = "url(images/rauf.png)";
movementy(y,b)
}
break;
case "runter":
if (y < 520 )
{
y = y + t;
b = "url(images/runter.png)";
movementy(y,b);
}
break;
case "right":
if (x < 1400)
{
x = x + t;
b = "url(images/rechts.png)";
movementx(x,b);
}
break;
}
}
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');}
}
dazu mein css code nochmal ^^ damit man sich das vorstellen kann und evtl ausprobieren
Code:
body
{
width:700px;height:700px;
background-image:url(images/camouflage.png);
}
#auto
{
top: 100px;
left: 20px;
position: absolute;
background-image:url('images/rechts.png');
width:200px;
height:200px;
background-repeat:no-repeat;
}
#steuer
{
padding:10px;
background-image:url('images/camouflage.png');
min-height:100px;
width:200px;
}
#steuer input#left {width:50px;position:absolute;top:55px;left:50px;}
#steuer input#right{width:50px;position:absolute;top:55px;left:150px;}
#steuer input#up{width:50px;position:absolute;top:30px;left:100px;}
#steuer input#down{width:50px;position:absolute;top:80px;left:100px;}
#steuer input#stop{width:50px;position:absolute;top:55px;left:100px;}
#steuer input#turbo{width:50px;position:absolute;left:300px;}
#steuer input#slow{width:50px;position:absolute;left:250px;}
#fahren
{
height:600px;
width:1600px;
border:5px ridge green;
opacity:0.2;
filter:alpha(opacity=60);
background:white;
}
input{background-color:#FF9900;border:2px ridge silver;}
#mauer {width:200px;height:200px;background:black;margin-left:500px;margin-top:150px;}
Kommentar