Tjekke ideen bag mit spil(ping pong)

Altså ikke så meget om der er nogle smutveje jeg kunne have taget ved at lægge nogle elementer i en variabel eller lign.
Men selve ideen :-)

Total nice kode!

Må jeg ikke be'-om be'-om be'-om låne den til at lave en lille "hvad kan jeg lave i PHP"-test?

- du skal nok blive nævnt som koncept-udvikler (jeg vil sgu ikke narre dig for copyrighten på det her!) ;-)

Jeg skal også nok vise dig den, når den kommer ud.

[ Og jeg ville høre hvordan folk synes koden er, altså om selve måden at kode det på er den bedste. ]
I dette tilfælde synes jeg ikke, at man kan sige, at en anden kode ville være bedre og heller ikke dårligere for den sags skyld... Det ville mere være, hvis der var noget replace, noget gennemløb af elementer, nogle flere nodeelements der skulle tilføjes og/eller fjernes, og på hvilken måde dette så skete (innerHTML vs. DOM), at man kunne sige, noget om måden koden fungerer på var god eller dårlig.

- M.h.t. håndteringen af variabler vil jeg nok knytte nogle forbindelser oppe i funktionen start() istedet for init() - jeg tænker bl.a. her på forbindelsen du laver for hver 100ms til bat og bold selvom js allerede har tildelt denne forbindelse... Ved ikke hvor stor/lille effekt det har...

- Så ville jeg nok skrive if sætningerne lidt ned (i kortere format).

- Jeg ville nok også i start definere nogle offsetWidth og Height på bold og bat og ændre js koden, så jeg checkede på udregninger baseret på disse, så jeg kunne nøjes med at ændre i stylesheet istedet for i selve js koden.

- Jeg ville nok kode timeout værdien om i en variabel, så jeg kunne skrue op eller ned for hastigheden.

- Denne her: <div id="new" onClick="window.location.href=''">Nyt Spil</div>
Ville jeg rette til denne her: <div id="new" onClick="window.location.reload(true);">Nyt Spil</div>

- Og så ville jeg i starten af init definere korte variabler til offsetLeft og Top på bat og bold, så js har variablerne istedet for, at den skal checke dem, hver gang den skal bruge dem. Ved ikke hvor meget/lidt det betyder...

(OT: - Jeg ville nok sørge for at boldens bredde og højde ville kunne komme til at passe så den ramte lige på højre kant (495%15 = 5 pixel den ryger uden til)... og evt. rette bat'et til så den ligeledes kørte op lige når den ramte battet... og måske putte det antal pixels der lægges til ind i en variabel også og så skifte variablen baseret på en random når den rammer en væg...)

[ Eller hvordan skal jeg gøre - har jeg tænkt rigtigt :-) ]
... Jeg håber det var det du tænkte på m.h.t. koden - du har jo tænkt rigtig... koden virker jo ... og så længe en kode virker, er den aldrig "rigtig" forkert, den kan måske gøres kortere eller mere effektiv, men det gør den ikke forkert (med mindre vi havde talt om innerHTML vs. JSDOM/XMLDOM, så er der jo ikke tvivl om, hvad der bør/skal benyttes i fremtiden) :)

forfatterksl : Du bruger bare alt det du vil :-)

mclemens: mange tak for den grundige gennemgang, ja jeg vil gerne have den til at ramme præcist, men skal jeg så lave en div som får defineret bredde og højde med nogle variabler alla (boldbredde*boldbreddeantal) ???
Mht. if'erne hvordan ville du så korte dem ned ? O:-)

Og forresten min "MoveBat" funktion.
Er der en anden måde at lave den på, så battet flytter sig mere flydende?
For specielt i FF skal man trykke hver gang battet skal rykke sig, der kan man ikke bare holde knappen nede som i IE.

kigger på det iløbet af idag... der er lidt problemer med at ff opfatter border som en del af elementet når man tager offsetTop og offsetLeft derfor hjalp det at lave det uden border's (måske senere kan man sætte en ekstra wrapper div omkring elementer der skal have en border) men hurtigst var lige at slette baggrunden og køre baggrundsfarve, indstille +10 / -10 til +5 / -5 og sænke interval for at holde samme hastighed... kigger lige på if sætninger, variabel håndtering og bat inden jeg poster...

