Facebook Twitter RSS Reset

Te enseño a programar juegos: Pong Basico

Te enseño a programar juegos: Pong Basico

Hola que linceoso pachorroso, se que vivís en un habitad de perezosos en donde aprender y utilizar el cerebro es lo ultimo que harías. Te propongo aprender un poco mas de programación, este no es para principiantes que no saben nada, pero voy a tratar de explicar lo mas detallado posible.

Aunque no sepas programar trata de seguir los pasos del post a ver si entendes algo.

Bueno hoy quiero que empezamos a programar un juego sencillo en javascript.

Para el que no sabe javascript es un lenguaje interpretado que viene en todos los navegadores modernos, son para mejorar la utilidad de la una pagina web. En estos tiempos no hay pagina que no utilice aunque sea un poco de javascript.

Es un lenguaje muy flexible que te permite hacer millones de cosas, es muy popular en el ámbito de desarrollo web. Si lo sabes manejar bien podes crear cosas increíbles. Hay rpgs y otros juegos de multiplayer masivo hechos completamente en javascript tanto cliente como servidor.

Bueno pero vamos con lo nuestro, que necesito saber para poder seguir el post? Sencillo tenes que tener los conceptos básicos de la programación: variables, funciones, objetos. El resto lo vamos explicando sobre la marcha. Ahora si al code.

Programas, lo único que necesitamos es un editor de código o de texto plano(notepad, gedit, sublime text) tu navegador favorito y listo.

Empezamos creando “index.html” el html para que lo harbamos con el navegador:

(TARINGA HDP NO ME DEJA PONER HTML)

Te enseño a programar juegos: Pong Basico

Este código no es necesario que lo entiendas si no sabes html no importa, explico un poco: esa es la estructura básica de un archivo html dentro de las etiquetas body esta el elemento canvas, donde se “dibujara” nuestro juego.

Ahora creamos el archivo del juego “game.js”, este archivo lo vamos a ir construyendo por partes para entender mejor


var canvas = document.getElementById('pong');

var ctx = canvas.getContext('2d');

var raf = requestAnimationFrame;

function draw() {

}

function update() {

}

function main() {

    update();

    draw();

    raf(main);

}

raf(main);

Bueno empezamos declarando unas variables y una función, esto en si no tiene que ver con la lógica del juego, si no para la parte de graficar los elementos(paleta,bola), puedo explicar un poco:la variable canvas contiene el elemento anterior que vimos en el html , luego la variable ctx contiene los métodos para graficar en el elemento(lo vamos a utilizar para la parte de dibujo) luego la variable raf que es una función que se ejecuta siempre un loop infinito, donde se vas a ejecutar la lógica del juego y la parte de dibujado. La función update es donde esta la parte de la lógica, y en la función draw esta la parte de dibujado.

Ahora sigamos con la parte fácil de dibujar los elementos principales, pero primero creemos los elementos


var canvas = document.getElementById('pong');

var ctx = canvas.getContext('2d');

var raf = requestAnimationFrame;

var ball = {x: canvas.width / 2 - 5, y: canvas.height / 2 - 5, r: 10, direction: -45, speed: 10};

var player = {x: width / 2 - 50, y: height - 20, points: 0, n: 1};

var pc = {x: width / 2 - 50, y: 20, points: 0, n: 2};

function draw() {

}

function update() {

}

function main() {

    update();

    draw();

    raf(main);

}

raf(main);

Ahí vimos como agregamos tres nuevas variables que contienen la posición inicial, y la velocidad de ball, player, pc, La variable pc es el claramente el oponente que este se va a mover con ia(inteligencia artificial) muy básica.

Empecemos dibujando cada uno de los objetos:


var canvas = document.getElementById('pong');

var ctx = canvas.getContext('2d');

var raf = requestAnimationFrame;

var ball = {x: canvas.width / 2 - 5, y: canvas.height / 2 - 5, r: 10, direction: -45, speed: 10};

var player = {x: width / 2 - 50, y: height - 20, points: 0, n: 1};

var pc = {x: width / 2 - 50, y: 20, points: 0, n: 2};

function drawPalette(a) {

    ctx.fillStyle = "#000";

    ctx.fillRect(a.x, a.y, 100, 10);

    ctx.fill();

}

function drawBall(a) {

    ctx.beginPath();

    ctx.arc(a.x, a.y, a.r, 0, 2 * Math.PI, false);

    ctx.fillStyle = "#000";

    ctx.fill();

}

function clearScreen() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

}

function draw() {

    clearScreen();

    drawPalete(player);

    drawPalete(pc);

    drawBall(ball);

}

function update() {

}

function main() {

    update();

    draw();

    raf(main);

}

raf(main);

