[JS + DHTML] Alle divs op zelfde tijdstip verplaatsen

[TheBlasphemer]

Ik ben momenteel bezig met een Javascript game.
Alle collision e.d. zit er al in, en eigenlijk werkt ook alles wel.
Het spel is een soort Mario, en het scherm moet dus meescrollen met waar je speler is.
Momenteel ziet mn main loop (eigenlijk gewoon een timer met interval 25ms) er ongeveer zo uit:
*pseudo code*

code:

For all objects, Update
ScrollContainer
For all objects, Draw

De Update functie calculeert de nieuwe X en Y coordinaten,
De Draw functie update vervolgens je div style.
en ScrollContainer update de div style van de container.

Helaas zie ik nu tijdens het lopen mijn mannetje een beetje achterlopen en terugschieten telkens (maar 1 pixel per keer ofzo, maar toch). Als ik de Draw en ScrollContainer omdraai krijg ik het omgekeerde: dan lagt de container

Nu vroeg ik me af of er iets was dat ik bijvoorbeeld de browser vertel om niks te updaten, dan de styles aan te passen, en als ik overal mee klaar ben pas alle posities te updaten ?
Het hoeft alleen maar in IE te werken (is ergens in ge-embed)...

Alvast bedankt,
TB

[André]

Dat kan dus niet, op het moment dat jij een aanpassing aan een style doet zal de browser dit direct uitvoeren. Je zult dus wat zaken moeten scheiden zodat zware aanpassingen de rest niet vertragen.

[Verwijderd]

Ik weet niet van welke functies jij gebruik maakt.
Maar ik heb ooit eens een tijdwinst van 80-90 % gerealiseerd door een lijn i.p.v. een DOM methode de functie innertHTML te verplaatsen.
Het is natuurlijk wel smeriger, maar het werkte in mijn geval goed.

De dom-methode was aardig gestroomlijnd, en ging wel snel, maar door innerHTML ging het nog sneller. Vooral omdat de dom-methode per div (in mijn geval 1px bij 1 px) opnieuw moest beginnen.

Kijk hier ook eens: W3C DOM vs innerHTML

[TheBlasphemer]

Hmmmm, InnerHTML is worth a try...

Op die pagina bij InnerHTML2 hebben ze het over "Push strings into array, then join array",
Bedoelen ze daarmee dat ik gewoon een array moet bijhouden, daarop objecten pushen (dus array.push("<div style='...'></div>")) en dan .join en innerHTML = result moet doen ?

Alvast bedankt,
TB

[Verwijderd]

JavaScript:

function inner2()
{
    removeTable();
    var time1 = new Date().getTime();
    var string = new Array();
    string.push('<table><tbody>');
    for (var i=0;i<50;i++)
    {
        string.push('<tr>');
        for (var j=0;j<50;j++)
        {
            string.push('<td>*</td>');
        }
        string.push('</tr>');
    }
    string.push('</tbody></table>');
    var writestring = string.join('');
    document.getElementById('writeroot').innerHTML = writestring;
    var time2 = new Date().getTime();
    doTiming(5,time1,time2);
}

Dit staat er in de bron van de pagina.
En inderdaag: string.push("je ding");

[ Voor 17% gewijzigd door Verwijderd op 25-12-2005 14:29 ]

[NMe]

HTML, CSS, JavaScript, Flash en Director? Kijk eerst hier!
Stickies lezen is lastig.

[TheBlasphemer]

Ai, excuses!
Had ik zo even over het hoofd gezien
Maar vond dit eigenlijk niks met webdesign of graphics te maken hebben, gaat volgens mij meer over programmeren

Anyway, Ik heb InnerHTML geprobeerd: IE averaged rond de 25% van CPU. mn oude methode: average van 11% (als het poppetje beweegt)...
Niet echt een verbetering maar alsnog bedankt voor de tip...

[Verwijderd]

Welke code gebruik jij dan?
Zou je die eens willen posten, eventueel versimpeld?
Dan kunnen wij hier kijken of er ook nog optimalisaties mogelijk zijn misschien.