iniciación al desarrollo de juegos con javascript
DESCRIPTION
En este documento semuestra una serie de pasos para crear un simple juego de ping pong, utilizarlo como introduccion a la programacion de juegos con HTML5, CSS y JS.TRANSCRIPT
¿CÓMO CREAR NUESTRO PROYECTO? Paso a paso
¡Hola!
Crearemos nuestra Mesa de Ping Pong con HTML5 desde cero. Puede sonar como si
vamos a ser la preparación de todas las cosas nosotros mismos. Por suerte, podemos usar
una biblioteca Javascript para ayudarnos. Jquery es la biblioteca Javascript que está
diseñada para navegar por el DOM (no esntraremos en detalle) fácilmente. Vamos a usar
esta biblioteca en el proyecto para manipular elementos del DOM. Esto nos ayudará a
hacer las cosas más fáciles, comencemos:
1. Crea una nueva carpeta llamada “pingpong”.
2. Dentro de esta carpeta crearemos los siguientes archivos, con la siguiente
estructura:
a. Un archivo vacío llamado index.html (notar la extensión de archivo, es
decir, guardarlo en bloc de notas o sublime text con extensión *.html)
b. Crear una carpeta llamada js, y dentro de esta, un archivo en blanco
llamado pingpong.js (creado en bloc de notas o en SublimeText, guardado
con la extensión de javascript).
c. Crear otra carpeta llamada css. Y, dentro de la carpeta, un archivo vacío
llamado pingpong.css, de igual manera fijarse en la extensión con la que
deberá ser guardado.
3. Ahora descargaremos la librería que nos ayudará desde el siguiente link
http://jquery.com/, seleccionar Download jQuery y hacer clic en Download
compressed, production jQuery 2.1.3.
4. Guarda este archivo, después de descargarlo, en la carpeta js que crearon en el
paso dos.
5. Abre el archivo index.html en tu editor (bloc de notas o SublimeText) e introduce
el siguiente código para crear nuestra plantilla de una página web:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ping Pong</title>
<link rel="stylesheet" href="css/pingpong.css">
</head>
<body>
<div class=”container”>
<center>
<header>
<h1>Mi mesa de Ping Pong</h1>
</header>
<div id="game">
<!—Aquí irán los elementos del juego -->
</div>
<footer>
<p>Este es un ejemplo sencillo de un juego en HTML5</p>
</footer>
</center>
<div>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/pingpong.js"></script>
</body>
</html>
Deberás copiar el código tal cual, cualquier error, házmelo saber en la comunidad de
google plus. Guarda los cambios en tu archivo y ciérralo.
6. Por último, probaremos si la librería jQuery está funcionando en tu navegador, de
preferencia ten dos navegadores diferentes, menos IE. Ahora abre el archivo
pingpong.js y agrega el siguiente código:
(function($){
$(function(){
// alert a message
alert("Bienvenido al juego de Ping Pong.");
});
})(jQuery);
Con este código, llamamos una función de jQuery y lanzamos una alerta, por lo cual, si
la librería está trabajando en tu navegador al ejecutar el archivo index.html, debería
lanzarte una alerta con la oración “bienvenido al juego de ping pong”. Es momento para
probar que tal vamos. Ejecuta tu archivo index.html.
Ahora vamos a configurar los elementos de nuestro juego. Para eso prosigamos con los
pasos siguientes:
7. Vamos agregar los elementos de nuestro juego, volvemos a abrir nuestro archivo
index.html y en la sección donde nos indica que irán los elementos, es decir, entre
las etiquetas <div id=”game”>, agregaremos el siguiente código:
<div id="playground">
<div class="paddle-hand right"></div>
<div class="paddle-hand left"></div>
<div id="paddleA" class="paddle"></div>
<div id="paddleB" class="paddle"></div>
<div id="ball"></div>
</div>
8. Bien, es tiempo de aplicar estilos a nuestro juego, para eso, abriremos el archivo
pingpong.css y agregaremos el siguiente código:
body {
background: gray;
}
.container {
margin: 0 auto;
border: 2px solid #ddd;
border-radius: 15px;
box-shadow: 5px 5px #ccc;
background: #fff;
width: 500px;
height: 300px;
}
#game {
position: relative;
width: 400px;
height: 200px;
}
#playground{
background: #000;
background-size: contain;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
cursor: pointer;
}
#ball {
background: #fbb;
position: absolute;
width: 20px;
height: 20px;
left: 150px;
top: 100px;
border-radius: 10px;
}
.paddle {
background-size: contain;
top: 70px;
position: absolute;
width: 30px;
height: 70px;
}
#paddleA {
left: 50px;
background: #fff;
border-radius: 3px;
}
#paddleB {
right: 50px;
background: #fff;
border-radius: 3px;
}
Aquí comienza tu trabajo, cambia los valores de background, puedes agregar el
nombre del color que desees pero en inglés, o bien usar la notación hexadecimal,
para eso busca en google como representar los colores hexadecimales, además
modifica las medidas de los paddles, del game, y de la ball, para eso solo cambia los
valores de width y height en todos los lugares donde los encuentres, como te
mencione anteriormente no tengas miedo a descomponerlo, siempre podrás volver
a comenzar.
Por ultimo agreguemos los detalles finales en nuestro estilos, volvemos al archivo
pingpong.css y añadimos el siguiente código:
.paddle-hand {
background: gray;
background-size: contain;
width: 10px;
height: 100%;
position: absolute;
top: 0;
}
.left.paddle-hand {
left: 60px;
}
.right.paddle-hand {
right: 60px;
}
Ahora agreguemos funcionalidad a nuestro juego modificando nuestro archivo
pingpong.js para eso utilizaremos el siguiente código de bajo del ya existente:
(function($){
// data definition
var pingpong = {
paddleA: {
x: 50,
y: 100,
width: 20,
height: 70
},
paddleB: {
x: 320,
y: 100,
width: 20,
height: 70
},
playground: {
offsetTop: $("#playground").offset().top,
height: parseInt($("#playground").height()),
width: parseInt($("#playground").width()),
},
ball: {
speed: 5,
x: 150,
y: 100,
radius: 20,
directionX: 1,
directionY: 1
}
};
// ball collision logic
function ballHitsTopBottom() {
var y = pingpong.ball.y + pingpong.ball.speed * pingpong.ball.directionY;
return y < 0 || y > pingpong.playground.height;
}
function ballHitsRightWall() {
return pingpong.ball.x + pingpong.ball.speed * pingpong.ball.directionX >
pingpong.playground.width;
}
function ballHitsLeftWall() {
return pingpong.ball.x + pingpong.ball.speed * pingpong.ball.directionX < 0;
}
// ball movement logic
function moveBall() {
// reference useful varaibles
var ball = pingpong.ball;
// check playground top/bottom boundary
if (ballHitsTopBottom()) {
// reverse direction
ball.directionY *= -1;
}
// check right
if (ballHitsRightWall()) {
playerAWin();
}
// check left
if (ballHitsLeftWall()) {
playerBWin();
}
// Variables for checking paddles
var ballX = ball.x + ball.speed * ball.directionX;
var ballY = ball.y + ball.speed * ball.directionY;
// check moving paddle here, later.
// check left paddle
if (ballX >= pingpong.paddleA.x && ballX < pingpong.paddleA.x +
pingpong.paddleA.width) {
if (ballY <= pingpong.paddleA.y + pingpong.paddleA.height && ballY >=
pingpong.paddleA.y) {
ball.directionX = 1;
}
}
// check right paddle
if (ballX + pingpong.ball.radius >= pingpong.paddleB.x && ballX <
pingpong.paddleB.x + pingpong.paddleB.width) {
if (ballY <= pingpong.paddleB.y + pingpong.paddleB.height && ballY >=
pingpong.paddleB.y) {
ball.directionX = -1;
}
}
// update the ball position data
ball.x += ball.speed * ball.directionX;
ball.y += ball.speed * ball.directionY;
}
// winning logic
function playerAWin() {
// reset the ball;
pingpong.ball.x = 250;
pingpong.ball.y = 100;
// update the ball location variables;
pingpong.ball.directionX = -1;
}
function playerBWin() {
// reset the ball;
pingpong.ball.x = 150;
pingpong.ball.y = 100;
// update the ball location variables;
pingpong.ball.directionX = 1;
}
function autoMovePaddleA() {
var speed = 4;
var direction = 1;
var paddleY = pingpong.paddleA.y + pingpong.paddleA.height/2;
if (paddleY > pingpong.ball.y) {
direction = -1;
}
pingpong.paddleA.y += speed * direction;
}
// view rendering
function renderPaddles() {
$("#paddleB").css("top", pingpong.paddleB.y);
$("#paddleA").css("top", pingpong.paddleA.y);
}
function renderBall() {
var ball = pingpong.ball;
$("#ball").css({
"left" : ball.x + ball.speed * ball.directionX,
"top" : ball.y + ball.speed * ball.directionY
});
}
// view inputs
function handleMouseInputs() {
// run the game when mouse moves in the playground.
$('#playground').mouseenter(function(){
pingpong.isPaused = false;
});
// pause the game when mouse moves out the playground.
$('#playground').mouseleave(function(){
pingpong.isPaused = true;
});
// calculate the paddle position by using the mouse position.
$('#playground').mousemove(function(e){
pingpong.paddleB.y = e.pageY - pingpong.playground.offsetTop;
});
}
// browser render loop
function render() {
renderBall();
renderPaddles();
window.requestAnimationFrame(render);
}
function gameloop() {
moveBall();
autoMovePaddleA();
}
// starting point of entire game
function init() {
// set interval to call gameloop logic in 30 FPS
pingpong.timer = setInterval(gameloop, 1000/30);
// view rendering
window.requestAnimationFrame(render);
// inputs
handleMouseInputs();
}
// Execute the starting point
init();
})(jQuery);
Vuelve a cargar tu sitio en un navegador y veras como en estos pocos pasos hemos
logrado crear nuestro juego de ping pong, el código utilizado para las funciones de nuestro
juego lo examinaremos pronto, en clase, lo importante hasta el momento es que te has
comenzado a involucrar con el desarrollo de software y haz creado tu primer aplicación.
En el transcurso de tu carrera, adquirirás las habilidades necesarias para generar
soluciones basadas en esta rama de las ciencias de la computación. Espero acompañarte
en tu camino y poder marcar una pequeña huella en este proceso de formación
profesional.
Por último, cabe mencionar que espero haber logrado captar tu atención y enamorarte del
desarrollo de software, si tienes alguna duda no dudes en comunicarte conmigo y a la
brevedad yo te responderé. Suerte y a modificar tu proyecto, recuerda que no debe ser
igual al de ninguno de tus compañeros, no olvides que lo único que debes hacer es
modificar tu archivo pingpong.css (lo que significa que modificaras tus estilos) y desde
luego el archivo index.html(puedes agregar texto o lo que desees), pero no modifiques el
archivo pingpong.js, eso lo aremos después cuando tengamos más experiencia.