JSFiddle - React, Tailwind, and code Playground

by Zerh Ariel

HTML

<h1> Bienvenue sur Cocky-Clicker</h1>


<h3> Tout le monde a droit a une bite !</h3>


<h2>NOMBRE DE BITES :</h2>
<div id="score">0</div>
</br>
<h5 id="production"> Vous produisez automatiquement 0 bites/secondes</h5>
<bouton id="boutonbite">BOUTON BITE</bouton>
<p id="puissance">Puissance de la bite : 1 bite/click</p>
</br>
<bouton id="bouton1">Acheter un générateur à bite</bouton>
<div class="compteur" id="compteur1">0</div>
<div class="prix" id="prix1">Prix : 10</div>
</br>
<bouton id="bouton2">Acheter un méga-générateur à bite</bouton>
<div class="compteur" id="compteur2">0</div>
<div class="prix" id="prix2">Prix : 100</div>
</br>
<bouton id="bouton3">Acheter un giga-générateur à bite</bouton>
<div class="compteur" id="compteur3">0</div>
<div class="prix" id="prix3">Prix : 1000</div>
</br>
<bouton id="bouton4">Acheter un générateur à grosses bites</bouton>
<div class="compteur" id="compteur4">0</div>
<div class="prix" id="prix4">Prix : 10000</div>
</br>
<bouton id="autoclicker">Acheter un click-bite auto toutes les 5 secondes (Prix : 200)
    <div id="compteurauto">0</div>
</div>

CSS

* {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
h1, h2, h3 {
    font-family: Courier;
}
h2 {
    display: inline-block;
    vertical-align: top;
    margin-top: 1.3em;
}
h3 {
    font-size: 1.1em;
    position: relative;
    bottom: 1em;
}
bouton {
    display : inline-block;
    border: solid 1px black;
    border-radius: 5px;
    padding: 3px;
    margin: 2em 0em 0em 2em;
}
bouton:hover {
    cursor: pointer;
    background-color: pink;
}
.compteur, #score {
    display : inline-block;
    vertical-align: top;
    border : dashed black 1px;
    height: 1em;
    width: 10em;
    padding: 3px;
    margin: 2em 0em 0em 5em;
    position: absolute;
    left: 15em;
}
#boutonbite {
    margin: 2em 0em 2em 12em;
    padding: 1em;
    border: 3px black solid;
}
.prix, p {
    display : inline-block;
    vertical-align: top;
    padding: 3px;
    margin: 2em 0em 0em 5em;
    position: absolute;
    left: 30em;
    font-style: bold;
}
p {
    left: 20em;
}
#compteurauto {
    float: right;
    border : dashed black 1px;
    height: 1em;
    width: 5em;
    padding: 3px;
    margin: 0 0 0 2em;
}

JavaScript

var score = 0;
$score = document.getElementById('score');
var NgenerateurB1 = 0;
$NgenerateurB1 = document.getElementById('compteur1');
var NgenerateurB2 = 0;
$NgenerateurB2 = document.getElementById('compteur2');
var NgenerateurB3 = 0;
$NgenerateurB3 = document.getElementById('compteur3');
var NgenerateurB4 = 0;
$NgenerateurB4 = document.getElementById('compteur4');
var incrementeur = 1;
$incrementeur = document.getElementById('puissance');
var millionaire = 1;
var prix1 = 10;
$prix1 = document.getElementById('prix1');
var prix2 = 100;
$prix2 = document.getElementById('prix2');
var prix3 = 1000;
$prix3 = document.getElementById('prix3');
var prix4 = 10000;
$prix4 = document.getElementById('prix4');
var Nautoclick = 0;
$Nautoclick = document.getElementById('compteurauto');
$productionauto = document.getElementById('production');

var actionboutonbite = document.getElementById('boutonbite');
actionboutonbite.addEventListener('click', function () {
    score += (incrementeur);
    $score.innerHTML = Math.round(score);
    $incrementeur.innerHTML = "Puissance de la bite : " + Math.round(incrementeur * 100) / 100 + " bite/click";
    if (score >= 1000000 && millionaire === 1) {
        alert("Félicitation ! Vous êtes millionaire de bites !");
        millionaire = 0;
    }
}, false);

var actionbouton1 = document.getElementById('bouton1');
actionbouton1.addEventListener('click', function () {
    if (score >= prix1) {
        NgenerateurB1 += 1;
        $NgenerateurB1.innerHTML = NgenerateurB1;
        incrementeur = incrementeur + 0.2;
        $incrementeur.innerHTML = "Puissance de la bite : " + Math.round(incrementeur * 100) / 100 + " bite/click"; //retourne l'arrondi à 2 decimales
        score = (score - prix1);
        $score.innerHTML = Math.round(score);
        prix1 = Math.round(prix1 * 1.1);
        $prix1.innerHTML = "Prix : " + prix1;
        $productionauto.innerHTML = "Vous produisez automatiquement "+Math.round(Nautoclick*incrementeur/5)+"...