Bonjour,
Je travaille sur un projet, qui est la base du "Bonneteau" (2cartes perdantes, 1 gagnantes)
Sauf que je souhaite le faire avec 5 cartes (3perdantes, 2gagnantes avec images différentes).
J'ai bien avancer, j'arrive a obtenir une carte aléatoire gagnantes mais pas 2.
Je souhaite donc savoir si quelqu'un pourrai m'aider, cela fait 3 semaines que je bloque ...
Malgrès toutes mes recherches, je ne trouve pas comment faire. Merci d'avance
HTML:
Je travaille sur un projet, qui est la base du "Bonneteau" (2cartes perdantes, 1 gagnantes)
Sauf que je souhaite le faire avec 5 cartes (3perdantes, 2gagnantes avec images différentes).
J'ai bien avancer, j'arrive a obtenir une carte aléatoire gagnantes mais pas 2.
Je souhaite donc savoir si quelqu'un pourrai m'aider, cela fait 3 semaines que je bloque ...
Malgrès toutes mes recherches, je ne trouve pas comment faire. Merci d'avance
HTML:
<!doctype html>
<html>
<head>
<title>Snake Family</title>
<!-- Lier la page html au css -->
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<!-- Corp de la page -->
<body>
<h1>Bonnetau Of Snake Family</h1>
<div class="container">
<div class="cards">
<div class="card" onclick="flip(event)">
<div class="front">
<img class="card-img" src="images/image2.png" width="200">
</div>
<div class="back"></div>
</div>
<div class="card" onclick="flip(event)">
<div class="front">
<img class="card-img" src="images/image2.png" width="200">
</div>
<div class="back"></div>
</div>
<div class="card" onclick="flip(event)">
<div class="front">
<img class="card-img" src="images/image2.png" width="200">
</div>
<div class="back"></div>
</div>
<div class="card" onclick="flip(event)">
<div class="front">
<img class="card-img" src="images/image2.png" width="200">
</div>
<div class="back"></div>
</div>
<div class="card" onclick="flip(event)">
<div class="front">
<img class="card-img" src="images/image2.png" width="200">
</div>
<div class="back"></div>
</div>
</div>
</div>
<script src="js/scripts.js"></script>
</body>
</html>
body{
text-align: center;
margin: 0;
min-height: 100vh;
background-image: url("../images/fond.png");
background-position: center center;
background-size: cover;
animation-name: back;
animation-duration: 20s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
@keyframes back {
0%{background-size: 100% auto;}
50%{background-size: 120% auto;}
100%{background-size: 100% auto;}
}
h1 {
font-size: 100px;
margin: 0;
padding: 20px;
border-bottom: solid 1px rgba(255,255,255,0.4);
color: black;
background-color: rgba(0, 0, 0, 0.2);
}
div.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
div.cards {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
margin: 5%;
perspective: 1000px;
}
div.card {
transition: 1s;
width: 200px;
height: 300px;
margin: 10px;
transform-style: preserve-3d;
}
.front, .back {
position: absolute;
backface-visibility: hidden;
height: 200px;
}
.front {
background: url(../images/image2.png);
background-size: 00px;
width: 200px;
transform: rotateY(180deg);
}
.back {
background: url(../images/dos.png);
background-size: 200px;
width: 200px;
}
.back:hover {
transition: 0.3s;
box-shadow: 0px 0px 20px 3px #000;
}
function flip(event){
let element = event.currentTarget;
if (element.className === "card"){
if(element.style.transform == "rotateY(180deg)"){
element.style.transform = "rotateY(0deg)";
}
else{
element.style.transform = "rotateY(180deg)";
}
}
}
let redcard = 0
shuffle()
function shuffle() {
let allcards = document.getElementsByClassName("card-img");
allcards[redcard].setAttribute('src', "images/image2.png")
let random = Math.floor(Math.random() * allcards.length); // un nombre au hasard
let card = allcards[random];
card.setAttribute('src', "images/image1.png")
redcard = random
}
Mes remarques portait plus sur les petites incohérences autour, sinon le code que tu as suivi était plutôt bien appliqué. c'est juste que quand il n'y avait plus d'exemple tu étais perdue. 