Beautifull mclemens, ved at ændre det til +5 / -5 og sænke interval til 50, rammer den perfekt :-D
Glæder mig til din næste post ;o)

Ikke helt i FF der smutter den et par pixels skævt i forhold til i IE, hvis man ikke sletter borderen også... da den regnes med som jeg nævnte - men evt. en border om selve div'en der måles på senere...

point og liv tæller?

- hmm, det er måske sjovt nok selv at lave det...

kigger lige på bat'delen lidt senere...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ping pong</title>

<style>
#bane{
    overflow:hidden;
    position:relative;
    width:500px;
    height:400px;
    background:blue;
}
#bold{
    position:absolute;
    width:15px;
    height:15px;
    line-height:0px;
    font-size:0px;
    top:0px;
    left:0px;
    background:red;
}
#bat{
    position:absolute;
    width:100px;
    height:15px;
    line-height:0px;
    font-size:0px;
    left:200px;
    bottom:10px;
    background:yellow;
}
#start{
    text-align:center;
    margin:5px;
    cursor:pointer;
    width:100px;
    border:1px solid #000;
}
#new{
    display:none;
    text-align:center;
    margin:5px;
    cursor:pointer;
    width:100px;
    border:1px solid #000;
}
</style>

<script type="text/javascript">

var bane, baneh, banew, bat, batw, bath, bold, boldw, boldh, vertical, horisontal;

window.onload=function(){
bat = document.getElementById("bat");
bath=bat.offsetHeight;
batw=bat.offsetWidth;
bold = document.getElementById("bold");
boldh=bold.offsetHeight;
boldw=bold.offsetWidth;
bane = document.getElementById("bane");
baneh=bane.offsetHeight;
banew=bane.offsetWidth;
}

function start(){
if(confirm("Spillet starter hvis du trykket 'OK'!\n\nDu styrer med piltasterne! ")){
  document.getElementById("start").style.display = "none";
  document.getElementById("new").style.display = "block";
  init();
}
}

function init(){
boldl=bold.offsetLeft;
boldt=bold.offsetTop;
batl=bat.offsetLeft;
batt=bat.offsetTop;

horisontal=(boldl<=0)?"right":(boldl+boldw>=banew)?"left":horisontal;
vertical=(boldt<=0)?"down":((boldt==(batt-bath))&&((boldl+boldw)>=batl)&&(boldl<=(batl+batw)))?"up":((boldt+bold.offsetHeight)==baneh)?"reset":vertical; 

bold.style.left=(horisontal=="right")?(boldl+5)+"px":(boldl-5)+"px";
bold.style.top=(vertical=="down")?(boldt+5)+"px":(boldt-5)+"px";

if(vertical=="reset"){
  vertical="down";
  bold.style.top=0+"px";
  bold.style.left=Math.floor(Math.random()*banew)+"px";
}

window.setTimeout("init();", 50);
}
function MoveBat(e){
    e = e ? e : window.event;
    if(e.keyCode=="37" && batl>0){
        bat.style.left = (batl - 10) + "px";
    }
    if(e.keyCode=="39" && (batl+batw)<banew){
        bat.style.left = (batl + 10) + "px";
    }
}
document.onkeydown = MoveBat;
</script>
</head>
<body>
<div align="center">
    <h1>Ping Pong</h1>
    <div id="bane">
        <div id="bat">&nbsp;</div>
        <div id="bold">&nbsp;</div>

    </div>
    <div id="start" onClick="start();">Start</div>
    <div id="new" onClick="window.location.reload(true);">Nyt Spil</div>
</div>
</body>
</html>

Point og Liv tæller kan jeg godt selv lave ;o)
Lige nu vil jeg bare lave en grundskitse som jeg kan arbejde videre på, men den skal helst være i orden fra starten af :-D
Men hvis jeg nu sletter border og i stedet sætter en background-color:#000; på så burde den vises ens?

PS: Ja jeg vil hellere bruger background-color end backgound, men den diskution har vi haft før ;D

[ Ja jeg vil hellere bruger background-color end backgound ]
- den retter du jo bare ;)

[ Men hvis jeg nu sletter border og i stedet sætter en background-color:#000; på så burde den vises ens? ]
- Jeps det var det jeg gjorde :)
... dog gjorde jeg så man kan nøjes med at ændre i stylesheet (dimenensioner istedet for i scriptet... det skal bare ved "modulus" med 5 give 0 :)

