confetti et image qui tourne :)
This commit is contained in:
thaaoblues
parent
384ec1233c
commit
2aa25f13d3
5 changed files with 147 additions and 23 deletions
|
|
@ -142,7 +142,8 @@
|
|||
"revenu_passif": 0.1,
|
||||
"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.",
|
||||
"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": {
|
||||
"nom": "George Boole",
|
||||
|
|
@ -170,7 +171,7 @@
|
|||
},
|
||||
"claude_shannon": {
|
||||
"nom": "Claude Shannon",
|
||||
"cout": 000,
|
||||
"cout": 10000,
|
||||
"revenu_passif": 260,
|
||||
"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.",
|
||||
|
|
|
|||
56
css/index.css
Normal file
56
css/index.css
Normal 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 */
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
|
|
@ -7,6 +7,8 @@
|
|||
<script> alert("click")</script>
|
||||
<link rel="stylesheet" href="" id="link-css">
|
||||
<link rel="stylesheet" href="./css/alerte.css">
|
||||
<link rel="stylesheet" href="./css/index.css">
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<script src="./js/intro.js" defer></script>
|
||||
|
|
@ -15,6 +17,7 @@
|
|||
<script src="./js/main.js" defer></script>
|
||||
<script src="./js/alerte.js"></script>
|
||||
<script src="./js/collegue.js"></script>
|
||||
<div id="confetti-container"></div>
|
||||
|
||||
<div id="div_score" style=" display: flex; justify-content: center;">
|
||||
|
||||
|
|
@ -66,6 +69,11 @@
|
|||
<img src="./img/GIF-CHATON.gif" alt="Chat" class="adt3">
|
||||
</div>
|
||||
|
||||
<div class="div-centrer-contenu">
|
||||
<img id="image-collegue-animee">
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<footer>
|
||||
<p>L'evolution est non contractuelle, adaptée pour le gameplay</p>
|
||||
|
|
|
|||
101
js/main.js
101
js/main.js
|
|
@ -189,33 +189,52 @@ async function remplirMagasinCollegues(){
|
|||
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)){
|
||||
ouvrirAlerte("Vous avez débloqué "+ c.nom+" !!"+collegues[key]["narration"])
|
||||
ouvrirAlerte("Incrémentation de la rentabilité passive de "+c.revenu_passif+" points !!")
|
||||
// et on ajoute l'amélioration dans l'abre des compétences débloquées
|
||||
sacado[key] = 1
|
||||
|
||||
//lancer l'animation d'achat avec l'image correspondante
|
||||
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
|
||||
|
||||
// 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{
|
||||
// on incrémente la qtt d'objet dans son sacado
|
||||
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{
|
||||
// PAS ASSEZ RICHE !!!!!
|
||||
ouvrirAlerte("PAS ASSEZ RICHE !!!!!!!!!!!!")
|
||||
|
|
@ -280,4 +299,44 @@ function leBoostDuProf(){
|
|||
score += 10000000000000000
|
||||
console.log("nv score : ",score)
|
||||
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 = ""
|
||||
}
|
||||
Loading…
Reference in a new issue