Continuo a disegnarmi lo scenario per le mie collisioni

Bene, ripetere un po' le cose già fatte riscrivendole da capo aiuta a memorizzare la tecnica...

Ora materializziamo un nuovo oggetto sulla pagina, mediante il CSS:

#ostacolo1{
 width:100px;
 height:100px;
 top:100px;
 left:100px;
 background-color:red;
 position:relative;
}

Un quadrato rosso.
Anch'esso è mobile, dato che ha la proprietà position impostata su relative...

Ora vediamo il da farsi...
Impostiamo le funzioni che definiscono il limite destro e sinistro e alto e basso, più la larghezza, dei vari oggetti, così il codice si semplifica...

function sinistro(ogg){
 return EN(ogg.currentStyle.left);
}

function larghezza(ogg){
 return EN(ogg.currentStyle.width);
}

function destro(ogg){
 return EN(sinistro(ogg)+larghezza(ogg));
}

function alto(ogg){
 return EN(ogg.currentStyle.top);
}
 
function altezza(ogg){
 return EN(ogg.currentStyle.height);
}

function basso(ogg){
 return EN(alto(ogg)+altezza(ogg));
}

Ecco, così il codice è più scrivibile.

Per il momento fermiamoci qua...