[ For specielt i FF skal man trykke hver gang battet skal rykke sig, der kan man ikke bare holde knappen nede som i IE. ]
I min FF går de fint??? ... - her er en kompact if i den... men den er jo ikke "bedre" end den mere overskuelig if ... den diskussion har vi vist også haft :)

function MoveBat(e){
e=e?e:window.event;
bat.style.left=(e.keyCode=="37" && batl>0)?(batl-10)+"px":(e.keyCode=="39"&&(batl+batw)<banew)?(batl+10)+"px":batl;
}

I min FF går de fint??? -> I min FF går de(t) fint??? :D (FF 1.0.5.1)

legede lige lidt med bat'et...
her er mit nuværende script:

<script type="text/javascript">

var bane, baneh, banew, bat, batw, bath, bold, boldw, boldh, vertical, horisontal;
batv=0;

window.onload=function(){
bat = document.getElementById("bat");
bath=bat.offsetHeight;
batw=bat.offsetWidth;
bold = document.getElementById("bold");
boldh=bold.offsetHeight;
boldw=bold.offsetWidth;
bane = document.getElementById("bane");
baneh=bane.offsetHeight;
banew=bane.offsetWidth;
}

function start(){
if(confirm("Spillet starter hvis du trykket 'OK'!\n\nDu styrer med piltasterne! ")){
  document.getElementById("start").style.display = "none";
  document.getElementById("new").style.display = "block";
  init();
}
}

function init(){
boldl=bold.offsetLeft;
boldt=bold.offsetTop;
batl=bat.offsetLeft;
batt=bat.offsetTop;

horisontal=(boldl<=0)?"right":(boldl+boldw>=banew)?"left":horisontal;
vertical=(boldt<=0)?"down":((boldt==(batt-bath))&&((boldl+boldw)>=batl)&&(boldl<=(batl+batw)))?"up":((boldt+bold.offsetHeight)==baneh)?"reset":vertical; 

bold.style.left=(horisontal=="right")?(boldl+5)+"px":(boldl-5)+"px";
bold.style.top=(vertical=="down")?(boldt+5)+"px":(boldt-5)+"px";

if(vertical=="reset"){
  vertical="down";
  bold.style.top=0+"px";
  bold.style.left=Math.floor(Math.random()*banew)+"px";
}

bat.style.left=batl+batv+"px";

window.setTimeout("init();", 50);
}

function MoveBat(e){
e=e?e:window.event;
batv=(e.keyCode=="37" && batl>0)?-5:(e.keyCode=="39"&&(batl+batw)<banew)?5:0;
}

document.onkeydown = MoveBat;
document.onkeyup = function(){batv=0;}
</script>

edit: dimenensioner -> dimensioner

hov, det sidste gik ikke så godt battet kan ryge uden til...

sådan :P

...
bat.style.left=(((batl+batv)>=0)&&((batl+batv+batw)<=banew))?batl+batv+"px":batl;

window.setTimeout("init();", 50);
}

function MoveBat(e){
e=e?e:window.event;
batv=(e.keyCode=="37")?-5:(e.keyCode=="39")?5:0;
}

document.onkeydown = MoveBat;
document.onkeyup = function(){batv=0;}
</script>
...

hmm måske kode-etisk mæssigt burde batl; til
sidst i øverste linje skiftes til batl+"px";

hold da op clemens.. tak for de mange gode svar...
Men kan desværre først kigge på det i morgen.
1: Det er weekend
2: Pokal Classic var på tilbud i brugsen
3: Jeg har fri i morgen...
;o)

1: Yes, det er nu rart :)
2: Det er sikkert fedt nok :)
3: Snakkes/skrives ved imorgen :)

;)

Det virker skide godt mclemens.. Men i FF der rykker battet sig automatisk langsomt mod venstre, hvis man ikke trykker på noget??

kigger lige på det...

hmm, det gør det ikke på min :/
... her er min nuværende med alle de kludrede rettelser...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ping pong</title>

