le html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap" rel="stylesheet">
<title>cible</title>
</head>
<body>
<div id="plateau">
<img id="cible1" src="images/cible.png">
</div>
</body>
<script src="script.js"></script>
</html>le css
#cible1 {
position: absolute;
top: 500px;
left: 1200px;
}
img {
width: 5%;
}le js
// tirer un nombre aléatoir entre 0 et 1200
var x1=Math.floor(Math.random()*1200);
// tirer un nombre aléatoir entre 0 et 400
var y1=Math.floor(Math.random()*600);
// recuperer l'image1 dans le html
var image1=document.getElementById("cible1");
// on positionne notre image1
image1.style.top=y1+"px";
image1.style.left=x1+"px";
image1.addEventListener("mousedown",clique,false);
var points=0;
setInterval(bouge_cible, 1000)
function clique(evt){
points+=1;
this.style.top=Math.floor(Math.random()*600)+"px";
this.style.left=Math.floor(Math.random()*1200)+"px";
document.getElementById("score").textContent=points+" points";
}
function bouge_cible(){
document.getElementById("cible1").style.top=Math.floor(Math.random()*600)+"px";
document.getElementById("cible1").style.left=Math.floor(Math.random()*1200)+"px";
}