Agregamos 3 nuevas funciones, paso a explicarlas, la clearScreen, en traducción a español se entiende lo que hace limpiarPantalla, osea borra todo y dibujamos de nuevo asi infinitamente. Todo esto no es necesario que lo sepan ya que en lo motores de juegos, esto que casi no lo tocan si no que van directamente a la lógica, pero no vale la pena usar un motor de juegos para juegos simples. por eso utilizamos esta especie de motor super básico. Luego vemos la función de drawPallete claramente dibuja una paleta en la posición dada, luego drawBall, obviamente dibuja una bola en la posición indicada, estas tres funciones las agregamos a la funcion draw pasandole como paramentos los objetos anteriormente creados.

Ahora si llegamos a lo bueno a la lógica del juego que de por si es muy básica. Un poco de movimiento y colisiones


var canvas = document.getElementById('pong');

var ctx = canvas.getContext('2d');

var raf = requestAnimationFrame;

var ball = {x: canvas.width / 2 - 5, y: canvas.height / 2 - 5, r: 10, direction: -45, speed: 10};

var player = {x: canvas.width / 2 - 50, y: canvas.height - 20, points: 0, n: 1};

var pc = {x: canvas.width / 2 - 50, y: 20, points: 0, n: 2};

function moveBall(ball) {

    if(ball.direction == 45) {

        ball.x += ball.speed;

        ball.y += -ball.speed;

    } else if(ball.direction == -45) {

        ball.x += ball.speed;

        ball.y += ball.speed;

    } else if(ball.direction == -135) {

        ball.x += -ball.speed;

        ball.y += ball.speed;

    } else if(ball.direction == 135) {

        ball.x += -ball.speed;

        ball.y += -ball.speed;

    }

}

function ballCollision(ball) {

    if(ball.x + ball.r / 2 >= canvas.width) return 2;

    if(ball.y - ball.r / 2 <= 0) return 1;
    if(ball.x - ball.r / 2 <= 0) return 2;    
    if(ball.y + ball.r / 2 >= canvas.height) return 1;

    if(ball.x >= player.x && ball.x <= player.x + 100 && ball.y + ball.r / 2 >= player.y) return 2;

    if(ball.x >= pc.x && ball.x <= pc.x + 100 && ball.y - ball.r / 2 <= pc.y + 10) return 2;
    return 0;

}

function ballDirection(ball) {

    if(ballCollision(ball) == 2) {

        if(ball.direction !== 135) {

            ball.direction += 90;

        } else if(ball.direction == 135) {

            ball.direction = -135;

        }

    }

}

function drawPalette(a) {

    ctx.fillStyle = "#000";

    ctx.fillRect(a.x, a.y, 100, 10);

    ctx.fill();

}

function drawBall(a) {

    ctx.beginPath();

    ctx.arc(a.x, a.y, a.r, 0, 2 * Math.PI, false);

    ctx.fillStyle = "#000";

    ctx.fill();

}

function clearScreen() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

}

function draw() {

    clearScreen();

    drawPalette(player);

    drawPalete(pc);

    drawBall(ball);

}

function update() {

    moveBall(ball);

    ballCollision(ball);

    ballDirection(ball);

}

function main() {

    update();

    draw();

    raf(main);

}

raf(main);

Ufff si agregamos 3 funciones mas, explicación. moveBall esta función mueve la pelota en una dirección como vieron en los condicionales hay 4 tipos de angulos en los que se mueve la pelota. Después viene ballCollision, esta detecta la colisión entre las dos paletas(player,pc) y las cuatro paredes, si vemos que si tocas en las paletas o en las paredes laterales retorna el valor 2 si toca en las parte inferior o superior de las paredes retorna 1 y si no toca nada retorna 0. Esto es para identificar que debemos hacer si cambiar de dirección o no. Por ultimo tenemos ballDirection, que utiliza la función anterior como dijimos para saber si cambiar de dirección o no. como vemos es bastante básica como solo hay cuatro ángulos y la posición inicial es -45 vamos sumando de a 90 si no es 135 osea si no llega al angulo máximo si no lo revertimos y comenzamos a empezar osea -135. Bueno con esto ya tenemos la parte de dibujado y lógica de la pelota lista. Pero falta mover las paletas.

Eso se arregla con el evento que detecta el movimiento del mouse y nos da la posición actual del mouse y las cambiamos con las de nuestro jugador muy fácil:


var canvas = document.getElementById('pong');

var ctx = canvas.getContext('2d');

var raf = requestAnimationFrame;

var ball = {x: canvas.width / 2 - 5, y: canvas.height / 2 - 5, r: 10, direction: -45, speed: 10};

var player = {x: canvas.width / 2 - 50, y: canvas.height - 20, points: 0, n: 1};

var pc = {x: canvas.width / 2 - 50, y: 20, points: 0, n: 2};

function moveBall(ball) {

    if(ball.direction == 45) {

        ball.x += ball.speed;

        ball.y += -ball.speed;

    } else if(ball.direction == -45) {

        ball.x += ball.speed;

        ball.y += ball.speed;

    } else if(ball.direction == -135) {

        ball.x += -ball.speed;

        ball.y += ball.speed;

    } else if(ball.direction == 135) {

        ball.x += -ball.speed;

        ball.y += -ball.speed;

    }

}