<style>
#bane{
    overflow:hidden;
    position:relative;
    width:500px;
    height:400px;
    background:blue;
}
#bold{
    position:absolute;
    width:15px;
    height:15px;
    line-height:0px;
    font-size:0px;
    top:0px;
    left:0px;
    background:red;
}
#bat{
    position:absolute;
    width:100px;
    height:15px;
    line-height:0px;
    font-size:0px;
    left:200px;
    bottom:10px;
    background:yellow;
}
#start{
    text-align:center;
    margin:5px;
    cursor:pointer;
    width:100px;
    border:1px solid #000;
}
#new{
    display:none;
    text-align:center;
    margin:5px;
    cursor:pointer;
    width:100px;
    border:1px solid #000;
}
</style>

<script type="text/javascript">

var bane, baneh, banew, bat, batw, bath, bold, boldw, boldh, vertical, horisontal;
batv=0;

window.onload=function(){
bat = document.getElementById("bat");
bath=bat.offsetHeight;
batw=bat.offsetWidth;
bold = document.getElementById("bold");
boldh=bold.offsetHeight;
boldw=bold.offsetWidth;
bane = document.getElementById("bane");
baneh=bane.offsetHeight;
banew=bane.offsetWidth;
}

function start(){
if(confirm("Spillet starter hvis du trykket 'OK'!\n\nDu styrer med piltasterne! ")){
  document.getElementById("start").style.display = "none";
  document.getElementById("new").style.display = "block";
  init();
}
}

function init(){
boldl=bold.offsetLeft;
boldt=bold.offsetTop;
batl=bat.offsetLeft;
batt=bat.offsetTop;

horisontal=(boldl<=0)?"right":(boldl+boldw>=banew)?"left":horisontal;
vertical=(boldt<=0)?"down":((boldt==(batt-bath))&&((boldl+boldw)>=batl)&&(boldl<=(batl+batw)))?"up":(boldt==baneh)?"reset":vertical; 

bold.style.left=(horisontal=="right")?(boldl+5)+"px":(boldl-5)+"px";
bold.style.top=(vertical=="down")?(boldt+5)+"px":(boldt-5)+"px";


if(vertical=="reset"){
  vertical="down";
  bold.style.top=0+"px";
  bold.style.left=Math.floor(Math.random()*banew)+"px";
}

bat.style.left=(((batl+batv)>=0)&&((batl+batv+batw)<=banew))?batl+batv+"px":batl;

window.setTimeout("init();", 50);
}

function MoveBat(e){
e=e?e:window.event;
batv=(e.keyCode=="37")?-5:(e.keyCode=="39")?5:0;
}

document.onkeydown = MoveBat;
document.onkeyup = function(){batv=0;}
</script>
</head>
<body>
<div align="center">
    <h1>Ping Pong</h1>
    <div id="bane">
        <div id="bat">&nbsp;</div>
        <div id="bold">&nbsp;</div>

    </div>
    <div id="start" onClick="start();">Start</div>
    <div id="new" onClick="window.location.reload(true);">Nyt Spil</div>
</div>
</body>
</html>

hov hvis man ikke trykker på noget i starten flytter den slet ikke bagefter :P
... giver dig ret der må være en fejl et eller andet sted...

hmm, pudsigt lige før ville den ikke hvis man lod den stå et stykke tid ... nu kan jeg bare ikke få den til at lave fejlen igen :/

... kan slet ikke få den til at give den fejl (eller den anden igen) :/ - har du en anderledes kode?

joh, når man trykkede på pil op/ned lavede den fejlen... kigger på det nu
det er nok denne jeg har forkortet lidt skævt...
function MoveBat(e){
e=e?e:window.event;
batv=(e.keyCode=="37")?-5:(e.keyCode=="39")?5:0;
}

nej det er pinligt... jeg havde fokus rettet et forkert
sted de par gange jeg ikke kunne flytte battet... :D

Battet flytter sig stadig til venstre automatisk hvis man ikke trykker på noget..
I hvertfaldi FF - har ikke IE.

Hmm, har testet i både IE 6.0 og FF 1.5.0.1 den bevæger
sig ikke, når jeg ikke trykker på noget...

- Hvad version FF bruger du webstuff?
- Er det i den version jeg postede?
- Hvis du ændrer keyCodes på venstre/højre taster til noget andet hjælper det så? ... kunne måske være noget med keyCode på den FF du kører - eller det system du bruger :/

- Er det i den version jeg postede? -> - Er det den version af spillet jeg postede?

