Páginas

jueves, 11 de mayo de 2017

Experimentos con gráficos en Javascript

Hola

En esta entrada voy a subir un pequeño juego de rebotes montado en JavaScript puro. El experimento se centra en el manejo de las opciones gráficas de un canvas y en el manejo de los intervalos de repetición en Javascript

El código HTML5 sería:

<!-- Definimos el documento como HTML 5 -->
<!DOCTYPE html>
<!-- Definimos el idioma de la página -->
<html lang="es">
<head>
<!-- Definimos el juego de caracteres de la página -->
<meta charset="UTF-8">
<!-- Definimos el autor de la página -->
<meta name="author" content="Eduardo García">
<!-- Describimos el contenido de la página -->
<meta name="description" content="Rebotes">
<!-- Describimos algunos términos clave de la página -->
<meta name="keywords" content="HTML5,CSS,JavaScript">
<!-- Un pequeño fichero de estilos -->
<link rel="stylesheet" type="text/css" href="./css/ejercicio33.css">
</head>
<body>
<!-- Aquí el contenido de la página -->
<h1>Experimentos con gráficos</h1>
<canvas id="canvas" width="640" height="480"></canvas>
<form>
<input type="button" id="inic" value="Iniciar partida" onclick="iniciar();"/>
<input type="button" id="fin" value="Finalizar partida" onclick="detener();"/>
</form>
<!-- Definimos nuestras dependencias de scripts externos -->
<script type="text/javascript" src="./js/rebotes.js" defer></script>
</body>
</html>

La hoja de estilos sería:

canvas { 
background: #eee; 
}

El código Javascript sería:

/**
 * Constantes
 */
var radioBola = 10;       //Radio de la bola
var paletaAltura = 2;     //Altura de la paleta de juego
var paletaAnchura = 75;   //Anchura de la paleta de juego
var velocBarra = 3;       //Velocidad de movimiento de la paleta
var velocX = 1;           //Velocidad inicial de movimiento de la bola en el eje X
var velocY = -1;   //Velocidad inicial de movimiento de la bola en el eje Y
var deltaVel = 1.2;       //Porcentaje de aumento de velocidad de la bola en cada raquetazo
var deltaAnchura = 1.1;   //Porcentaje de aumento de la anchura de la barra en cada raquetazo

 /**
 * Variables globales
 */
var canvas;               //Area de dibujo
var ctx;                  //Objeto para dibujar en el canvas
var bolaX;                //Coordenada X de la bola
var bolaY;                //Coordenada Y de la bola (ojo Y crece hacia abajo de la pantalla)
var paletaX;              //Coordenada del borde izquierdo de la paleta
var flechaDerecha;        //Flag que indica si la flecha derecha se está pulsando
var flechaIzquierda;      //Flag que indica si la flecha izquierda se está pulsando
var ctrlIntervRepet;      //Variable para controlar la repeticion

 /**
 * Lanzador del juego
 */
function iniciar() {

//Definimos el área de dibujo en 2D
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

//Inicialmente centramos la bola
bolaX = canvas.width/2;
bolaY = canvas.height/2;

//Inicialmente centramos la barra 
paletaX = (canvas.width-paletaAnchura)/2;

//Inicialmente marcamos que no hay ninguna tecla pulsada
flechaDerecha = false;
flechaIzquierda = false;

//Fijamos el intervalo de repintado de la mesa en 10ms
ctrlIntervRepet = setInterval(dibujar, 10);

//Definimos listener para las acciones pulsar tecla y soltar tecla
document.addEventListener("keydown", pulsaTecla, false);
document.addEventListener("keyup", sueltaTecla, false);

//Reajustamos los botones
document.getElementById("inic").disabled = true;
document.getElementById("fin").disabled = false;
}

 /**
 * Detiene la partida
 */
