S4 - R4.A.10 - JavaScript

const terrain=document.getElementById('terrain');
const chat   =document.getElementById('chat');

terrain.addEventListener('click',function(event){
  console.log('click');
  let joueur=document.getElementById('joueur').value;
  console.log(joueur);
  const rectChat  =  chat.getBoundingClientRect();
  const rectSouris  =  souris.getBoundingClientRect();

  let x=event.offsetX;
  let y=event.offsetY;

  if(x<    rectChat.width/2 ){x=    rectChat.width/2;}
  if(x>800-rectChat.width/2 ){x=800-rectChat.width/2;}
  if(y<    rectChat.height/2){y=    rectChat.height/2;}
  if(y>600-rectChat.height/2){y=600-rectChat.height/2;}

  if(x<    rectSouris.width/2 ){x=    rectSouris.width/2;}
  if(x>800-rectSouris.width/2 ){x=800-rectSouris.width/2;}
  if(y<    rectSouris.height/2){y=    rectSouris.height/2;}
  if(y>600-rectSouris.height/2){y=600-rectSouris.height/2;}

  chat.style.left=(x-rectChat.width /2)+'px';
  chat.style.top =(y-rectChat.height/2)+'px';

  souris.style.left=(x-rectSouris.width /2)+'px';
  souris.style.top =(y-rectSouris.height/2)+'px';
});