Jeg kører; Linux@FF
Jeg prøver lige at ændre det til 38 og 40 i stedet, kan jo godt være mine taster der er i udu :-)
Jeg tog først hele den version af spillet du postede, og bagefter den modificerede udgave af MoveBat()

Den bevæger sig stadig automatisk ;o)

Den smutter ingen steder her :/
... undskyld jeg først svarer nu webstuff...
vi prøver at fejl checke - det skulle jo helst også virke på linux :/
... det er nok bedst at checke hvad værdierne siger (alerts) og om de ændres... jeg har også lige rettet batl -> batl+"px"; det havde jeg ikke gjort før - ved ikke om det hjælper lidt på linux'en...

...
alert(batl);
alert(bat.style.left);
bat.style.left=(((batl+batv)>=0)&&((batl+batv+batw)<=banew))?batl+batv+"px":batl+"px";

window.setTimeout("init();", 1000);
}

function MoveBat(e){
...

Får følgende alerts (ja der er også nogle blanke):

199
[blank]
198
199px
197
198px
196
197px
195
196px
194
195px

Så som du kan se er der et mønster i det, bare ikke ret logisk :-D

Hmm, det typer på offsetLeft ikke bevares til 200px... hvis der nu havde været en 1px border eller måske 1px padding sat på gav det fin logik... kan dog ikke se hvorfor ellers... nåh, anyhow har ikke linux men prøv lige at se om denne hjælper... har lavet lidt mellemrum ved rettelsen


<script type="text/javascript">

var bane, baneh, banew, bat, batw, bath, bold, boldw, boldh, vertical, horisontal;
batv="";

window.onload=function(){
bat = document.getElementById("bat");
bath=bat.offsetHeight;
batw=bat.offsetWidth;
bold = document.getElementById("bold");
boldh=bold.offsetHeight;
boldw=bold.offsetWidth;
bane = document.getElementById("bane");
baneh=bane.offsetHeight;
banew=bane.offsetWidth;
}

function start(){
if(confirm("Spillet starter hvis du trykket 'OK'!\n\nDu styrer med piltasterne! ")){
  document.getElementById("start").style.display = "none";
  document.getElementById("new").style.display = "block";
  init();
}
}






function init(){
boldl=bold.offsetLeft;
boldt=bold.offsetTop;
batl=bat.style.left;
batl=+batl.replace("px","");
batt=bat.offsetTop;






horisontal=(boldl<=0)?"right":(boldl+boldw>=banew)?"left":horisontal;
vertical=(boldt<=0)?"down":((boldt==(batt-bath))&&((boldl+boldw)>=batl)&&(boldl<=(batl+batw)))?"up":(boldt==baneh)?"reset":vertical;

bold.style.left=(horisontal=="right")?(boldl+5)+"px":(boldl-5)+"px";
bold.style.top=(vertical=="down")?(boldt+5)+"px":(boldt-5)+"px";


if(vertical=="reset"){
  vertical="down";
  bold.style.top=0+"px";
  bold.style.left=Math.floor(Math.random()*banew)+"px";
}





if(batl==""){batl=200;}
bat.style.left=(((batl+batv)>=0)&&((batl+batv+batw)<=banew))?batl+batv+"px":batl+"px";






window.setTimeout("init();", 50);
}

function MoveBat(e){
e=e?e:window.event;
batv=(e.keyCode=="37")?-5:(e.keyCode=="39")?5:0;
}

document.onkeydown = MoveBat;
document.onkeyup = function(){batv=0;}
</script>

Så rykker den sig ikke mere af sig selv, men det nye problem er at hvis battet rammer venstre kant, så ryger det ind på midten.

joh hvis jeg smider en border på 1px på banen så laver den fejlen
... det skulle vel ikke være det der er sket hos dig webstuff :D

update... har ikke kigget på det andet du nævner...

i scriptet ovenover skal
if(batl==""){batl=200;}
rettes til:
if((batl=="")&&(bat.style.left!="0px")){batl=200;}
- for at undgå det hop til midten

Hold da kæft det kører det her, nu er der bare det lille problem at hvis man ikke rammer bolden, så er spillet slut, for der kommer ikke en "ny" :-D

webstuff, kører du med en border???

... jeg er nødt til at vide hvad jeg scripter op til for at scripte...

Nej kører ikke med border, her er hele mit script pt:
----------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Ping pong</title>

<style>
body{
    font-family:verdana;
}
#bane{
    overflow:hidden;
    position:relative;
    width:500px;
    height:400px;
    background-color:#000;
    border:1px solid #000;
}
#bold{
    position:absolute;
    width:15px;
    height:15px;
    line-height:0px;
    font-size:0px;
    top:0px;
    left:0px;
    background-color:#fff;
}
#bat{
    position:absolute;
    width:100px;
    height:15px;
    line-height:0px;
    font-size:0px;
    left:200px;
    bottom:10px;
    background-color:#fff;
}
#start{
    display:inline;
    text-align:center;
    margin:2px;
    padding-left:10px;
    padding-right:10px;
    cursor:pointer;
    width:200px;
    border:1px solid #000;
}
#new{
    display:none;
    text-align:center;
    margin:2px;
    padding-left:10px;
    padding-right:10px;
    cursor:pointer;
    width:200px;
    border:1px solid #000;
}
#footer{
    font-size:10px;
}
</style>

