mougnibas/projet-clicodrome
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

confetti et image qui tourne :)

Browse source
This commit is contained in:
thaaoblues 2024-12-14 20:11:25 +01:00
parent 384ec1233c
commit 2aa25f13d3
5 changed files with 147 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
bdd/arbre.json
View file

@ -142,7 +142,8 @@
"revenu_passif": 0.1, "revenu_passif": 0.1,
"evolution": 0, "evolution": 0,
"narration": "Ada Lovelace est considérée comme la première programmeuse de l'histoire. Elle a collaboré avec Charles Babbage sur la machine analytique et a écrit des notes qui contiennent l'algorithme destiné à être exécuté par la machine, un concept essentiel à la programmation moderne.", "narration": "Ada Lovelace est considérée comme la première programmeuse de l'histoire. Elle a collaboré avec Charles Babbage sur la machine analytique et a écrit des notes qui contiennent l'algorithme destiné à être exécuté par la machine, un concept essentiel à la programmation moderne.",
"wikipedia": "https://fr.wikipedia.org/wiki/Ada_Lovelace" "wikipedia": "https://fr.wikipedia.org/wiki/Ada_Lovelace",
"nom_fichier_image":"img/Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850_-_cropped.png"
}, },
"george_boole": { "george_boole": {
"nom": "George Boole", "nom": "George Boole",
@ -170,7 +171,7 @@
}, },
"claude_shannon": { "claude_shannon": {
"nom": "Claude Shannon", "nom": "Claude Shannon",
"cout": 000, "cout": 10000,
"revenu_passif": 260, "revenu_passif": 260,
"evolution": 1, "evolution": 1,
"narration": "Claude Shannon est considéré comme le père de la théorie de l'information. Ses travaux ont révolutionné les domaines de la communication et de l'informatique.", "narration": "Claude Shannon est considéré comme le père de la théorie de l'information. Ses travaux ont révolutionné les domaines de la communication et de l'informatique.",

56
css/index.css Normal file
View file

@ -0,0 +1,56 @@
@keyframes faireTournerImage {
0% {
transform: rotate(0deg);
opacity: 1;
}
100% {
transform: rotate(360deg);
opacity: 1;
}
}
#image-collegue-animee {
width: auto;
height: auto;
animation: faireTournerImage 2s linear forwards infinite;
z-index: 1;
}
.div-centrer-contenu{
width: 100%;
justify-content: center;
text-align: center;
}
/* Define keyframes for the confetti */
@keyframes confettiFall {
0% {
transform: translateY(-100px) rotate(0deg);
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(720deg);
opacity: 0;
}
}
/* Confetti styles */
.confetti {
position: absolute;
width: 10px;
height: 20px;
animation: confettiFall 5s linear;
opacity: 0;
}
/* Confetti container to spawn confetti randomly */
.confetti-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none; /* Prevent interaction */
}

BIN
img/Ada_Byron_daguerreotype_by_Antoine_Claudet_1843_or_1850_-_cropped.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 261 KiB

8
index.html
View file

@ -7,6 +7,8 @@
<script> alert("click")</script> <script> alert("click")</script>
<link rel="stylesheet" href="" id="link-css"> <link rel="stylesheet" href="" id="link-css">
<link rel="stylesheet" href="./css/alerte.css"> <link rel="stylesheet" href="./css/alerte.css">
<link rel="stylesheet" href="./css/index.css">
</head> </head>
<body> <body>
<script src="./js/intro.js" defer></script> <script src="./js/intro.js" defer></script>
@ -15,6 +17,7 @@
<script src="./js/main.js" defer></script> <script src="./js/main.js" defer></script>
<script src="./js/alerte.js"></script> <script src="./js/alerte.js"></script>
<script src="./js/collegue.js"></script> <script src="./js/collegue.js"></script>
<div id="confetti-container"></div>
<div id="div_score" style=" display: flex; justify-content: center;"> <div id="div_score" style=" display: flex; justify-content: center;">
@ -66,6 +69,11 @@
<img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3"> <img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
</div> </div>
<div class="div-centrer-contenu">
<img id="image-collegue-animee">
</div>
</body> </body>
<footer> <footer>
<p>L'evolution est non contractuelle, adaptée pour le gameplay</p> <p>L'evolution est non contractuelle, adaptée pour le gameplay</p>

