Si vous jouez des cubes pendant longtemps , ils se transforment en boules
En regardant le nom du jeu Lines 9753, vous pourriez penser que cette histoire concerne le 9753e clone du célèbre jeu Color Lines, dans lequel vous devez faire 5 boules consécutives de la même couleur. Oui, c'est un clone. Eh bien, quoi d'autre pourrait être nouveau? Je partagerai mes idées et quelques subtilités de l'implémentation en HTML + CSS + JavaScript. Je vais vous dire ce que signifient les chiffres 9753. Je vais proposer un moyen de trouver une autre combinaison de chiffres et de voir comment le jeu change. Cela deviendra plus intéressant ou ennuyeux - c'est vous qui décidez. Avez-vous deviné ce que signifie 9753? Alors, s'il vous plaît, sous chat.
Variété d'options de jeu
Vous êtes-vous déjà demandé où dans le jeu original venait la dimension de champ 9x9? Il est étonnant de voir comment non seulement la dimension du jeu est choisie, mais aussi d'autres paramètres, il est donc intéressant de jouer: le nombre de couleurs est de 7, le nombre de boules consécutives est de 5 et le nombre de boules apparaissant par tour est de 3. Ces 4 paramètres sont mis dans le nom du jeu - Lignes 9753 C'est ce quatre qui, dans l'ensemble, détermine la complexité du jeu, qui ne convient probablement pas à tout le monde.Peut-être que quelqu'un aimera un ensemble différent. Par exemple:- 3333 - la solitude comme le solitaire, vous ne pouvez pas avoir peur d'entrer dans une impasse et essayer de faire tomber autant de balles que possible à la fois (5 est toujours facile, 6 est plus difficile, 7 et 8 sont presque irréalistes), adapté dans le cas où vous ne voulez pas penser du tout;
- 5643 - sur une carte 5x5, les cellules ne sont pas aussi petites que 9x9, il est donc pratique de jouer sur le téléphone, mais la difficulté semble être légèrement plus élevée qu'en 9753;
- 5543 est une option légèrement plus facile que 5643, car le nombre de couleurs différentes est moins, ce qui signifie qu'il est plus susceptible de faire une série de boules de la même couleur;
- 4443 - comparable en complexité au 5643, mais les balles sont encore plus grandes - seulement 4 balles sur le côté court de l'écran.
Reculer
Il est permis de reculer. Il était une fois, lorsque les arbres étaient grands et que j'étais encore étudiant, je devais jouer à Color Lines. J'ai vraiment aimé le jeu. Une fois, après y avoir perdu une demi-journée et avoir marqué plusieurs milliers de points, je me suis immobilisé. Je me suis rendu compte que c'était un accident, que les balles étaient tombées avec succès et que dans un avenir proche, je ne pouvais pas aller aussi loin. Pour battre mon propre record, je devrai tuer dix fois plus de temps, puis si j'ai de la chance. Depuis, je n'ai plus joué à ce jeu depuis longtemps. Le sentiment d'injustice universelle est au plus profond de mon âme. Et il est resté là jusqu'à ce que le plan de vengeance insidieux se cristallise - pour faire le même jeu, mais avec la capacité de revenir en arrière, remonte au moins au tout début. C'est cette option qui est devenue pour moi la principale raison de motivation pour écrire le jeu à ma manière.Aléatoire fixe
Certains joueurs ont déclaré que parfois la voiture place délibérément des balles dans des endroits inconfortables pour compliquer le passage. Surtout quand il reste très peu de cellules libres, il est impossible d'attendre la bonne balle au bon endroit. En d'autres termes, le caractère aléatoire du jeu est loin d'être aléatoire. Avec une nouvelle opportunité de revenir en arrière, il ne serait pas logique d'offrir à chaque fois une nouvelle place pour de nouvelles balles. Il serait donc possible de faire des allers-retours jusqu'à ce que la bonne balle apparaisse au bon endroit. Par conséquent, dans le jeu, tous les mouvements de la machine sont déterminés et dépendent au hasard du numéro de mouvement et de l'emplacement des balles sur le terrain. De plus, tout le monde joue le même jeu. Autrement dit, le jeu commence avec le même arrangement (le premier mouvement de la voiture), puis les mouvements de la voiture dépendent de la façon dont le joueur va: si les joueurs vont dans le même sens,puis sur le terrain ils auront le même agencement de boules. Cela vous permet de comparer objectivement et indépendamment des chances de comparer différentes solutions. Certaines personnes aiment mesurer qui est le prochain, qui est le plus rapide ... Les décisions sous la forme d'une séquence de mouvements de joueurs sont envoyées au serveur. Les déplacements de la voiture sont calculés selon le même algorithme aléatoire. Le serveur ne peut pas être trompé, la séquence entière est vérifiée pour l'exactitude, et alors seulement le résultat est entré dans le tableau. Tous les enregistrements sont enregistrés avec la séquence de mouvements des joueurs. Ensuite, nous analysons et publions les meilleures décisions de ceux qui obtiennent 9999 points. Il faudra trouver les critères pour choisir le meilleur.Les déplacements de la voiture sont calculés selon le même algorithme aléatoire. Le serveur ne peut pas être trompé, la séquence entière est vérifiée pour l'exactitude, et alors seulement le résultat est entré dans le tableau. Tous les enregistrements sont enregistrés avec la séquence de mouvements des joueurs. Ensuite, nous analysons et publions les meilleures décisions de ceux qui obtiennent 9999 points. Il faudra trouver les critères pour choisir le meilleur.Les déplacements de la voiture sont calculés selon le même algorithme aléatoire. Le serveur ne peut pas être trompé, la séquence entière est vérifiée pour l'exactitude, et alors seulement le résultat est entré dans le tableau. Tous les enregistrements sont enregistrés avec la séquence de mouvements des joueurs. Ensuite, nous analysons et publions les meilleures décisions de ceux qui obtiennent 9999 points. Il faudra trouver les critères pour choisir le meilleur.
rapide
Les positions et couleurs des boules suivantes sont affichées. En raison du fait que le jeu peut être rembobiné en avant et en arrière, cela n'a aucun sens de cacher les prochains mouvements. On pouvait lui montrer quelques mouvements en avant, mais cela ne venait pas d'une interface simple (gardez à l'esprit que les mouvements de la voiture changent si les cellules sont occupées à la suite des actions du joueur).Notation
Le score est effectué selon la formule classique N * (1 + N - DIMENSION), où N est le nombre de balles dans la ligne, DIMENSION est la dimension du terrain de jeu. Autrement dit, 5, 6, 7, 8 des balles collectées ensemble donnent respectivement 5, 12, 21 et 32 points. Pour l'option de jeu 3333, lorsque 3, 4, 5 et 6 balles s'effondrent, 3, 8, 15, 24 sont obtenus.Arts graphiques
Les graphiques ne sont que vectoriels - je n'aime pas redimensionner les artefacts, en particulier les bordures floues. Les principaux éléments graphiques animés: un magnétophone vintage et des balles rebondissantes avec des reflets et un éclairage dégradé. Ils sont fabriqués en CSS et assaisonnés de morceaux de JavaScript. Initialement, un schéma de couleurs sombres a été créé. Vous pouvez l'essayer en l'activant dans les paramètres. Cependant, tout semble sombre. J'aime mieux la lumière.Boule tridimensionnelle
Aussi paradoxal que cela puisse paraître, mais à partir de 3 rectangles imbriqués les uns dans les autres, une boule tridimensionnelle est obtenue:- récipient spécifiant la taille et la position sur l'écran
- carré rond, créant une forme bidimensionnelle, se contractant et s'étirant pendant le rebond
- un carré avec un remplissage dégradé elliptique qui définit la couleur et l'éclairage de la balle, en ajoutant une troisième dimension.
Avec un conteneur, tout est simple. Ses attributs CSS position, gauche et haut spécifient les coordonnées de la balle sur le terrain, et font-size définit la taille par rapport à laquelle les deux autres carrés sont mis à l'échelle. Un carré rond est, comme la grande majorité des rondes, sur nos pages Web, juste un carré avec les coins les plus arrondis. Lorsque nous cliquons dessus avec une souris, il flatte, en pressant par le haut et en élargissant les côtés. Et si le clic s'avère aussi rapide qu'un clic de souris, alors la balle commence à rebondir.
@keyframes flat {
0% {height: 1.0em; width: 1.0em; top: 0; left: 0em;}
100% {height: 0.9em; width: 1.05em; top: 0.1em; left: -0.025em;}
}
@keyframes jumping {
0% {height: 0.9em; width: 1.025em; top: 0.1em; left: -0.0125em;}
10% {height: 1.02em; width: 1.0em; top: -0.02em; left: 0em;}
40% {height: 1.008em; width: 1.0em; top: -0.18em; left: 0em;}
50% {height: 1.01em; width: 1.0em; top: -0.2em; left: 0em;}
60% {height: 1.0em; width: 1.0em; top: -0.18em; left: 0em;}
70% {height: 1.0em; width: 1.0em; top: -0.1em; left: 0em;}
90% {height: 1.0em; width: 1.0em; top: 0em; left: 0em;}
100% {height: 0.9em; width: 1.025em; top: 0.1em; left: -0.0125em;}
}
Le nombre maximum de couleurs est de 15.Toutes les couleurs n'ont pas des dégradés assez lisses, même sur un bon moniteur, j'ai donc sélectionné les couleurs pour l'œil. Plus il y a de couleurs, plus il est difficile de distinguer les boules par couleur sur le terrain. Il semble que 15 couleurs suffisent.Compteur
Le secret principal du compteur est dans les cassettes avec des chiffres. Chaque ruban est caché à l'intérieur d'un rectangle à travers lequel un seul chiffre est visible. Les bords de ce rectangle sont légèrement assombris pour créer un effet d'arrondi, comme si à l'intérieur il n'y avait pas une bande, mais un disque. La vitesse de l'animation de défilement est proportionnelle à l'incrément restant du compteur et est limitée par certaines valeurs raisonnables. Le dernier chiffre tourne d'une seconde.Du son
Les sons (explosion et saut) sont synthétiques. Ils sont générés par des formules mathématiques simples. Cela crée un arrière-goût des années 80 lorsque la plupart des sons des jeux étaient générés à l'aide d'un générateur de fréquence à fréquence unique. Les avantages incluent la compacité du programme: un simple générateur de tels effets sonores, écrit en JavaScript, est beaucoup plus petit qu’un fichier mp3. Pour chaque balle, sélectionnez votre propre paire de notes lowFreq et highFreq (voir wikipedia ) et remplissez le tampon audio comme ceci: var soundUpBuffer = audioCtx.createBuffer(1, frameCount, sampleRate);
for (var i = 0; i < frameCount; i++) {
var x = i / frameCount;
var time = duration * x;
var volume = Math.sin(x * Math.PI);
var freq = lowFreq + Math.sqrt(x) * (highFreq - lowFreq);
buffer[i] = volume * Math.sin(2 * Math.PI * freq * time);
}
Ici, la fréquence passe de lowFreq à highFreq le long de la courbe x ½ , et le volume sin (π x).Lors d'une explosion, le volume décroît selon la formule 1 / (1 + 10 * x + 1000 * x * x), et la fréquence est choisie au hasard de la première à la cinquième octave.Taille de la boîte de dialogue adaptative
Implémenter un algorithme pour sélectionner la taille de la boîte de dialogue afin qu'elle occupe autant d'espace que possible et ne dépasse pas les limites de la zone visible. Le problème est que sur différents appareils, la taille des boîtes de dialogue est différente - parfois elle s'avère trop petite, et parfois elle n'entre pas dans l'écran. J'ai fait dépendre la taille des dialogues de la taille de la police (unités CSS em). Ensuite, je trie la taille de la police afin que la boîte de dialogue ne prenne pas plus de 95% des dimensions de l'écran. Je n'ai donc pas eu à faire de cas pour CSS adaptatif.Petite taille de programme
L'ensemble du jeu tient dans un fichier html d'environ 150 Ko. Environ 3000 lignes de code source (bien sûr, sans le côté serveur). Aucune bibliothèque ni framework JavaScript n'a été utilisé - tout est naturel, comme à l'âge de pierre. Parfois, vous ne voulez tout simplement pas traiter avec une API tierce, et parfois il est utile de comprendre à quel point les cadres simplifient la vie d'un inventeur de vélos et d'un nouveau testeur de râteau. Il est utile de trouver d'abord comment mettre en œuvre telle ou telle idée, puis de comparer avec la façon dont les autres l'ont fait. Par exemple, la version pour Android ne prend que 250 Ko. Il se compose d'une enveloppe WebView fine et d'un pack de png-shek pour différentes résolutions de téléphone. Soit dit en passant, png-shki pourrait être remplacé par un vecteur xml-koy. Cela se serait déroulé exactement dans l'esprit du minimalisme.Forum
Le forum fonctionne sur phpBB . Le compte vous permet de:- enregistrez vos réalisations sur le serveur afin qu'elles ne soient pas perdues lors du changement de téléphone ou d'ordinateur
- jouer alternativement sur un appareil, puis sur un autre
- laisser des messages et poser des questions à d'autres joueurs ou développeurs.
i18n et l10n
Internationalisation et localisation. Le jeu a été traduit en russe et en anglais. Seulement 35 phrases courtes. Je ne refuserais pas une assistance gratuite pour traduire dans plusieurs langues plus populaires (chinois, allemand, ...).Pas de pubs
Vous pouvez souvent entendre l'opinion que si le programme est gratuit et sans publicité, cela signifie un cheval de Troie, une porte dérobée, un virus ... En d'autres termes, le fromage gratuit n'est que dans une souricière. Sinon, pourquoi? Pourquoi quelqu'un est-il prêt à faire quelque chose gratuitement pour les autres? Je ne connais pas la réponse générale. Non seulement cela, je ne sais pas exactement pourquoi je le fais moi-même. Je suis juste curieux. Si vous aimez quelque chose, je me demande souvent comment l'auteur a réussi. Je voudrais essayer de faire la même chose ou même mieux. Parfois, j'aime tout, à l'exception de certains détails, et il y a un désir de faire quelque chose comme ça, mais avec mon blackjack et mes doigts.Conclusion
C'est tout pour le moment. J'espère que vous apprécierez le jeu autant que je voulais le créer. Je serai heureux de tout commentaire.Références