Si juegas cubos durante mucho tiempo , se convierten en bolas
Mirando el nombre del juego Lines 9753, podrías pensar que esta historia es sobre el clon 9753 del famoso juego Color Lines, en el que debes hacer 5 bolas en una fila del mismo color. Sí, es un clon. Bueno, ¿qué más podría ser nuevo? Compartiré mis ideas y algunas sutilezas de la implementación en HTML + CSS + JavaScript. Te diré lo que significan los números 9753. Propondré una forma de encontrar otra combinación de números y ver cómo cambia el juego. Se volverá más interesante o aburrido, tú decides. ¿Has adivinado lo que significa 9753? Entonces, por favor, debajo del gato.
Variedad de opciones de juego.
¿Alguna vez te has preguntado en qué parte del juego original apareció la dimensión de campo 9x9? Es sorprendente lo bien que se elige no solo la dimensión del juego, sino también otros parámetros, por lo que es interesante jugar: el número de colores es 7, el número de bolas seguidas es 5 y el número de bolas que aparecen por turno es 3. Estos 4 parámetros se ponen en el nombre del juego - Líneas 9753 Son estos cuatro los que, en general, determinan la complejidad del juego, que probablemente no sea adecuado para todos.Quizás a alguien le gustará un conjunto diferente. Por ejemplo:- 3333 - soledad como el solitario, no puedes tener miedo de entrar en un callejón sin salida e intentar colapsar tantas bolas como sea posible (5 sigue siendo fácil, 6 es más difícil, 7 y 8 son casi poco realistas), adecuado en el caso de que no quieras pensar en absoluto;
- 5643: en un tablero de 5x5, las celdas no son tan pequeñas como 9x9, por lo que es conveniente jugar en el teléfono, pero la dificultad parece ser ligeramente mayor que en 9753;
- 5543 es una opción un poco más fácil que 5643, porque la cantidad de colores diferentes es menor, lo que significa que es más probable que haga una serie de bolas del mismo color;
- 4443 - comparable en complejidad a 5643, pero las bolas son aún más grandes - solo 4 bolas en el lado corto de la pantalla.
Creo que todos encontrarán opciones de juego adecuadas para ellos. No se desconecte de la red y juntos podremos ver las opciones más populares en la tabla del sitio.Retroceder
Está permitido hacer movimientos hacia atrás. Érase una vez, cuando los árboles eran altos, y todavía era un estudiante, tuve que jugar Color Lines. Realmente me gustó el juego. Una vez, después de haber perdido medio día y haber anotado varios miles de puntos, me detuve. Me di cuenta de que fue un accidente, que las bolas se cayeron con éxito y que en un futuro cercano no podría ir tan lejos. Para romper mi propio récord, tendré que matar diez veces más tiempo, y luego si tengo suerte. Desde entonces, no he jugado este juego en mucho tiempo. El sentimiento de injusticia universal es profundo en mi alma. Y permaneció allí hasta que cristalizó el insidioso plan de venganza: hacer el mismo juego, pero con la capacidad de rebobinar, retrocede al menos hasta el principio. Fue esta opción la que me convirtió en la principal razón motivadora para escribir el juego a mi manera.Aleatoriedad fija
Algunos jugadores dijeron que a veces el auto coloca las pelotas deliberadamente en lugares incómodos para complicar el paso. Especialmente cuando quedan muy pocas células libres, es imposible esperar la bola correcta en el lugar correcto. En otras palabras, la aleatoriedad en el juego está lejos de ser aleatoria. Con una nueva oportunidad para rebobinar los movimientos hacia atrás, no sería lógico ofrecer cada vez un nuevo lugar para nuevas bolas. Por lo tanto, sería posible ir y venir hasta que aparezca la bola correcta en el lugar correcto. Por lo tanto, en el juego, todos los movimientos de la máquina se determinan y dependen aleatoriamente del número de movimiento y la ubicación de las bolas en el campo. Además, todos juegan el mismo juego. Es decir, el juego comienza con la misma disposición (el primer movimiento del automóvil), y luego los movimientos del automóvil dependen de cómo desciende el jugador: si los jugadores caminan de la misma manera,luego en el campo tendrán la misma disposición de bolas. Esto le permite objetivamente e independientemente de la posibilidad de comparar diferentes soluciones. A algunas personas les gusta medir quién es el siguiente, quién es más rápido ... Las decisiones en forma de una secuencia de movimientos de jugadores se envían al servidor. Los movimientos del automóvil se calculan de acuerdo con el mismo algoritmo aleatorio. No se puede engañar al servidor, se verifica que toda la secuencia sea correcta y solo el resultado se ingresa en la tabla. Todos los registros se guardan junto con la secuencia de movimientos del jugador. Luego analizamos y publicamos las mejores decisiones de aquellos que obtienen 9999 puntos. Será necesario determinar qué criterios elegir mejor.Los movimientos del automóvil se calculan de acuerdo con el mismo algoritmo aleatorio. No se puede engañar al servidor, se verifica que toda la secuencia sea correcta y solo el resultado se ingresa en la tabla. Todos los registros se guardan junto con la secuencia de movimientos del jugador. Luego analizamos y publicamos las mejores decisiones de aquellos que obtienen 9999 puntos. Será necesario determinar qué criterios elegir mejor.Los movimientos del automóvil se calculan de acuerdo con el mismo algoritmo aleatorio. No se puede engañar al servidor, se verifica que toda la secuencia sea correcta y solo el resultado se ingresa en la tabla. Todos los registros se guardan junto con la secuencia de movimientos del jugador. Luego analizamos y publicamos las mejores decisiones de aquellos que obtienen 9999 puntos. Será necesario determinar qué criterios elegir mejor.
rápido
Se muestran las posiciones y colores de las siguientes bolas. Debido al hecho de que el juego se puede rebobinar hacia adelante y hacia atrás, no tiene sentido ocultar los siguientes movimientos. Podría mostrarse algunos movimientos hacia adelante, pero no ocurrió con una interfaz simple (tenga en cuenta que los movimientos del automóvil cambian si las celdas están ocupadas como resultado de las acciones del jugador).Puntuación
La puntuación se realiza de acuerdo con la fórmula clásica N * (1 + N - DIMENSION), donde N es el número de bolas en la línea, DIMENSION es la dimensión del campo de juego. Es decir, 5, 6, 7, 8 de las bolas recolectadas juntas dan 5, 12, 21 y 32 puntos, respectivamente. Para la opción de juego 3333, cuando 3, 4, 5 y 6 bolas colapsan, se obtienen 3, 8, 15, 24.Artes graficas
Los gráficos son solo vectores; no me gustan los artefactos de escala, especialmente los bordes borrosos. Los principales elementos gráficos animados: una grabadora vintage y bolas que rebotan con reflejos e iluminación degradada. Están hechos con CSS y sazonados con piezas de JavaScript. Inicialmente, se hizo un esquema de color oscuro. Puedes probarlo encendiéndolo en la configuración. Sin embargo, todo parece sombrío. Me gusta más la luz.Bola tridimensional
Por paradójico que parezca, pero a partir de 3 rectángulos anidados entre sí, se obtiene una bola tridimensional:- contenedor especificando el tamaño y la posición en la pantalla
- cuadrado redondo, creando una forma bidimensional, contrayéndose y estirando durante el rebote
- Un cuadrado con un relleno de gradiente elíptico que define el color y la iluminación de la pelota, agregando una tercera dimensión.
Con un contenedor, todo es simple. Su posición de atributos CSS, izquierda y arriba especifican las coordenadas de la pelota en el campo, y el tamaño de fuente establece el tamaño en relación con el cual se escalan los otros dos cuadrados. Un cuadrado redondo es, como la gran mayoría de las rondas, en nuestras páginas web, solo un cuadrado con las esquinas más redondeadas. Cuando hacemos clic en él con un mouse, se aplana, apretando desde arriba y expandiendo los lados. Y si el clic resulta ser tan rápido como un clic del mouse, entonces la pelota comienza a rebotar.
@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;}
}
El número máximo de colores es 15.No todos los colores tienen gradientes bastante suaves incluso en un buen monitor, así que seleccioné los colores para el ojo. Cuantos más colores, más difícil es distinguir las bolas por color en el campo. Parece que 15 colores son suficientes.Mostrador
El secreto principal del mostrador está en cintas con números. Cada cinta está oculta dentro de un rectángulo a través del cual solo se ve un dígito. Los bordes de este rectángulo se oscurecen ligeramente para crear un efecto de redondeo, como si dentro no hubiera una cinta, sino un disco. La velocidad de la animación de desplazamiento es proporcional al incremento restante del contador y está limitada por algunos valores razonables. El último dígito gira 1 segundo.Sonido
Los sonidos (explosión y salto) son sintéticos. Son generados por fórmulas matemáticas sin complicaciones. Esto crea un regusto de los 80 cuando la mayoría de los sonidos en los juegos se generaron usando un generador de frecuencia de frecuencia única. Las ventajas incluyen la compacidad del programa: un generador simple de tales efectos de sonido, escrito en JavaScript, es mucho más pequeño que un archivo mp3. Para cada bola, seleccione su propio par de notas lowFreq y highFreq (consulte wikipedia ) y llene el búfer de audio de esta manera: 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);
}
Aquí la frecuencia cambia de lowFreq a highFreq a lo largo de la curva x ½ , y el volumen sin (π x).En una explosión, el volumen decae de acuerdo con la fórmula 1 / (1 + 10 * x + 1000 * x * x), y la frecuencia se selecciona aleatoriamente desde la primera hasta la quinta octava.Tamaño del cuadro de diálogo adaptativo
Implementé un algoritmo para seleccionar el tamaño del cuadro de diálogo para que ocupe todo el espacio posible y no vaya más allá de los límites del área visible. El problema es que en diferentes dispositivos el tamaño de los cuadros de diálogo es diferente: a veces resulta demasiado pequeño y otras no entra en la pantalla. Hice que el tamaño de los cuadros de diálogo dependiera del tamaño de fuente (unidades CSS em). A continuación, clasifico el tamaño de fuente para que el diálogo no ocupe más del 95% de ninguna de las dimensiones de la pantalla. Así que no tuve que presentar casos para CSS adaptativo.Programa pequeño
Todo el juego cabe en un archivo html de aproximadamente 150Kb. Alrededor de 3000 líneas de código fuente (por supuesto, sin el lado del servidor). No se utilizaron bibliotecas y marcos de JavaScript, todo es natural, como en la Edad de Piedra. A veces simplemente no desea tratar con una API de terceros, y a veces es útil comprender cuánto simplifican los marcos la vida de un inventor de bicicletas y un nuevo probador de rastrillos. Es útil pensar primero en cómo implementar esta o aquella idea, y solo luego comparar con cómo lo hicieron los demás. Por ejemplo, la versión para Android solo toma 250Kb. Consiste en un fino envoltorio WebView y un paquete de png-shek para diferentes resoluciones telefónicas. Por cierto, png-shki podría reemplazarse con un vector xml-koy. Hubiera resultado exactamente en el espíritu del minimalismo.Foro
El foro se ejecuta en phpBB . La cuenta te permite:- guarde sus logros en el servidor para que no se pierdan al cambiar su teléfono o computadora
- jugar alternativamente en un dispositivo, luego en otro
- Deje mensajes y haga preguntas a otros jugadores o desarrolladores.
i18n y l10n
Internacionalización y localización. El juego ha sido traducido al ruso y al inglés. Solo 35 frases cortas. No me negaría a recibir asistencia gratuita para traducir a varios idiomas más populares (chino, alemán, ...).Sin anuncios
A menudo puedes escuchar la opinión de que si el programa es gratuito y sin anuncios, significa un troyano, una puerta trasera, un virus ... En otras palabras, el queso gratis solo está en una trampa para ratones. De lo contrario, ¿por qué? ¿Por qué alguien está dispuesto a hacer algo por otros gratis? No sé la respuesta general. No solo eso, no sé exactamente por qué lo hago yo mismo. Tengo curiosidad. Si te gusta algo, entonces a menudo me pregunto cómo tuvo éxito el autor. Me gustaría intentar hacer lo mismo o incluso mejor. A veces me gusta todo, con la excepción de algunos detalles, y hay un deseo de hacer algo como esto, pero con mi blackjack y las yemas de los dedos.Conclusión
Eso es todo por ahora. Espero que disfrutes el juego tanto como yo estaba interesado en crearlo. Estaré encantado de cualquier comentario.Referencias