Top Ad 728x90

, , ,

Codiad, desarrollo web en línea.

Descubre como usar Codiad un Cloud IDE Open Source, para desarrollar en línea.

Codiad un Cloud IDE Open Source.

Codiad un Cloud IDE Open Source.


Codiad es un entorno de desarrollo open source el cual puedes instalar en tu servicio de hosting. Al instalar esta plataforma tendrás, en tu sitio web, un entorno de desarrollo desde el cual podrás ir creando diversos proyectos. Algunas de las características más interesantes de esta plataforma son: el soporte de más de 40 lenguajes, desarrollo colaborativo, se puede ampliar las funciones del entorno a través de la instalación de plugins, entre muchas otras.

A través de esta nota queremos mostrarte un poco del funcionamiento de este entorno creando el juego Snake en HTML5, todo esto gracias al código proporcionado por Codejobs.

¿Cómo instalar el entorno?


Podrás encontrar una completa guía de instalación en el servicio de Hosting gratuito Smart Free Hosting, la guía la puedes ver en el siguiente enlace:

Instala Codiad, un Cloud IDE, en Smart Free Hosting.



Creando el juego Snake en HTML5 desde Codiad.


El juego de Snake se volvió muy popular cuando aparecieron los primeros celulares con pantalla de LCD, es todo un clásico ya que era muy sencillo de jugar. Gracias a CodeJobs tenemos el código para crear nuestro juego en línea. Solo requeriremos de un navegador que soporte HTML5 (Los más actuales lo hacen) para poderlo ejecutar. Usaremos el código que nos proporciona Codejobs para ver como podemos usar el entorno Codiad. Puedes encontrar la nota original de Codejobs en el siguiente enlace:

Aprende a crear el juego de la víbora (Snake Game) con Canvas (HTML5) y jQuery.


Lo primero que vamos hacer en Codiad es crear el proyecto del juego. Esto lo haremos agregando un proyecto en la sección de Projects, haciendo clic en el símbolo de +. Ilustramos esta acción con una imagen.

Codiad Projects

Al hacer lo anterior se nos abrirá una ventana en donde escribiremos los datos del proyecto al cual llamaremos Snake y lo guardaremos en la carpeta llamada Snake. Al finalizar haremos clic en el botón Create Project. En la imagen de abajo se ilustra lo que te acabamos de mencionar.

Codiad Project Name


Al hacer lo anterior verás que se creara el proyecto y la carpeta en donde guardaremos los archivos del juego. 

Ahora en la sección de Explore, sobre la carpeta Snake haremos clic con el botón derecho para generar el menú contextual y haremos clic en New File.

Codiad New File

Al hacer lo anterior nos saldrá una ventana en donde debemos escribir el nombre del archivo a crear. En este caso el nombre del archivo debe ser snake.html todo en minúsculas. Al concluir haremos clic en Create.

Codiad create file


Al hacer lo anterior verás que aparecerá en la ventana de Explore el archivo creado, para poder editarlo es necesario hacer doble clic sobre el archivo snake.html. Una vez que se active el editor copiaremos el siguiente código.


Una vez que pegues el código en el editor de Codiad haremos clic en guardar (Save), para hacerlo pasaremos el ratón por el menú oculto del lado derecho. Ahí nos aparecerá esta opción.

Codiad Save file

Ahora crearemos otro archivo llamado snake.js, en la opción New file que ilustramos anteriormente y ahí copiaremos el siguiente código.


Solo guarda el archivo creado y listo. Para ver el juego corriendo solo debes hacer clic con botón derecho sobre el archivo snake.html y elegir la opción preview. Asegurate de que tu navegador permita la ejecución de ventanas emergentes.

Codiad Explote files

Puedes ver el juego de Snake corriendo en el siguiente enlace, solo recuerda usar un navegador que soporte HTML5.

Ver juego Snake*.

Descarga los archivos fuentes del juego*.

* Los enlaces contienen publicidad, espera 5 segundos y haz clic en saltar publicidad.

El código del juego puede ser modificado para crear tu propia versión del juego, como verás el uso de Codiad es muy sencillo y te puede ser de suma utilidad para no solo llevar tu código sino para modificarlo también en caso de requerirlo.

0 comentarios:

Publicar un comentario en la entrada

Top Ad 728x90