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
No hay comentarios:
Publicar un comentario