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
Páginas
jueves, 11 de mayo de 2017
Experimentos con gráficos en Javascript
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&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);
});
}
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&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);
});
}
Suscribirse a:
Entradas (Atom)