Axure no es solo una herramienta de prototipos, además de prototipos, también se puede utilizar para crear algunas páginas web estáticas, lo cual es muy práctico para estudiantes que no entienden de código o front-end. Compilé una versión de la " Tabla de autocomprobación de funciones de Axure " antes, porque sentí que había demasiado contenido y no estaba familiarizado con los estilos y scripts de front-end, usé Axure directamente para diseñar y generar una página estática y En su lugar, publíquelo directamente en el servidor.
Solía hacer un pequeño juego de cuchillo volador cuando no tenía tiempo para estudiar Axure. Fue muy difícil. Usé mi tiempo libre para concebirlo. Siento que no es difícil hacer un pequeño juego con Axure. La principal dificultad debe estar en los detalles (como materiales, animación, etc.). Pasé dos días del fin de semana jugando un pequeño juego parecido a parkour llamado " Naruto Shippuden " . ←Haz clic en el título para probarlo . Compartiré contigo las ideas de producción del juego a continuación, y los amigos que estén interesados pueden comunicarse entre sí. otro.
introducción al juego
El juego se divide principalmente en tres modos: modo clásico, modo genin y modo jounin.
Modo clásico: a medida que aumenta la puntuación del juego, la dificultad del juego también aumentará. Al alcanzar los 1000 puntos, la velocidad de movimiento del personaje aumentará. En el modo clásico, si superas la puntuación más alta en la tabla de clasificación, tendrás la oportunidad permanecer en la clasificación (la clasificación es válida permanentemente).
Modo Genin: el más sencillo. En circunstancias normales, los obstáculos del juego son solo ramas de árboles y la dificultad no aumentará.
Modo Jonin: la dificultad es relativamente alta y los obstáculos incluyen ramas y shurikens.
" Naruto Shippuden " ←Haz clic en el título para probarlo
Marco principal del juego
El marco principal del juego utiliza principalmente los tres estados de un panel dinámico principal (iniciar el juego, jugar y finalizar el juego) para controlar el estado del juego. Las operaciones de estado inicial y final son relativamente simples, no las presentaré en detalle aquí, me centraré en compartir algunas configuraciones e ideas del juego.
Acciones de personajes
La propia carrera del personaje utiliza tres imágenes que se reproducen en bucle en el panel dinámico. Debido a que los personajes del juego necesitan saltar hacia adelante y hacia atrás de izquierda a derecha, se deben colocar tres imágenes en direcciones opuestas en otro panel dinámico para jugar en un bucle. Al moverse hacia la izquierda y hacia la derecha, simplemente cambie los paneles laterales izquierdo y derecho. de ida y vuelta.
- Prepare un panel dinámico de personajes y agregue estados izquierdo y derecho al panel.
- Agregue un panel izquierdo al estado izquierdo en el panel de personajes (panel dentro de un panel), agregue tres estados al panel izquierdo y coloque las imágenes de acción de personajes correspondientes en cada estado.
- Agregue el panel derecho al estado derecho en el panel de personajes. Los pasos para agregar tres estados al panel derecho son los mismos que para el panel izquierdo.
- Configure los paneles laterales izquierdo y derecho en bucle y los personajes comenzarán a moverse. Puede activar el bucle al cargar o activarlo a través del botón de inicio (el orden de las imágenes no se puede estropear, de lo contrario la acción será incoherente)
Imágenes de personajes:
Al principio, consideré usar imágenes GIF en su lugar. Después de buscar durante mucho tiempo en Internet, fue difícil encontrar un GIF con personajes corriendo y un fondo transparente. Lo más importante es que el juego necesita cambiar de izquierda a derecha. para correr hacia arriba, así que después de encontrar la imagen GIF, todavía tengo que continuar. Una vez volteada, se obtuvo el movimiento en la dirección opuesta. Después de probar varios métodos, la imagen no se movió cuando se volteó o el fondo se volvió opaco nuevamente. . Al final, simplemente retoqué uno yo mismo. La siguiente imagen es la imagen original del personaje. Usé PS para sacar al personaje del avance y luego hice dos movimientos consecutivos yo mismo.
El personaje se mueve hacia la izquierda y hacia la derecha.
- Coloque dos puntos calientes a la izquierda y a la derecha en la parte superior de la pantalla
- Controle el cambio de los estados izquierdo y derecho del panel de personajes haciendo clic en los puntos calientes en los lados izquierdo y derecho.
- Para que el salto del personaje sea más realista, puedes detener la reproducción del panel del personaje en el estado de acción de salto durante el movimiento hacia la izquierda y hacia la derecha, y continuar jugando después de alcanzar la posición objetivo.
El tiempo de movimiento del personaje también es la velocidad. Puede acortarse o extenderse según algunas condiciones. Por ejemplo, si alcanza los 1000 puntos, aumentará la velocidad de movimiento del personaje y aumentará la diversión del juego. (No es necesario Necesitas considerarlo al principio. Puedes esperar hasta que el marco más básico del juego esté en movimiento antes de aumentarlo. Configuración, porque cuantas más cosas haya, más confuso será controlarlo más adelante y es más probable que cause errores. ).
Escena - árbol
La escena del juego en Naruto Shippuden consiste en saltar de izquierda a derecha sobre un árbol para evitar obstáculos, la escena más básica es el árbol. Hacer que el árbol se mueva también requiere el uso de un panel dinámico, que controla principalmente el movimiento cíclico del árbol.
- Agrega dos imágenes de árboles a la izquierda y a la derecha del juego (la longitud de la imagen es preferiblemente de dos pantallas)
- Agregue un panel dinámico de árbol a la página del juego. Es necesario agregar dos estados al panel (no se requiere contenido en el estado, se usa principalmente para cambiar y activar eventos de cambio). Al agregar un panel de árbol, la imagen del árbol se mueve hacia abajo cuando cambiar (el efecto de movimiento se mueve linealmente) Luego agregue el movimiento para restaurar la imagen del árbol (no es necesario configurar el efecto de movimiento aquí).
- Al ingresar al juego (también puede ser el botón de inicio), se activa el movimiento circular del panel del árbol.
El tiempo de movimiento del árbol depende de la longitud de la imagen del árbol. Si desea que el árbol se mueva suavemente, debe hacer que la posición final del árbol sea exactamente la misma que la posición inicial, de lo contrario habrá una sensación de retraso.
Obstáculos de escena: ramas de árboles.
Las ramas son las mismas que las de los árboles, las ramas izquierda y derecha utilizan dos paneles dinámicos para controlar el movimiento de las ramas.
La velocidad de movimiento de las ramas debe sincronizarse con la velocidad de movimiento del tronco (distancia de movimiento de la rama/tiempo de movimiento = distancia de movimiento del tronco/tiempo de movimiento); de lo contrario, se sentirá como si las ramas no estuvieran creciendo en el tronco.
Las ramas deben configurarse para escalonar la posición inicial al ingresar a la pantalla del juego; de lo contrario, habrá pocas posibilidades de evitar que las ramas caigan al mismo tiempo en los lados izquierdo y derecho. O establezca la velocidad del ciclo de los paneles dinámicos asociados con las ramas izquierda y derecha (la velocidad del ciclo es para controlar la velocidad a la que aparecen las ramas en una escena), de modo que todavía haya una pequeña probabilidad de que aparezcan al mismo tiempo, lo que aumenta el desafío del juego.
Obstáculos de escena - Shuriken
Para aumentar la dificultad y la diversión del juego, se agregan dos shurikens. La posición aleatoria de los shurikens está controlada por la función Math.random(). En este juego, la posición de la coordenada x se controla principalmente. La fórmula de posición es : Shuriken El valor mínimo de la coordenada x donde aparece la espada + Math.random()
Al igual que los troncos y las ramas de los árboles, el movimiento y la restauración del shuriken se pueden controlar mediante un tiempo de conmutación controlado por un panel dinámico.
Para aumentar la diversión del juego, puedes establecer algunas condiciones para que se active el ciclo automático del panel dinámico, como alcanzar 1000 puntos para aumentar la dificultad y activar la caída del shuriken.
Juego fallido - juicio táctil
Además, con la ayuda del cambio cíclico de paneles dinámicos, se activan juicios cuando se cambian los paneles dinámicos. La velocidad del ciclo de este panel debería ser más rápida. Lo configuré aquí para que cambie cada 1 milisegundo (en realidad debería ser menos de 1 milisegundo). Si es más lento, le dará a la gente la sensación de que el área correspondiente no se toca.
Determina si el panel del personaje ha entrado en contacto con ramas, shurikens, etc. Si lo toca, detendrá el panel dinámico que controla el movimiento de otros accesorios y finalmente ingresará al panel principal al final del juego.
Al mismo tiempo, aumenta la diversión del juego: cuando se toca, se puede controlar el panel del personaje para que gire y se mueva, brindando a las personas una experiencia de caída.
puntuación del juego
Muestre la puntuación configurando una variable global y asigne valores continuamente a la variable global durante el juego. Usar directamente
Si el juego falla, la puntuación se controla tocando el evento de cambio del panel de evaluación. Si se toca un obstáculo, el juego termina; de lo contrario, se suman puntos.
Acerca de la música musical
Un juego divertido sin una música de fondo trascendente no tiene alma. La forma más sencilla de agregar música de fondo es agregar un cuadro en línea a la página y acceder a la dirección MP3 a través del cuadro en línea para reproducir (muchos navegadores ahora no admiten este método automáticamente) Jugar , y mucho menos reproducirlo directamente en el navegador WeChat. Lo más extraño es que no solo no se reproduce automáticamente sino que descarga el MP3 como un archivo).
Después de investigar durante mucho tiempo, finalmente decidí rendirme y activar la reproducción automática directamente a través de la configuración de Axure. Finalmente, modifiqué Axure para generar un archivo HTML y agregué algunas líneas de código de reproducción automática. El código se encontró en CSDN y puede reproduzca BGM automáticamente en el navegador WeChat (no. ¿Sabe si existe algún maestro de front-end que pueda hacer que la música se reproduzca automáticamente a través de un código js corto? Es mejor solicitarlo directamente a través de la barra de direcciones para lograr la reproducción. Bienvenido a salir un mensaje para intercambiar).
<script src="http: //res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<audio src="narutoBGM背景音乐.mp3" controls="controls" playsinline="true" webkit-playsinline="true"
x5-video-player-type="h5" x5-video-player-fullscreen="true" autoplay="autoplay" loop="loop" id="myPlay" style="display:none"></audio>
<script>
document.addEventListener('WeixinJSBridgeReady',
function () {
var video = document.getElementById("myPlay");
video.play();
},
false
);
document.addEventListener('touchstar', function () {
var video = document.getElementById("myPlay");
video.play();
}, false);
$(function () {
var video = document.getElementById("myPlay");
$('body').click(function () {//有效
video.play();
});
});
</script> Clasificación del juego
Para aumentar la jugabilidad y la diversión del juego, se ha agregado una función de clasificación simple. Si superas la puntuación más alta, puedes permanecer en la parte superior de la lista.
Pero esto debe registrarse con la ayuda del servidor y actualmente Axure no puede implementarlo directamente.
Lógica de implementación:
Agregue una dirección que se pueda solicitar en el lado del servidor. Cada solicitud trae la puntuación del juego como un parámetro de solicitud Obtener. El lado del servidor determina si la puntuación recibida en la solicitud es mayor que la puntuación más alta en la clasificación actual. Si es mayor que la puntuación más alta, enviará comentarios al cuadro de texto frontal y al botón de enviar. El usuario completa el nombre en el cuadro de texto y envía el nombre a la lista de clasificación. Si la puntuación no es superior a la puntuación más alta, la lista de clasificación se mostrará directamente.
otro
Para aumentar la jugabilidad y el interés del juego, se pueden agregar algunas dificultades, accesorios, modos, etc. Por ejemplo, a medida que aumenta la puntuación del juego, la apariencia del personaje cambia; por ejemplo, agregar algunas tramas, salvar a tu novia y evitar la muerte, etc.
En la planificación original del juego, se planeó usar los accesorios de Rasengan y recolectar los accesorios para evitar la muerte una vez. Más tarde, descubrí que el juego era demasiado complicado y no tenía tiempo para hacerlo (después de todo, volví a mi ciudad natal para escribirlo con un código de fondo en el servidor solo por el bien de las clasificaciones (una función de clasificación)
Axure es realmente potente, especialmente componentes como paneles dinámicos y repetidores que son muy fáciles de usar.