Comment faire un HTML5 doux jeu William Malone

par William Malone

Une démo téléchargeable du jeu est disponible en bas de l'article.

Préparons

Tout d'abord, nous allons télécharger le cadre de jeu BlocksJS de GitHub. Télécharger

Ensuite, nous allons créer un fichier HTML et dans la balise de tête comprennent le fichier CSS BlocksJS que nous venons de télécharger. Pour cet article, nous utiliserons la construction 0.5.11.

L'invasion commence

Maintenant que nous avons le cadre de notre jeu créé, nous pouvons commencer l'étape suivante de laisser tomber popsicles.

Commençons par l'ajout d'un fond d'un paysage screne d'herbe et de nuages.

Pour l'arrière-plan, nous créons un BLOCKS.slice avec le nom de fichier attribué à la propriété src de l'objet du paramètre.

Qu'est-ce qu'une tranche BlocksJS?

animations tranche peuvent être arrêtés, mis en pause, Jouée, reset, etc. et ont des propriétés qui permettent l'animation de réinitialisation et boucle automatique.

Vous pouvez lire plus de détails sur l'animation du sprite dans l'article suivant: wmalone.com/sprite. De plus, vous pouvez voir le code tranche dans le dossier « src / js » sur Github.

Nous voulons que le fond soit rendu sur la couche inférieure de sorte que nous fixons la propriété de la couche de la tranche la couche de jeu avec un indice de 0. Nous ajoutons enfin la tranche à l'étape de jeu afin que l'arrière-plan rendu dans le cadre de la boucle de jeu.

Créons une fonction dropPopsicle afin que nous puissions commencer à popsicles déposer.

Semblable à la façon dont nous avons créé l'arrière-plan, nous allons créer notre premier popsicle. La seule différence par rapport à l'arrière-plan est que notre popsicle a deux états: l'un quand il tombe et un autre quand il est écrasé sur le sol.

Pour le popsicle, nous créons un BLOCKS.block au lieu d'un BLOCKS.slice. Un bloc fait tout une tranche fait, mais il prend en charge plusieurs états. En fait, un bloc peut être composé de tranches. Depuis notre popsicle a deux états différents, nous pouvons le traiter comme un seul bloc et quand il son sol nous changeons simplement à sa tranche « écrasé ». Nous définissons deux tranches du bloc avec le nom de fichier attribué à la propriété src et le nom de la tranche affectée à la propriété du nom.

Qu'est-ce qu'un bloc BlocksJS?

Les blocs sont le même nom du cadre du jeu BlocksJS. La puissance d'un bloc est sa capacité à passer de façon transparente entre les tranches (images ou animations) sans changer ses propriétés telles que la position, la transparence, la taille, etc. Par exemple, si nous avons un astronaute volant dans l'espace et en tapant sur elle va créer un champ de force. Au lieu de cacher un notre astronaute et puis en créant un nouvel astronaute avec un champ de force et lui attribuer la même position, vitesse, etc., nous pouvons simplement dire le bloc astronaute changer à sa tranche de champ de force et toutes les propriétés d'animation seront automatiquement attribué à la version de champ de force de l'astronaute.