<script type="text/javascript">
var bane, baneh, banew, bat, batw, bath, bold, boldw, boldh, vertical, horisontal;
batv="";

window.onload=function(){
    bat = document.getElementById("bat");
    bath=bat.offsetHeight;
    batw=bat.offsetWidth;
    bold = document.getElementById("bold");
    boldh=bold.offsetHeight;
    boldw=bold.offsetWidth;
    bane = document.getElementById("bane");
    baneh=bane.offsetHeight;
    banew=bane.offsetWidth;
}

function start(){
    if(confirm("Spillet starter hvis du trykket 'OK'!\n\nDu styrer med piltasterne! ")){
        document.getElementById("start").style.display = "none";
        document.getElementById("new").style.display = "block";
        init();
    }
}
function init(){
    boldl=bold.offsetLeft;
    boldt=bold.offsetTop;
    batl=bat.style.left;
    batl=+batl.replace("px","");
    batt=bat.offsetTop;

    horisontal=(boldl<=0)?"right":(boldl+boldw>=banew)?"left":horisontal;
    vertical=(boldt<=0)?"down":((boldt==(batt-bath))&&((boldl+boldw)>=batl)&&(boldl<=(batl+batw)))?"up":(boldt==baneh)?"reset":vertical;
   
    bold.style.left=(horisontal=="right")?(boldl+5)+"px":(boldl-5)+"px";
    bold.style.top=(vertical=="down")?(boldt+5)+"px":(boldt-5)+"px";
   
   
    if(vertical=="reset"){
        vertical="down";
        bold.style.top=0+"px";
        bold.style.left=Math.floor(Math.random()*banew)+"px";
    }
    if((batl=="")&&(bat.style.left!="0px")){batl=200;}
        bat.style.left=(((batl+batv)>=0)&&((batl+batv+batw)<=banew))?batl+batv+"px":batl+"px";
        window.setTimeout("init();", 50);
    }
   
    function MoveBat(e){
        e=e?e:window.event;
        batv=(e.keyCode=="37")?-5:(e.keyCode=="39")?5:0;
    }
   
document.onkeydown = MoveBat;
document.onkeyup = function(){batv=0;}
</script>
</head>
<body>
<div align="center">
    <h1>Ping Pong</h1>

    <div id="bane">
        <div id="bat">&nbsp;</div>
        <div id="bold">&nbsp;</div>

    </div>
    <b>Point:</b> <span id="point">0</span>
    <div id="start" onClick="start();">Start</div>

    <div id="new" onClick="window.location.reload(true);">Nyt Spil</div>
    <b>Liv:</b> <span id="liv">3</span>
    <div id="footer">
        Lavet Af Andreas Kristiansen 2006
    </div>
</div>
</body>
</html>

PS: Skal nok til føje "og Mclemens" i footer ;o)

[ Nej kører ikke med border, her er hele mit script pt: ]
^ Fyh, skam dig ... check din bane css ;)
- lægger ligge borderen ind på en anden måde... det er "meget" lettere...

[ PS: Skal nok til føje "og Mclemens" i footer ;o) ]
hehe ok :)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ping pong</title>

<style>

