Hallo Leute,

ich habe ein Problem. Ich muss ein Spiel programmieren. Ich muss ein Fußballspiel machen. Also der Ball saust herum und ich kann ihn mit meiner Maus wenn ich auf der gleichen Position bin, abprallen lassen. So ähnlich wie bei einem Breakout Spiel.
Das Problem das ich habe ist:

Wie mache ich das, dass der Ball wenn das Bild (das die Maus verfolgt) trifft, die Richtung ändern oder sozusagen abprallt.
Bitte um Hilfe!! ich suche schon seit 10 Tagen danach und muss es nächste Woche abgeben.
DANKE

Hier ist mein JS-Teil:

<div onmouseover="treffer()" id="ball"><img alt="ball" src="ball.jpg" /></div>

<div id="box" style="position: absolute; left: 0px; top: ; z-index:2; width:57px; height:;"><img  id="fuss" src="fuss.png" width="20" height="80" alt="" /></div>

<script>

var x=Math.round(Math.random());
var y=Math.round(Math.random());
var xrichtung="rechts";
var yrichtung="unten";
var step=3;

var x1=100;
var y1=0;
var x1richtung="links";
var y1richtung="unten";
var step1=12;
var ball4;

function move()
{
    if(xrichtung=="rechts")
    {
        x+=step;
    }
    else
    {
        x-=step;
    }

if(yrichtung=="unten")
    {
        y+=step;
    }
    else
    {
        y-=step;
    }

if(x>750)
    {
       xrichtung="links";
    }
    if(x<0)
    {
       xrichtung="rechts";
    }
    if(y>500)
    {
       yrichtung="oben";
    }
    if(y<0)
    {
       yrichtung="unten";
    }

document.getElementById("ball").style.left=x+"px";
document.getElementById("ball").style.top=y+"px";
    setTimeout("move()",0);
}

move();

var Xpos,Ypos;
document.onmousemove=ball;
function ball(s)
{
 Xpos = (document.all) ? window.event.x + document.body.scrollLeft : s.pageX;
Ypos = (document.all) ? window.event.y + document.body.scrollTop : s.pageY;

//Ball
     fad=document.getElementById("box");

fad.style.left=Xpos-10+"px";

if(Ypos<5)Ypos=5;
    if(Ypos>600)Ypos=600;
    fad.style.top=Ypos-20+"px";

}