5.2: Correction: fusion

jeu.css
body
{
	margin: 10px;
}

#cadre
{
	width: 500px;
	height: 500px;
	border: 1px solid black;
}

#tux
{
	position: absolute;
	top: 100px;
	left: 100px;
}

.splat
{
	/* Ceci permet de placer les splats avec top et left */
	position: absolute;
    /* La position de départ: en bas, au centre */
	top: 500px;
	left: 100px;
    /* Agrandir 4 fois l'image  */
	transform: scale(4); 
	/* Définir les propriétés CSS à animer. Toutes en 1 seconde */
	transition: top 1s,left 1s,transform 1s;
}
jeu.js

let tux=document.getElementById('tux');

document.addEventListener('keydown',function(event){
  console.log('Touche enfoncée:',event.key);
  let rect=tux.getBoundingClientRect();
  console.log(rect);
  let d=300;
  let left=rect.left;
  let top=rect.top;
  if(event.key==='ArrowRight'){left+=d;}
  if(event.key==='ArrowLeft' ){left-=d;}
  if(event.key==='ArrowDown' ){top+=d;}
  if(event.key==='ArrowUp'   ){top-=d;}
  tux.style.left=left+"px";
  tux.style.top=top+"px";
});

document.addEventListener('mousemove',ajouter_splat);
function ajouter_splat(event) 
{
  // Petit détail: éviter la sélection 
  event.preventDefault();
  let i=document.createElement('img');
  i.src='https://moodle.iutv.univ-paris13.fr/img/bjs/splat.png';
  i.className='splat';
  document.body.append(i);
  // Forcer le navigateur à prendre en compte la situation actuelle (position, scale).
  // Ceci permettra au navigateur de s'apercevoir d'un changement futur des propriétés CSS.
  window.getComputedStyle(i).top;
  // Changer les propriétés CSS qui transitionnent. 
  // Le navigateur s'aperçoit du changement et déclenche la transition.
  i.style.top =(event.pageY-16)+'px';
  i.style.left=(event.pageX-16)+'px';
  i.style.transform='scale(1)';
}