function ballCollision(ball) {

    if(ball.x + ball.r / 2 >= canvas.width) return 2;

    if(ball.y - ball.r / 2 <= 0) return 1;
    if(ball.x - ball.r / 2 <= 0) return 2;    
    if(ball.y + ball.r / 2 >= canvas.height) return 1;

    if(ball.x >= player.x && ball.x <= player.x + 100 && ball.y + ball.r / 2 >= player.y) return 2;

    if(ball.x >= pc.x && ball.x <= pc.x + 100 && ball.y - ball.r / 2 <= pc.y + 10) return 2;
    return 0;

}

function ballDirection(ball) {

    if(ballCollision(ball) == 2) {

        if(ball.direction !== 135) {

            ball.direction += 90;

        } else if(ball.direction == 135) {

            ball.direction = -135;

        }

    }

}

function drawPalette(a) {

    ctx.fillStyle = "#000";

    ctx.fillRect(a.x, a.y, 100, 10);

    ctx.fill();

}

function drawBall(a) {

    ctx.beginPath();

    ctx.arc(a.x, a.y, a.r, 0, 2 * Math.PI, false);

    ctx.fillStyle = "#000";

    ctx.fill();

}

function clearScreen() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

}

function draw() {

    clearScreen();

    drawPalette(player);

    drawPalette(pc);

    drawBall(ball);

}

function update() {

    moveBall(ball);

    ballCollision(ball);

    ballDirection(ball);

}

function main() {

    update();

    draw();

    raf(main);

}

raf(main);

document.onmousemove = function(e) {

    player.x = e.clientX;

}

Listo si quieren lo prueban a ver si funciona, pero verán que el otro no se mueve, bueno si aprendieron algo eso lo pueden tratar de programar ustedes, se los dejo a su imaginación, si no pueden abajo esta el código terminado.


var canvas = document.getElementById('pong');

var ctx = canvas.getContext('2d');

var raf = requestAnimationFrame;

var ball = {x: canvas.width / 2 - 5, y: canvas.height / 2 - 5, r: 10, direction: -45, speed: 10};

var player = {x: canvas.width / 2 - 50, y: canvas.height - 20, points: 0, n: 1};

var pc = {x: canvas.width / 2 - 50, y: 20, points: 0, n: 2};

function bot(a) {

    a.x = ball.x - 50;

}

function moveBall(ball) {

    if(ball.direction == 45) {

        ball.x += ball.speed;

        ball.y += -ball.speed;

    } else if(ball.direction == -45) {

        ball.x += ball.speed;

        ball.y += ball.speed;

    } else if(ball.direction == -135) {

        ball.x += -ball.speed;

        ball.y += ball.speed;

    } else if(ball.direction == 135) {

        ball.x += -ball.speed;

        ball.y += -ball.speed;

    }

}

function ballCollision(ball) {

    if(ball.x + ball.r / 2 >= canvas.width) return 2;

    if(ball.y - ball.r / 2 <= 0) return 1;
    if(ball.x - ball.r / 2 <= 0) return 2;    
    if(ball.y + ball.r / 2 >= canvas.height) return 1;

    if(ball.x >= player.x && ball.x <= player.x + 100 && ball.y + ball.r / 2 >= player.y) return 2;

    if(ball.x >= pc.x && ball.x <= pc.x + 100 && ball.y - ball.r / 2 <= pc.y + 10) return 2;
    return 0;

}

function ballDirection(ball) {

    if(ballCollision(ball) == 2) {

        if(ball.direction !== 135) {

            ball.direction += 90;

        } else if(ball.direction == 135) {

            ball.direction = -135;

        }

    }

}

function drawPalette(a) {

    ctx.fillStyle = "#000";

    ctx.fillRect(a.x, a.y, 100, 10);

    ctx.fill();

}

function drawBall(a) {

    ctx.beginPath();

    ctx.arc(a.x, a.y, a.r, 0, 2 * Math.PI, false);

    ctx.fillStyle = "#000";

    ctx.fill();

}

function clearScreen() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);

}

function draw() {

    clearScreen();

    drawPalette(player);

    drawPalette(pc);

    drawBall(ball);

}

function update() {

    moveBall(ball);

    ballCollision(ball);

    ballDirection(ball);

    bot(pc);

}

function main() {

    update();

    draw();

    raf(main);

}

raf(main);

document.onmousemove = function(e) {

    player.x = e.clientX;

}

Ahora por su cuenta agréguenle los puntos, algo investiguen como tarea pa casa. Bueno eso fue todo ojala les haya servido, hayan aprendido algo, Nos vemos en otra amio.

Te enseño a programar juegos: Pong Basico

No comments yet.

Leave a Comment