Codiad, desarrollo web en línea. ~ Homodigital

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 blog 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.

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.

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.

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.

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.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>
  <script src="snake.js" type="text/javascript"></script>
  <style>
.game
{
margin: 0 auto;
width: 450px;
}
  </style>
  <title>snake</title>
</head>
<body>

<div class="game">
<canvas id="snake" width="450" height="450"></canvas>
</div>
</body>
</html>

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.

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

$(document).on('ready', function() {
    //Vamos a crear un contexto 2d de nuestro canvas.
    var canvas = $("#snake")[0];
    var context = canvas.getContext("2d");
    
    //Obtenemos el ancho y alto de nuestro canvas.
    var width = $("#snake").width();
    var height = $("#snake").height();
    
    //Definimos algunas variables para configurar nuestro juego
    var cellWidth = 10;
    var d;
    var food;
    var score;
    var level = 1; //1 El nivel más lento, 10 el nivel más rápido.
    var background = 'white';
    var border = 'black';
    var snakeColor = 'black';
    
    //Creamos nuestra víbora
    var snake;
    //El juego tiene la dirección "right" por defecto y se ejecuta la función paint
    //dependiendo el nivel que hayas configurado arriba
    function init()
    {
        d = "right";
        createSnake();
        createFood();
        score = 0;
        
        if(typeof gameLoop != "undefined") {
            clearInterval(gameLoop);
        }
        
        gameLoop = setInterval(paint, 1000 / level);
    }
    
    init();
    
    //Creamos la víbora
    function createSnake()
    {
        var length = 5;
        snake = [];
        
        for(var i = length - 1; i >= 0; i--)
        {
            snake.push({ x: i, y: 0 });
        }
        
    }
    
    //Creamos la comida de la víbora de manera aleatoria
    function createFood()
    {
        food = {
            x: Math.round(Math.random() * (width - cellWidth) / cellWidth),
            y: Math.round(Math.random() * (height - cellWidth) / cellWidth),
        };
    }
    
    //Dibujamos la víbora
    function paint()
    {
        context.fillStyle = background;
        context.fillRect(0, 0, width, height);
        context.strokeStyle = border;
        context.strokeRect(0, 0, width, height);
        
        var nx = snake[0].x;
        var ny = snake[0].y;
        
        if (d == "right") {
            nx++;
        } else if (d == "left") {
            nx--;
        } else if (d == "up") {
            ny--;
        } else if (d == "down") {
            ny++;
        }
        
        if (nx == -1 || nx == width / cellWidth || ny == -1 || ny == height / cellWidth || checkCollision(nx, ny, snake)) {
            init();
            return;
            
        }
        
        if(nx == food.x && ny == food.y) {
            var tail = {
                x: nx,
                y: ny
            };
            
            score++;
            createFood();
        } else {
            var tail = snake.pop();
            
            tail.x = nx;
            tail.y = ny;
        }
        
        snake.unshift(tail);
        for(var i = 0; i < snake.length; i++) {
            var c = snake[i];
            paintCell(c.x, c.y);
            
        }
        
        paintCell(food.x, food.y);
        
        var scoreText = "www.codejobs.biz - Score: " + score;
        
        context.fillText(scoreText, 5, height - 5);
        
    }
    
    //Pintamos la celda
    function paintCell(x, y)
    {
        context.fillStyle = snakeColor;
        context.fillRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth);
        context.strokeStyle = background;
        context.strokeRect(x * cellWidth, y * cellWidth, cellWidth, cellWidth);
    }
    
    //Verificiamos si hubo alguna colisión (si la hubo el juego se reinicia)
    function checkCollision(x, y, array)
    {
        for(var i = 0; i < array.length; i++)
        {
            if(array[i].x == x && array[i].y == y) {
                return true;
            }
            
        }
        
        return false;
        
    }
    
    //Captamos las flechas de nuestro teclado para poder mover a nuestra víbora
    
    $(document).on('keydown', function(e) {
        var key = e.which;
        
        if (key == "37" && d != "right") {
            
            d = "left";
        } else if (key == "38" && d != "down") {
            d = "up";
        } else if (key == "39" && d != "left") {
            d = "right";
        } else if (key == "40" && d != "up") {
            d = "down";
        }
    });
});

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.

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.

Enlaces:

- NVU Portable, un editor HTML portátil y gratis.

- Desarrollo web HTML5 con Google Drive.
- Desarrollo web en la nube con ICEcoder.

Homodigital

Top Ad 728x90

Codiad, desarrollo web en línea.

Codiad un Cloud IDE Open Source.

¿Cómo instalar el entorno?

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

Creando el juego Snake en HTML5 desde Codiad.

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

Ver juego Snake*.

Descarga los archivos fuentes del juego*.

0 comments:

Publicar un comentario

Top Ad 728x90

Recomendado para ti

Aprende

Micrositios

¿Buscas empleo?

Translate this blog

Contenidos

Noticias PR Newswire

Visitas

Estamos en

Top Ad 728x90

Sobre el autor

Feedly

Blogs recomedados

Post Recomendados

Entrada destacada

Canva y la Creación de Contenidos

Seguidores