#baneout{border:1px solid #000;width:500px;height:400px;}
#bane{
    overflow:hidden;
    position:relative;
    width:500px;
    height:400px;
    background:blue;
}
#bold{
    position:absolute;
    width:15px;
    height:15px;
    line-height:0px;
    font-size:0px;
    top:0px;
    left:0px;
    background:red;
}
#bat{
    position:absolute;
    width:100px;
    height:15px;
    line-height:0px;
    font-size:0px;
    left:200px;
    bottom:10px;
    background:yellow;
}
#start{
    text-align:center;
    margin:5px;
    cursor:pointer;
    width:100px;
    border:1px solid #000;
}
#new{
    display:none;
    text-align:center;
    margin:5px;
    cursor:pointer;
    width:100px;
    border:1px solid #000;
}
</style>

<script type="text/javascript">

var bane, baneh, banew, bat, batw, bath, bold, boldw, boldh, vertical, horisontal;
batv="";

window.onload=function(){
bat = document.getElementById("bat");
bath=bat.offsetHeight;
batw=bat.offsetWidth;
bold = document.getElementById("bold");
boldh=bold.offsetHeight;
boldw=bold.offsetWidth;
bane = document.getElementById("bane");
baneh=bane.offsetHeight;
banew=bane.offsetWidth;
}

function start(){
if(confirm("Spillet starter hvis du trykket 'OK'!\n\nDu styrer med piltasterne! ")){
  document.getElementById("start").style.display = "none";
  document.getElementById("new").style.display = "block";
  init();
}
}

function init(){
boldl=bold.offsetLeft;
boldt=bold.offsetTop;
batl=bat.offsetLeft;
batt=bat.offsetTop;

horisontal=(boldl<=0)?"right":(boldl+boldw>=banew)?"left":horisontal;
vertical=(boldt<=0)?"down":((boldt==(batt-bath))&&((boldl+boldw)>=batl)&&(boldl<=(batl+batw)))?"up":(boldt==baneh)?"reset":vertical;

bold.style.left=(horisontal=="right")?(boldl+5)+"px":(boldl-5)+"px";
bold.style.top=(vertical=="down")?(boldt+5)+"px":(boldt-5)+"px";


if(vertical=="reset"){
  vertical="down";
  bold.style.top=0+"px";
  bold.style.left=Math.floor(Math.random()*banew)+"px";
}

bat.style.left=(((batl+batv)>=0)&&((batl+batv+batw)<=banew))?batl+batv+"px":batl;

window.setTimeout("init();", 50);
}

function MoveBat(e){
e=e?e:window.event;
batv=(e.keyCode=="37")?-5:(e.keyCode=="39")?5:0;
}

document.onkeydown = MoveBat;
document.onkeyup = function(){batv=0;}
</script>
</head>
<body>
<div align="center">
    <h1>Ping Pong</h1>
   
<div id="baneout">
<div id="bane">
        <div id="bat">&nbsp;</div>
        <div id="bold">&nbsp;</div>

</div>
</div>

    <div id="start" onClick="start();">Start</div>
    <div id="new" onClick="window.location.reload(true);">Nyt Spil</div>
</div>
</body>
</html>

... der kan også lægges en border på bat og bold

#bold{
    position:absolute;
    width:13px;
    height:13px;
    line-height:0px;
    font-size:0px;
    top:0px;
    left:0px;
    background:red;border:1px solid #000;
}

#bat{
    position:absolute;
    width:98px;
    height:13px;
    line-height:0px;
    font-size:0px;
    left:200px;
    bottom:10px;
    background:yellow;border:1px solid #000;
}

p.s. det med borderen nævnte jeg i http://www.eksperten.dk/spm/704371#rid6221379 ... den wrapper div jeg nævnte er den jeg postede ovenover :) ... håber det virker på Linux?

Beautifull mclemens... Så virker det jo som bare pokker..
Vi kom godt nok lidt væk fra det oprindelige spørgsmål - men tak for hjælpen..
Lægger du et svar?
PS: Hæver den lige til lidt flere point....

[ Lægger du et svar? ]
- Jeps her er et :)

Tusinde mange gange tak for hjælpen - jeg har desværre givet dig karma før :-D

[håber det virker på Linux?]
Det kan du bande på :-)

[ Det kan du bande på :-) ]Lækkert :)
- og tak for point :)