les images :
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>Pong</title>
</head>
<body>
<div id="plateau">
<div id="score"></div>
<img id="raquette1" src="images/raquette.png">
<img id="raquette2" src="images/raquette.png">
<img id="balle" src="images/balle.png">
</div>
</body>
<script src="script.js"></script>
</html>le css
#plateau {
position: absolute;
width: 600px;
height: 300px;
top:50px;
left: 200px;
margin-top:50px;
background-color: aquamarine;
}
#raquette1 {
position: absolute;
top: 100px;
left: 20px;
}
#raquette2 {
position: absolute;
top: 200px;
left: 580px;
}
#score{
text-align: center;
width: 33%;
margin-left: 33%;
font-size: 30px;
}
#balle {
position: absolute;
top: 150px;
left: 500px;
}
h1 {
color: #FF5733;
font-size: 30px;
width: 50%;
margin-left: 25%;
font-family: "Bowlby One", sans-serif;
font-weight: 400;
font-style: normal;
text-align: center;
}
p {
color: #FF5733;
font-size: 20px;
text-align: center;
width: 80%;
margin-left: 10%;
font-family: "Bowlby One", sans-serif;
font-weight: 400;
font-style: normal;
}
}
img {
}le js
var plateau = document.getElementById("plateau");
var joueur1=document.getElementById("raquette1");
var joueur2=document.getElementById("raquette2");
var y1=100;
joueur1.style.top=y1+"px";
var x1=20;
var y2=200;
joueur2.style.top=y2+"px";
var x2=580;
var balle=document.getElementById("balle");
var xb=300;
var yb=150;
balle.style.top=yb+"px";
balle.style.left=xb+"px";
var dx=-5;
var dy=5;
var score1=0;
var score2=0;
setInterval(bouge_balle, 50)
document.addEventListener("keydown",touche,false);
function bouge_balle(){
document.getElementById("score").textContent=score1+" : "+score2;
xb=xb+dx;
yb=yb+dy;
if ((yb>280)||(yb<0)){
dy=-dy
}
if ((xb>590)){
score2=score2+1;
xb=300;
yb=150;
dx=-5;
dy=5;
}
if ((xb<0)){
score1=score1+1;
xb=300;
yb=150;
dx=5;
dy=-5;
}
if ((Math.abs(xb-x1)<3)&&(Math.abs(yb-y1)<50)){
dx=-dx
}
if ((Math.abs(xb-x2)<5)&&(Math.abs(yb-y2)<50)){
dx=-dx
}
balle.style.left=xb+"px";
balle.style.top=yb+"px";
}
function touche(evt){
var touche=event.key;
if (touche=="z"){
y1=y1-5;
joueur1.style.top=y1+"px";
}
if (touche=="s"){
y1=y1+5;
joueur1.style.top=y1+"px";
}
if (touche=="o"){
y2=y2-5;
joueur2.style.top=y2+"px";
}
if (touche=="l"){
y2=y2+5;
joueur2.style.top=y2+"px";
}
}