99
js/main.js
View file

@ -189,33 +189,52 @@ async function remplirMagasinCollegues(){
if(score >= c.cout){ if(score >= c.cout){
// finalement, on lui débit son compte de points tel un vendeur de voitures
score -= c.cout
const score_aff = document.getElementById("score_affichage")
score_aff.innerText="SCORE : " + score
// narration seulement si c'est la première fois qu'on achète
if(!(key in sacado)){ if(!(key in sacado)){
ouvrirAlerte("Vous avez débloqué "+ c.nom+" !!"+collegues[key]["narration"])
ouvrirAlerte("Incrémentation de la rentabilité passive de "+c.revenu_passif+" points !!") //lancer l'animation d'achat avec l'image correspondante
// et on ajoute l'amélioration dans l'abre des compétences débloquées let image = document.getElementById("image-collegue-animee")
image.setAttribute("src",c.props.nom_fichier_image)
// affiche l'image
image.removeAttribute("hidden")
// PLUIE DE CONFETTTIIII
genererConfetti()
// finalement, on lui débit son compte de points tel un vendeur de voitures
score -= c.cout
const score_aff = document.getElementById("score_affichage")
score_aff.innerText="SCORE : " + score
// recache l'image après 6 secondes et lance la narration
setTimeout(() => {
image.setAttribute("hidden",true)
// narration comme c'est la première fois qu'on achète
ouvrirAlerte("Vous avez débloqué "+ c.nom+" !!"+collegues[key]["narration"])
ouvrirAlerte("Incrémentation de la rentabilité passive de "+c.revenu_passif+" points !!")
}, (6000));
// on ajoute l'amélioration dans l'abre des compétences débloquées
sacado[key] = 1 sacado[key] = 1
// on change le futur cout dans le tableau
document.getElementById("case_cout_"+key).innerText = Number(c.cout * (1.1)**sacado[key]).toFixed(1)
// augmentation du boost d'incrément
revenu_passif += c.revenu_passif
// incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
evolution_coll += 1
}else{ }else{
// on incrémente la qtt d'objet dans son sacado // on incrémente la qtt d'objet dans son sacado
sacado[key] += 1 sacado[key] += 1
} }
// on change le futur cout dans le tableau
document.getElementById("case_cout_"+key).innerText = Number(c.cout * (1.1)**sacado[key]).toFixed(1)
// augmentation du boost d'incrément
revenu_passif += c.revenu_passif
// incrémente le score implicite d'evolution pour permettre à la prochaine amelioration de s'afficher
evolution_coll += 1
}else{ }else{
// PAS ASSEZ RICHE !!!!! // PAS ASSEZ RICHE !!!!!
ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!") ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
@ -281,3 +300,43 @@ function leBoostDuProf(){
console.log("nv score : ",score) console.log("nv score : ",score)
score_aff.innerText="SCORE : " + Number((score).toFixed(1)); score_aff.innerText="SCORE : " + Number((score).toFixed(1));
} }
// fonction qui va creer plein d'elements confetti
function genererConfetti() {
const container = document.getElementById("confetti-container")
// couleurs des confetti à generer
const colors = ["#FF5733", "#33FF57", "#3357FF", "#FF33A1", "#FFD633", "#A833FF", "#33FFF6"]
const nb_confetti = 50 // nombre de confettis
for (let i = 0; i < nb_confetti; i++) {
//créer un nouvel element de classe confetti
const confetti = document.createElement("div")
confetti.classList.add("confetti")
//prendre une couleur aléatoire dans la liste
confetti.style.setProperty("background-color", colors[Math.floor(Math.random() * colors.length)])
// positionner le confetti à un endroit random horizontalement
confetti.style.left = Math.random() * 100 + "vw"
// mettre une fraction de 5s pour faire un temps à l'écran assez naturel
const longevite = Math.random() * 5
confetti.style.animationDelay = longevite+"s"
// faire des confettis qui vont plus vite que d'autres
confetti.style.animationDuration = 4 + Math.random() * 2 + "s"
// ajouter le confetti au container
container.appendChild(confetti)
}
// vide le conteneur à la fin pour ne pas surcharger la page d'elements
container.innerHTML = ""
}