Comment créer Whack-a-Mole dans votre jeu HTML5
HTML5 Game Development pour les nuls
Le genre whack-a-mole re-crée un jeu d'arcade physique classique 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, il sent avec un marteau, et il remonte dans le trou. Ce jeu est facile à recréer pour les 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. Une taupe dans l'état bas a une chance aléatoire de sauter dans une trame. Un grain de beauté qui est actuellement reste en place pour une durée limitée.
Si l'utilisateur clique sur un grain de beauté dans l'état UP, la taupe tombe et le joueur gagne un point. Si la taupe reste en delà d'une limite de temps, la taupe tombe, et le joueur perd une vie.
Comment construire un grain de beauté dans un jeu de trous
Le concept de ce jeu est la taupe. Il est un simple objet Sprite avec deux états. Tout ce que la taupe fait est vraiment à changer les états.
La taupe a quelques propriétés qui le séparent d'un sprite normal:
Etat. La propriété la plus importante de la taupe est l'état. Cela peut être haut ou en bas. Divers comportements de jeu provoquent l'état de changer.
Haut et 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 qui représentent les deux états. Notez que les deux images de l'Etat doivent être de la même taille, ou l'image-objet apparaîtront à sauter autour de l'écran quand il change d'état.
popupPerc. Cette propriété indique la probabilité d'un grain de beauté qui est actuellement vers le bas va apparaître. La valeur initiale est égal à 1 pour cent. Rappelez-vous cette valeur sera vérifiée 20 fois par image, donc à 1 pour cent, une taupe vers le bas s'affiche (en moyenne) toutes les 5 secondes. Modifier cette valeur pour changer la difficulté du jeu.
popupLength. Cette propriété indique combien de temps un grain de beauté restera visible une fois qu'il a sauté vers le haut. La valeur par défaut est 3 secondes, mais vous pouvez régler cela pour faire les taupes disparaissent plus rapidement ou rester visible plus longtemps.
Voici les principales méthodes de la taupe objet:
setState (state). Définit l'état à la valeur de l'état spécifié. Les États sont stockés sous forme de constantes (haut et bas). Lorsque l'état est modifié, est modifié la propriété de l'état de la taupe, et l'image de la taupe est modifiée pour tenir compte de 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 vers le bas, déterminer au hasard si elle devrait apparaître. Si la taupe est, vérifiez si le popupLength a été dépassé. Si oui, perdre une vie et envisager de mettre fin au jeu.
Le code checktime est le code le plus intéressant dans le jeu taupe, alors voici cette méthode:
D'autres caractéristiques du jeu taupe
Une fois un grain de beauté a été créé et est agissant correctement, il est facile de construire beaucoup d'entre eux. Comme d'habitude, il y a un tableau pour gérer un grand nombre d'objets du même type. Modifier les NUM_MOLES constants pour changer le nombre de moles dans le jeu.
Notez également qu'un 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 appareil 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 fonctionnalité relativement nouvelle appelée localStorage. Il est similaire au mécanisme de biscuits bien connu, mais plus sûr, plus puissant et beaucoup plus facile à utiliser.
La fonction getHighScore () charge le score actuel. S'il n'y a pas encore un score élevé, il sera mis à zéro.
La fonction saveHighScore () est appelée lorsque le jeu se termine. Il vérifie si le score actuel est dépassé. Dans ce cas, le nouveau score élevé est enregistré.
Même si l'utilisateur quitte la page ou désactive le navigateur, sera maintenu le score élevé.
Le mécanisme de localStorage garder la trace du navigateur en cours. Il ne peut pas être utilisé pour vérifier les scores globaux élevés. Cela nécessite une programmation côté serveur.