Comment créer whack-a-mole dans votre jeu de html5

Le genre whack-a-mole re-crée un jeu d'arcade classique physiques dans votre jeu HTML5. Dans le jeu original, vous avez une série de trous et un gros marteau. Comme une taupe ressorte d'un trou, l'utilisateur sent avec un marteau, et il remonte dans le trou. Ce jeu est facile à recréer pour les deux postes de travail mobiles et traditionnels, et il peut être amusant frénétique.

Cette version crée un certain nombre de moles dans des positions aléatoires. Chaque grain de beauté a deux états: de haut en bas. La taupe commence à l'état bas. Un grain de beauté à l'état bas a une chance aléatoire de popping up dans un cadre. Un grain de beauté qui est actuellement en place reste en place pour une durée limitée.

Si l'utilisateur clique sur une taupe dans le UP Etat, la taupe tombe et le joueur gagne un point. Si la taupe reste jusqu'à passé un délai, la taupe tombe, et le joueur perd une vie.

Comment construire une taupe dans un jeu de trou

Le concept principal de ce jeu est la taupe. Il est une simple Lutin opposer à deux états. Tout la taupe fait est vraiment sur la modification des états.

La taupe a quelques propriétés qui le séparent d'un sprite normale:

• état: La propriété la plus importante de la taupe est état. Cela peut être soit UP ou VERS LE BAS. Différents comportements de jeu provoquent l'état de changer.

• UP et VERS LE BAS: Ces valeurs sont traitées comme des constantes, et ils sont utilisés pour indiquer les deux états possibles de la taupe.

• imgUp et imgDown: Ce sont les images représentant les deux états. Notez que les deux images de l'État doivent être de la même taille, ou le sprite apparaîtront à sauter autour de l'écran quand il change d'état.

• 
  
  
  
  

  popupPerc: Cette propriété indique la probabilité une taupe qui est actuellement en panne apparaîtra. La valeur initiale est de 1 pour cent. Rappelez-vous cette valeur sera vérifiée 20 fois par trame, de sorte à 1 pour cent, une taupe bas apparaîtra (en moyenne) toutes les 5 secondes. Modifier cette valeur pour modifier la difficulté du jeu.

• popupLength: Cette propriété indique combien de temps une taupe restera visible une fois qu'il a surgi. La valeur par défaut est de 3 secondes, mais vous pouvez ajuster ce faire les taupes disparaissent plus rapidement ou plus restent visibles.

Voici les principales méthodes de l'objet mole:

• setState (Etat): Définit l'état de la valeur de l'état spécifié. Unis sont stockés en tant que constantes (UP et VERS LE BAS). Lorsque l'état est changé, les taupes de état propriété est modifiée, et de l'image de la taupe est modifié pour refléter l'état actuel. Si l'état est réglé sur UP, une minuterie commence, qui sera utilisé pour suivre combien de temps la taupe est visible.

• CheckClick (): Vérifie si la taupe est actuellement cliqué. Si la taupe est actuellement UP, cacher la taupe et incrémenter le score.

• Checktime (): Le comportement de cette fonction dépend du statut de la taupe. Si la taupe est actuellement en panne, de déterminer au hasard si elle devrait apparaître. Si la taupe est en place, vérifier pour voir si la popupLength a été dépassé. Si oui, perdre une vie et envisager de mettre fin au jeu.

La checktime code est le code le plus intéressant dans le jeu Mole, alors voici cette méthode:

 tMole.checkTime = function () {// si bas, considérer upif popping (this.state == DOWN) {randVal = Math.random () - si (randVal lt; this.popupPerc) {this.setState (UP) -} // fin si} else {// si, vérifiez à voir combien de temps nous avons été uptime = this.timer.getElapsedTime () - si (heure> cela. popupLength) {this.setState (BAS) - // perdre un lifelives --- if (vies lt; 0) {saveHighScore () - alert ("Vous perdez") - document.location.href = "" -} // fin si} // fin si} // fin si} // fin checktime

Autres caractéristiques du jeu taupe

Une fois une seule taupe a été créé et est agissant correctement, il est facile de construire un grand nombre d'entre eux. Comme d'habitude, il y a un réseau de gérer un grand nombre d'objets du même type. Modifiez le NUM_MOLES constante pour changer le nombre de moles dans le jeu.

Notez aussi que le joystick virtuel a été ajouté si la scène enregistre un objet tactile. Cela entraînera l'écran tactile pour agir comme une souris virtuelle, et permettra au jeu d'être joué sur un périphérique tactile.

Une caractéristique plus intéressante est le mécanisme de score élevé. L'ordinateur garde la trace du score élevé sur cette machine particulière. Le mécanisme de score élevé utilise une relativement nouvelle fonctionnalité appelée stockage local. Il est similaire au mécanisme de biscuit bien connu, mais plus sûr, plus puissant, et beaucoup plus facile à utiliser.

La getHighScore () fonction charge le score élevé actuel. Si il n'y a pas encore un score élevé, il sera mis à zéro.

 getHighScore fonction () {// obtenir le meilleur score sur cette machine en utilisant localStoragehighScore = parseInt (localStorage.getItem ("moleHighScore")) - console.log ("highScore:", highScore) -Si (highScore == "null" | | highScore == null || isNaN (highScore)) {highScore = 0-} // fin si} // fin getHighScore

La saveHighScore () fonction est appelée lorsque le jeu se termine. Il vérifie pour voir si le score élevé de courant a été dépassée. Si oui, le nouveau score élevé est enregistré.

 saveHighScore fonction () {if (résultats> highScore) {alert ("Nouveau score élevé!") - localStorage.setItem ("moleHighScore", Hits) -} // fin si} // fin saveHighScore

Même si l'utilisateur quitte la page ou désactive le navigateur, le score élevé sera maintenu.

La stockage local mécanisme ne garde la trace du navigateur actuel. Il ne peut pas être utilisé pour vérifier scores mondiaux. Cela nécessite la programmation côté serveur.