En outre, un bloc hérite des propriétés d'une coupe et une vue, ce qui signifie qu'il prend en charge des fonctionnalités telles que la détection de collision, les moteurs (comportements tels que l'interpolation), les points chauds, et le contrôle d'animation telles que la lecture, d'arrêt et de pause.

Vous pouvez voir le code du bloc dans le dossier « src / js » sur Github.

Nous voulons que le popsicle à rendre au-dessus de la couche de fond (couche 0) nous attribuons la propriété de la couche à la couche de jeu avec un indice de 2. Comme avant d'ajouter le bloc à l'étape de jeu afin que le popsicle rendra dans le cadre du boucle de jeu.

Maintenant, nous avons une fonction à partir de laquelle nous pouvons faire naître de nouvelles instances de popsicles qui terreur la pluie sur notre village. Lorsque nous frayer un nouveau popsicles nous ne voulons pas laisser tomber de la même place que nous utilisons Math.random. qui renvoie un nombre aléatoire entre 0 et 1 (bien acutally 0,999999.). En multipliant notre valeur aléatoire avec la largeur de l'écran, nous obtenons une position aléatoire x sur l'écran. Et puisque nous ne voulons pas un popsicle être partiellement du côté droit de l'écran nous multiplions par la largeur du jeu moins la largeur de popsicle.

La position y du popsicle est réglée sur moins la hauteur du popsicle. Cela placera le popsicle juste à côté du haut de l'écran.

L'étape suivante dans notre dropPopsicle est d'animer le popsicle de sa position de départ au sol.

Popsicle Goutte d'animation

La valeur de la propriété de rappel de la méthode de addMotor invoquera une fonction, une fois l'animation terminée. Dans cette fonction anonyme nous changeons le popsicle à sa tranche « écrasé » affiche la version « crash » de l'image de popsicle.

Qu'est-ce qu'un moteur BlocksJS?

Un moteur BlocksJS ajoute un comportement à une vue (par exemple bloc ou tranche). Fixation d'un moteur peut interpoler une propriété numérique telles que la position ou de l'échelle ou de la rotation. Un moteur est non seulement une interpolation, car il peut faire une vue draggable, ou il peut contrôler plusieurs propriétés à la fois, comme le déplacement d'une vue sur une diagonale qui change les positions x et y à des rythmes différents.

Vous pouvez afficher le code du moteur dans le dossier « src / js » sur Github.

Dans la fonction de rappel, nous créons aussi un symbole qui invoquera la fonction de fusion après quelques secondes pour enlever le popsicle détruit du jeu.

Qu'est-ce qu'un symbole BlocksJS?

Dans la chaleur de notre paysage serein notre popsicle ne restera pas sur le terrain longtemps. Quelques secondes après la collision chaque instance de popsicle appelle la fonction de fusion. Le procédé de fusion ajoute trois moteurs au bloc de popsicle qui interpoler 3: propriétés alpha. cropHeight. et la position y.

Popsicle Faire fondre l'animation

Pour interpoler les propriétés de popsicles pour simuler la fusion, nous allons ajouter des moteurs pour chaque propriété:

Le moteur d'alpha va interpoler la transparence de la sucette glacée à partir de complètement opaque à transparent.
Le moteur y déplacera le popsicle par une hauteur de popsicle.
Le moteur cropHeight recadre le fond du popsicle comme fond.

Nous allons définir une valeur d'assouplissement de « easeIn », comme nous l'avons fait avec le popsicle pour ralentir le début de l'animation.

Après la fusion est terminée, nous allons détruire le popsicle du monde et de la mémoire. Pour ce faire, nous ajoutons une fonction au rappel d'un des moteurs. La destruction du popsicle consiste à enlever le bloc de la phase de jeu, invoquant la méthode destroy et enfin enlever toute référence à l'instance de popsicle en mettant à null.

Appel renforts

La domination du monde bénéficierait de plus d'un type de popsicle:

Pour soutenir popsicles supplémentaires que nous définissons la spécification popsicle comme nous l'avons fait avec le creamsicle mais cette fois nous plaçons les définitions dans un tableau que nous appelons spec.popsicles. Cela donne accès à des popsicles supplémentaires nommés: « bombpop », « popsicle » et « PushUp ».

Pour accéder pleinement notre arsenal de sucre que nous tournons à nouveau à Math.random. Nous multiple de la longueur de la matrice de spec.popsicles puis Math.floor cette valeur et on se retrouve avec un indice aléatoire (à savoir 0. 1. 2 ou 3). Le code suivant va créer un bloc de popsicle au hasard à partir du tableau que nous venons de faire.

Nous devons laisser tomber en fait le popsicle. Nous faisons cela en appelant la fonction dropPopsicle.

Pour garder la pluie popsicles nous avons besoin d'ajouter ticker à la fin de la fonction dropPopsicle. Cela garantira que les popsicles continueront à venir. Le second paramètre de la méthode de addTicker est le retard avant d'appeler la fonction. Dans cette démo, nous allons vraiment faire pleuvoir en laissant tomber un popsicle deux fois par seconde ou 500 millisecondes.

La démo suivante tombe au hasard popsicles partout.

Il faut un village

Il n'y aurait pas la destruction sans quelque chose à détruire. Nous allons créer des structures.

Tout d'abord, nous créons un nouveau bloc dans une fonction appelée spawnStructure. Étant donné que notre structure a trois états différents, nous définir trois tranches différentes dans le tableau de tranches du nouveau bloc. Chaque définition de tranche comprend le nom de la tranche ( « inactive ». « Actif » et « cassé ») et le nom du fichier de l'image de la tranche par sa propriété src.

Mettons les structures sur la couche avec un indice de 1 de sorte qu'il sera au-dessus du fond (couche 0) et derrière les sucettes glacées (couche 2). Enfin, nous ajoutons la structure à l'étape de jeu via sa méthode addView.

Soit sa position au hasard la position x de la nouvelle structure comme nous l'avons fait avec les popsicles avant. Nous avons mis l'y à l'emplacement du terrain. Nous initialisons également une propriété numHits que nous utiliserons plus tard pour garder une trace du nombre de fois qu'une structure est frappé par un popsicle.

Au lieu d'une nouvelle structure apparaissant juste de nulle part nous allons avoir à l'existence, il anime.

Structure d'animation de fraie

Nous pouvons animer la reproduction de la structure en ajoutant des moteurs couple:

Le moteur y déplace la structure dans la direction y. Nous avons mis la propriété de durée de 500 millisecondes et la propriété montant à la hauteur négative de la structure. La propriété de l'assouplissement « easeOut » va ralentir l'animation à la fin.
Le moteur cropHeight recadre la tente pour simuler en sortant du sol. Nous avons mis les mêmes valeurs de propriété que le moteur y, sauf que nous utilisons une valeur positive de la hauteur de la structure puisque nous voulons que le cropHeight d'augmenter comme il anime.

Détection de collision

Maintenant que nous avons des structures dans le jeu nous allons les détruire!

Pour déterminer si le popsicle a atterri sur l'une des structures que nous allons utiliser la détection de collision. Il existe de nombreux types de détection de collision; dans ce cas, nous utiliserons une technique rectangle rectangle. Nous allons comparer la zone de délimitation (un rectangle avec la même position et la largeur et la hauteur) de la sucette et la boîte de délimitation de la structure. Si la superposition de deux rectangles de quelque façon que l'on considère alors une collision détectée.

Pour rendre les choses un peu plus facile que nous ne vont vérifier cette fois, lorsque les terres de popsicle. Ce test de collision devra être fait sur toutes les structures dans une simple boucle une fois que le popsicle touche le sol.

En utilisant la méthode BlocksJS isRectInside qui est disponible sur toutes les vues (par exemple bloc ou tranche) on compare la zone de délimitation de la sucette avec le cadre de délimitation de chaque structure.

Comment BlocksJS gérer la détection de collision rectangulaire?

BlocksJS prend en charge plusieurs types différents de détection de collision. Pour déterminer si superposition de deux rectangles, nous pouvons utiliser la méthode isRectInsideRect dans la boîte à outils. Cette méthode est également disponible en tout état (par exemple bloc ou tranches).

La fonction prend comme arguments deux rectangles et compare ensuite les boîtes de délimitation en utilisant la position (x et y) et des dimensions (largeur et hauteur) afin de déterminer s'il y a une collision. Si une collision a été détectée la fonction retourne vrai.

Lorsqu'une collision est détectée on incrémente la propriété numHits de la structure que nous entré en collision avec.

La première collision change la couleur de la structure pour un moment, la seconde s'effondre elle.

La première fois que la structure est touché (alias la propriété est numHits 1), alors nous allons définir la tranche de la structure à « active ». Cela va changer l'image de la structure de la tente rouge.

Nous avons également ajouté un téléscripteur qui appellera la resetStructure après 2500 millisecondes pour changer à sa couleur d'origine.

La fonction resetStructure réinitialisera notre structure « active » (rouge) à sa tranche « inactive » (brun). Cependant, nous devons être prudents; au moment où la fonction est appelée une autre popsicle aurait pu frapper la structure et elle est effondrée. Si cela se produisait la structure serait en l'état « cassé » (effondré) donc nous ne voulons pas changer à son « actif » (rouge un non affaissée) état. Heureusement, nous pouvons déterminer l'état actuel de la structure en utilisant la méthode getSlice du bloc. Elle retourne tranche active du bloc. Nous pouvons lire que la propriété du nom de tranche active pour déterminer quelle tranche est en cours d'affichage. De cette façon, nous ne réinitialiser la structure si la propriété du nom de la tranche est égale à la chaîne « active ».

Si la structure a été frappé deux fois (aka la propriété est numHits 2), alors nous allons définir la tranche de la structure à « cassé ». Cela va changer l'image de la tente à sa version affaissée.

Nous avons également ajouté quelques tickers qui à la fois détruire la structure puis frayer un nouveau.

Tout comme la façon dont nous avons détruit le popsicle on enlève le bloc de l'étape de la structure, appelez la méthode destroy et enlever la structure de la matrice de structure.

Maintenant, nous regardons la destruction ensuivrait dans notre deuxième démo.

Le héros en nous

Nous avons les bras croisés vu la destruction de notre village depuis trop longtemps. Il est temps de se battre!

Pour arrêter l'invasion de popsicle nous devons exploiter ces popsicles à smithereens. Ajout d'un écouteur d'événement à l'objet de contrôleur de jeu nous permettra d'appeler une fonction lorsqu'un utilisateur clique avec une souris ou touche l'écran sur un appareil tactile. Les deux événements sont abstraire en un événement « du robinet ». Nous ajoutons la chaîne « tap » et la fonction gameTapped en tant que paramètres de la méthode addEventListener de l'objet contrôleur. Cela appellera la fonction gameTapped chaque fois qu'un événement « du robinet » est tiré.

Comment peut-BlocksJS gérer l'interaction utilisateur?

BlocksJS a un objet contrôleur qui ajoute automatiquement les auditeurs d'interaction utilisateur au jeu pour nous. Au lieu d'avoir à ajouter des écouteurs d'événements pour les souris et les périphériques tactiles que nous pouvons écouter un événement « tap ». L'objet contrôleur gère cela en écoutant à la fois tactile et événements de souris. Si l'événement est détecté, le contrôleur déclenche un événement « du robinet » de l'objet contrôleur.

Le contrôleur déclenche également les événements de la souris et toucher séparément dans le cas où vous voulez avoir un comportement différent pour les événements de souris vs événements tactiles. Par exemple, vous pouvez écouter seulement pour un événement de la souris en ajoutant « mouseDown » comme premier argument de la méthode addEventListener.

Une autre chose que l'objet contrôleur ne nous est-il retourne la position du clic de souris ou toucher du doigt par rapport au jeu au lieu de par rapport à la fenêtre du jeu existe. Cela se fait avec l'aide de la fonction getElementPos qui rampe le parent éléments et ajuste la position pour déterminer la position relative de l'élément de jeu.

Vous pouvez afficher le code du contrôleur dans le dossier « src / js » sur Github.

Plus tôt, pour déterminer si un popsicle et la structure sont entrés en collision, nous avons utilisé la détection de rectangle rectangle. Pour déterminer si un popsicle et appuyez sur entrer en collision, nous utiliserons la détection de collision point rectangle parce que contrairement à la structure d'un robinet est un point et non un rectangle; il a seulement une position non une largeur et une hauteur.

Comment peut-BlocksJS gérer la détection de collision de points?

BlocksJS prend en charge plusieurs types différents de détection de collision. Pour déterminer si un point est à l'intérieur d'un rectangle, nous pouvons utiliser la méthode isPointInsideRect dans la boîte à outils. Cette méthode est également disponible en tout état (par exemple bloc ou tranches).

La fonction prend un point et un rectangle comme arguments et détermine ensuite si le point est à l'intérieur de la zone de délimitation du rectangle. Si une collision a été détectée la fonction retourne vrai.

La fonction gameTapped est appelée à chaque fois qu'un utilisateur tape. Il a seulement un argument: l'objet point qui inclut la position x et y de ce robinet par rapport à la partie.

Pour vérifier si l'utilisateur peut taraudée une boucle de nous popsicle à travers le réseau de popsicles et appeler la méthode isPointInside de chaque popsicle. Si la méthode retourne vrai, alors nous avons exploité un popsicle.

Si nous exploitons un popsicle alors nous allons venger de trois façons.

Appuyez sur Popsicle animation

D'abord, nous arrêtons le popsicle de tomber. Nous le faisons avec la méthode removeMotors qui supprimera le moteur y, nous avons ajouté qui est à l'origine du popsicle de se déplacer.

Ensuite, nous allons disparaître le popsicle. Nous faisons cela en ajoutant un nouveau moteur « alpha ». Une vue commence par défaut avec une valeur alpha de 1 (entièrement opaque). Par réglage de la quantité de biens à -1 du moteur « alpha » du moteur interpoler la valeur de 1 à 0 (entièrement transparent).

Enfin, nous ajoutons un symbole qui appellera la fonction destroyPopsicle après un délai de 500 millisecondes.

Dans notre démonstration finale, il est à votre tour d'exploiter ces envahisseurs popsicles et sauver notre village!