jairogarcíarincón

La plantilla

731
La plantilla
08/09/2021

Contenidos

  1. La plantilla
  2. Los elementos HTML, CSS y JS
  3. Los elementos del juego
  4. El movimiento de la nave
  5. La detección de colisiones
  6. El contador de movimientos
  7. El temporizador

Añadir un nuevo proyecto en NetBeans

Si aún no hemos configurado un proyecto en NetBeans para nuestros trabajos, es lo primero que debemos hacer:

1.Crea una nueva carpeta llamada spacestars dentro de la ruta c:\xampp\htdocs\

Paso 1. Nueva carpeta

2. Accede a File > New Project..., seleccionaremos Categories: HTML5/Javascript y Projects: HTML5/JS Application with Existing Sources y haz clic en Next
Paso 2. Nuevo proyecto

3. Selecciona (botón Browse...) c:\xampp\htdocs\spacestars\ como Site Root y Source Folder y haz clic en Finish.
Paso 3. Datos de proyecto

Ahora ya puedes acceder a tu proyecto, aunque estará vacío, desde el árbol de proyectos de la izquierda de NetBeans.

Estructura de archivos y directorios

  • Haciendo clic con el botón derecho en el nombre de tu proyecto, añade un nuevo archivo New > HTML File... con el nombre index.html
  • Haciendo clic con el botón derecho en el nombre de tu proyecto, añade dos nuevos directorios New > Folder... con los nombres css y js.
  • Pinchando en cada directorio con el botón derecho, añade dos nuevos archivos New > Cascading Style Sheet... y New > JavaScript File... con los nombres style.css y script.js, respectivamente.


En este momento, la estructura de árbol de directorios debería ser similar a la siguiente:

Estructura de archivos y directorios


Enlazado de archivos JavaScript y CSS desde index.html

Una vez creados todos los archivos y carpetas, solo necesitaríamos enlazarlos a nuestra página principal de proyecto. Para ello, el código de tu fichero index.html debería ser como sigue:



<!DOCTYPE html>

<html>

    <head>

        <title>Space Stars</title>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="stylesheet" type="text/css" href="css/style.css">

        <script type="text/javascript" src="js/script.js"></script>

    </head>

    <body>

        <h1>Space Stars</h1>

    </body>

</html>


Comprobación de la plantilla

Para comprobar que hemos realizado correctamente todos los pasos, podemos acceder en cualquier navegador (preferiblemente Firefox o Chrome) a http://localhost/spacestars/ y debería mostrarnos una página en blanco con nombre de pestaña y título Space Stars. Además, si hacemos clic con el botón derecho en Inspeccionar elemento... (o pulsamos F12) y accedemos a la sección Consola, no deberíamos tener ningún error.

Si tienes algún error o no accedes a la página, comprueba que en el Panel de Administración de XAMPP has iniciado el módulo Apache (con el botón Start) y revisa bien el resto de pasos.

Las herramientas para Desarrolladores de Chrome y Firefox

Como hemos dicho, haciendo clic con el botón derecho en cualquier elemento de la página en Inspeccionar elemento... (o pulsando F12) podemos acceder a una serie de vistas del navegador que nos van a facilitar el análisis y detección de errores en nuestro código HTML, CSS y JavaScript. Puedes encontrar un tutorial completo de opciones haciendo clic AQUÍ o AQUÍ.

Publicado el 02 de Diciembre de 2021

javascripthtml5space starscanvas

Siguiente