Las funciones DOM de JavaScript le brindan un poderoso control sobre la visualización de un sitio web. Con una comprensión profunda de DOM, puede recrear dinámicamente un sitio web como si fuera un lienzo en blanco. Si estuvieras tan inclinado, podrías usar estas habilidades para construir un juego basado en el navegador.
acercándose al juego de JavaScript: ¿Cómo encajan las piezas?
ante ti Sumérjase en un proyecto como este, es útil comprender cómo encajarán las piezas individuales. ¿Qué habilidades de programación necesitarás para construir un juego basado en navegador dirigido por JavaScript y PHP?
JavaScript es una opción perfecta para la interfaz. Puede manipular elementos para capturar la entrada (clics del mouse, presiones de botones, etc. Esta entrada se puede usar para alterar dinámicamente la cara del sitio, redibujando el lienzo del juego.
Un script PHP sería más adecuado para manejar la lógica del juego. Puede usar esto para interactuar con archivos o una base de datos (para ahorrar juegos), evaluar las condiciones de victoria y programar una inteligencia artificial. Esto también protege parte de su código del espectador, por lo que no saben cuál es la respuesta para el programa de preguntas, o qué hará la computadora a continuación.
Finalmente, necesita una forma de Únete al JavaScript y al PHP. ¿La solución? Ajax. Después de que su script captura alguna entrada, dispara una solicitud de AJAX al script PHP y luego usa la respuesta para determinar cómo alterar la salida.
Si no está familiarizado con algunas de estas cosas, consulte Esta lista de recursos AJAX y DOM. También puede consultar algunos de estos tutoriales de PHP para obtener orientación en esa dirección.
¿Dónde comenzar? Construir un tablero Tic Tac Toe
Un buen primer proyecto sería construir un tablero Tic Tac Toe. Es un diseño visual simple, las opciones son lo suficientemente limitadas como para hacer posible una IA, y la entrada de usuario es bastante sencilla.
¿Cómo debemos diseñar una interfaz gráfica para esto? Usando HTML y CSS, podemos construir nuestro tablero con etiquetas DIV. Cada div es un cuadrado con una altura/ancho fijo. Luego se apilan en una placa 3×3 usando flotadores y se despejan donde sea necesario.
Cada DIV puede tener una función JavaScript atacada a su atributo OnClick. Esto llama a un pedazo de JavaScript para darle un cierto fondo, por lo tanto, marcarlo como círculo o cuadrado. Aquí hay un buen artículo sobre la idea detrás de este tipo de tablero de juegos JavaScript.
Para finalizar la funcionalidad, tendrá que agregar algo de lógica a su JavaScript. Debe rastrear el reproductor actual, lo que determina qué imagen de fondo (círculo o cruz) se agrega al div. También puede usar más trucos DOM para agregar un mensaje al usuario: imprimir el término del reproductor actual.
Puede sumergirse directamente e intentar desarrollarlo usted mismo, o ver este script de ejemplo con un juego de trabajo en funcionamiento demo.