function detener(){
//Paramos la repeticion
clearInterval(ctrlIntervRepet);
//Reajustamos los botones
document.getElementById("inic").disabled = false;
document.getElementById("fin").disabled = true;
//Restauramos anchura de la paleta
paletaAnchura = 75;
//Restauramos la velocidad de la bola
velocX = 1;
velocY = -1;
}

 /**
 * Controlamos qué tecla se pulsa
 */
function pulsaTecla(e) {

//Si se pulsa la flecha derecha (39) o la flecha izquierda (37)
    if(e.keyCode == 39) {
    flechaDerecha = true;
    } else if(e.keyCode == 37) {
    flechaIzquierda = true;
    }
}

 /**
 * Controlamos qué tecla se suelta
 */
function sueltaTecla(e) {

//Si se pulsa la flecha derecha (39) o la flecha izquierda (37)
    if(e.keyCode == 39) {
    flechaDerecha = false;
    }
    else if(e.keyCode == 37) {
    flechaIzquierda = false;
    }
}

 /**
 * Dibuja el talero, la bola y la barra
 */
function dibujar() {

    //Limpiamos el restángulo
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    //Dibujamos la bola
    ctx.beginPath();
    ctx.arc(bolaX, bolaY, radioBola, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
    
    //Dibujamos la barra
    ctx.beginPath();
    ctx.rect(paletaX, canvas.height-paletaAltura, paletaAnchura, paletaAltura);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
    
    //Hay rebote arriba
    if(bolaY + velocY < radioBola) {
    velocY = -velocY;
    }
    
    //Hay rebote abajo
    if(bolaY + velocY > canvas.height-radioBola) {
    //Vemos si hay barra bajo la bola
    if(bolaX<paletaX || bolaX>paletaX+paletaAnchura) {
    //Paramos la partida
    detener();
   
    //Preguntamos si quiere jugar de nuevo
    if(confirm("¿Quieres jugar de nuevo?")){
    //Iniciamos la partida
    iniciar();
    }
    } else {
    //Tenemos rebote en la barra
    velocY = -velocY;
   
    //Incrementamos la velocidad un deltaVel
    velocX = velocX*deltaVel;
    velocY = velocY*deltaVel;
   
    //Hacemos crecer la barra en un deltaAnchura
    paletaAnchura = paletaAnchura*deltaAnchura;
    }
    }

     //Hay rebote izquierda o derecho
    if(bolaX + velocX > canvas.width-radioBola || bolaX + velocX < radioBola) {
    velocX = -velocX;
    }
    
    //Movemos la bola
    bolaX += velocX;
    bolaY += velocY;
    
    //Movemos la barra sin salirnos del borde
    if(flechaDerecha) {
    if (paletaX+paletaAnchura+velocBarra<canvas.width){
    paletaX += velocBarra;
    }
    } else if(flechaIzquierda) {
    if (paletaX-velocBarra>0){
    paletaX -= velocBarra;
    }
    }
}

Un saludo
Publicado por en No hay comentarios:

Peticiones AJAX (GET, POST, PUT y DELETE) usando jQuery

Hola

En esta entrada vamos a ver cómo invocar métodos GET, POST, PUT y DELETE mediante jQuery.

Utilizaremos el API REST ofertado en la URL https://reqres.in/api

Montaremos una página HTML como la siguiente:

<!-- Definimos el documento como HTML 5 -->
<!DOCTYPE html>
<!-- Definimos el idioma de la página -->
<html lang="es">
<head>
<!-- Definimos el juego de caracteres de la página -->
<meta charset="UTF-8">
<!-- Definimos el autor de la página -->
<meta name="author" content="Eduardo García">
<!-- Describimos el titulo de la página -->
<title>AJAX y jQuery</title>
<!-- Describimos algunos términos clave de la página -->
<meta name="keywords" content="HTML5,CSS,JavaScript,jQuery">
</head>
<body>
<!-- Aquí el contenido de la página -->
<h1>AJAX&amp;JQUERY I. Ejemplos de llamadas GET, POST, PUT y DELETE a un servicio REST.</h1>
<!-- Aquí meteremos los usuarios -->
<div id="usuarios"></div>
<!-- Definimos nuestras dependencia con jQuery -->
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<!-- Definimos nuestros propios ficheros Javascript -->
<script type="text/javascript" src="js/ejemplo.js"></script>
</body>
</html>

El contenido de nuestro fichero javascript con jQuery 'ejemplo.js' sería:

/**
 * En este ejemplo usaremos un servicio REST gratuíto que está
 * disponible en Internet y que ofrece métodos GET, POST, PUT 
 * y DELETE para operar con 'usuarios'
 */ 
var urlListaUsuarios = "https://reqres.in/api/users?page=1";
var urlGetUsuario = "https://reqres.in/api/users/";
var urlAltaUsuario = "https://reqres.in/api/users";
var urlBajaUsuario = "https://reqres.in/api/users/";
var urlModificaUsuario = "https://reqres.in/api/users/";

 $(document).ready(getListaUsuarios);
//$(document).ready(getUsuario(2));
//$(document).ready(altaUsuario);
//$(document).ready(bajaUsuario(2));
//$(document).ready(modificaUsuario(2));

 /**
 * Obtenemos por GET la primera página de una lista de usuarios
 */
function getListaUsuarios(){

 $.getJSON(urlListaUsuarios)
.done(function(respuesta, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Recuperados los siguientes usuarios:</h3>");
$.each(respuesta.data, function(i,result){
$("#usuarios").append("<div>Id: "+ result.id + 
 " Nombre: " + result.first_name + 
 " Apellido: " + result.last_name + 
 " Foto: <img src="+result.avatar+"></img></div>");
});
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});
}

 /**
 * Obtenemos por GET los datos del usuario con el id recibido
 */
function getUsuario(idUsuario){

 $.getJSON(urlGetUsuario+idUsuario)
.done(function(result, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Recuperado el siguiente usuario:</h3>");
$("#usuarios").append("<div>Id: "+ result.data.id + 
 " Nombre: " + result.data.first_name + 
 " Apellido: " + result.data.last_name + 
 " Foto: <img src="+result.data.avatar+"></img></div>");
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});

}

 /**
 * Damos de alta a un nuevo usuario
 */
function altaUsuario(){

 $.ajax({
type: "POST",
dataType: "json",
url: urlAltaUsuario,
data: {"name": "eduardo", "job": "developer"}
})
.done(function(result, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Creado el siguiente usuario:</h3>");
$("#usuarios").append("<div>Id: "+ result.id + 
 " Nombre: " + result.name + 
 " Puesto: " + result.job + 
 " Fecha alta: " + result.createdAt );
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});

}

 /**
 * Damos de baja al usuario con el id recibido
 */
function bajaUsuario(idUsuario){

 $.ajax({
type: "DELETE",
dataType: "json",
url: urlBajaUsuario+idUsuario
})
.done(function(result, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Borrado correctamente el usuario: "+idUsuario+"</h3>");
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});

}

 /**
 * Modificamos los datos del usuario recibido por parametro
 */
function modificaUsuario(idUsuario){

 $.ajax({
type: "PUT",
dataType: "json",
url: urlModificaUsuario+idUsuario,
data: {"name": "EduardoX", "job": "DeveloperX"}
})
.done(function(result, textStatus, jqXHR ) {
$("#usuarios").append("<h3>Modifiacdo correctamente el usuario: "+idUsuario+"</h3>");
$("#usuarios").append("<div>Nombre: " + result.name + 
 " Puesto: " + result.job + 
 " Fecha modificacion: " + result.updatedAt );
})
.fail(function( jqXHR, textStatus, errorThrown ) {
$("#usuarios").append("Error llamando al servicio: " + textStatus);
});

}
Publicado por en No hay comentarios:
Suscribirse a: Entradas (Atom)