Projets d'élèves

1. Introduction

Le but du projet est de repreduire le jeu Cookie Clicker . Dans ce jeu, le joueur doit produire des cookies en cliquant à la souris sur un cookie. Les cookies ainsi accumulés permettent d'acheter des objets qui produisent des cookies de manière autonome et produire toujours plus de cookies. J'ai beaucoup jouer à ce jeu et surtout à toutes les variantes qui en on découler et j'ai ainsi voulu faire ma propre version.

2. Matériel et méthodes

2.1 Matériel

● Ordinateur

● Navigateur

● Éditeur de texte

2.2 Méthode

Le jeu est sur une page html avec un cookie sur le quel on peut cliquer pour avoir un cookie. Puis, avec ces cookies on peut acheter des auto clickers, fermes et d'autres bâtiments et objets qui produisent des cookies automatiquement, il y a des améliorations qui font que certains bâtiments fabriquent plus de cookies. Le site ressemble a quelque chose comme ceci;

Schéma du Projet

Tout d’abord j'ai commencé par faire le bouton du cookie. Je suis parti sur un lien hypertexte qui ne conduit vers aucune page et qui est formé d'une image.

<a href=# onClick="add()"><img src="Cookie.png"  height=300px 
width=300px></a> 

Quand il est activé la fonction add est exécuté, celle-ci va tout simplement ajouté des cookies.

function add() {
    cookies = cookies + click_rate
}

Puis on va avoir les différents boutons qui vont permettre d'acheter les différents objets et améliorations. J'en ai fais neuf, au niveau des objets qui vont produire les cookies automatiquement, je suis parti sur 4 objets différents, les auto clickers, les fermes, les mines et les usines. Puis à côté il y a 5 améliorations, une pour chaque objet et une dernière qui augmente la quantité de cookies donné par clique. Les différents boutons ont tous la même forme. On a dans une division dans laquelle on a le bouton et un span avec un texte à l’intérieur, ce texte va apparaître lorsque le joueur va mettre sa sourie sur le bouton. Ce texte contient une petit description avec le coût et l'utilité du bouton.

<div class="button">
		<button onClick ="buy_farm()"><img src= "farm.jpeg" height=70px width=110px><h1>Farm</h1></button>
	    <span class="text_button">
	    <p id= "farm">Cost: 1000 cookies <br>
	    Give 10 cookie per seconde
	    </p>
	    </span>
	    </div>

Un bouton ressemble à ceci

Et un bouton quand l'on passe la souris dessus ressemble à ceci, il y a le texte qui est dans le span qui est affiché.

L'affichage du texte ce fait au niveau du css, le span qui à pour classe text-button est caché et quand on met la souris sur le bouton .button:hover .text_button "s'active" et le text visible.

.text_button {
  border: 3px solid;
  display: none;
  font-size: 28px;
  padding: 10px;
	background-color: white;
	width: 75%;
	border-top: 0px ;
}
.button:hover .text_button {
  display: block;
}

J'ai ensuite fait la fonction qui permet de compter les cookies produit chaque seconde. Elle va tout simplement ajouter au nombre de cookies total ceux produit.

function count_update() { 
	cookies_persecond = autoclicker*autoclicker_rate + farm*farm_rate + mine*mine_rate + factory*factory_rate
    cookies = cookies + cookies_persecond
}

Pour que cella fonctionne correctement la fonction ne s'active que une fois par seconde, à l'aide de la méthode setInterval(count_update,1000)

Puis, j'ai fait la fonction screen_update qui va me permettre de rafraîchir tout les textes de la page et les différents description des objets. Celle-ci s’exécute toute les 10 millisecondes. Chaque paragraphe dans les différents sections span ont un id différent et grace à la méthode document.getElementById('').innerHTML on peut récrire le texte que l'on veut dans nos différents paragraphes. Cela donne par exemple pour le compte des cookies

document.getElementById('count').innerHTML = "You have " + getformat(cookies) + " Cookies"

C'est ici que j'applique la fonction getformat qui me permet des avoir tout les nombres dans un format lisible facilement.

Finalement, j'ai fait les fonctions save and load qui me permettent de sauvegarder la progression et de charger la sauvegarde en appuyant sur load. Pour ce faire j'utilise le local storage du navigateur, ce qui me permet de sauvegarder les différentes variables avec localStorage.setItem("name", var) et de les recharger avec var = parseInt(localStorage.getItem("name"))

3. Résultats

Au final le site ressemble à ceci

Sur la colonne de gauche le nombre de cookies et de cookie par second, le cookie sur le quel ont peut cliquer et les bouton save et load pour les sauvegardes, au milieu il y a les différents objet qui donne des cookies et à droite il y a les améliorations.

4. Discussion

Globalement le projet est réussi ont à le résultat cherche et le site est parfaitement fonctionnelle, même si quelques peu simpliste sur la forme et l'apparence. J’aurai pu faire une apparence un peu plus élégante, mais j'ai préféré me concentré sur la partie fonctionne et par manque de temps et aussi un peu d'idée je n'est pas plus développé l'esthétique. Je n'est aussi donc pas fait les images par moi-même.

J'aurai pu faire quelques améliorations en plus, par exemple faire en sorte que la sauvegarde se fasse toute seule et que le chargement de sauvegarde se fasse au chargement de la page, ajoute quelque objets et amélioration en plus, quelque animations et faire les différentes images utilisées par moi-même. Néanmoins ce projet a été plaisent à faire et le résultats est reste très satisfaisant.

5. Conclusion

Globalement je suis très content du résultat bien que le projet ne soit pas parfait et que plusieurs améliorations qui peuvent être apportées, j'ai atteint les objectifs fixés c'est à dire refaire un cookie clicker. Ce projet m'a appris les bases du html, css et java script. Il a fallu réfléchir sur la manière de faire et cela m'a aussi appris à codé des programmes plus grand et complexe.

Références

Le jeu original: https://orteil.dashnet.org/cookieclicker/

Documentation CSS/HTML/JS: https://www.w3schools.com/