html5 “Kill particles”

 juego_First_Frame

 Si quieres probar el Juego pulsa aquí

-Utiliza las teclas de flecha para jugar    descarga (9)

 DESCRIPCIÓN:

Si contactas con las partículas las matas y sumaras puntos, pero tienes que tener cuidado por que disparan proyectiles y láser.

Para ello tienes que esquivarla esos proyectiles  para que no te impacte contigo.

 

 

Empezamos en esta sección con el primer juego en HTML5, el archivo  index.html es el siguiente:

<!doctype html>
<html lang=”es”>
<head>

<title>proyecto juego en html5</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<link rel=”stylesheet” type=”text/css” href=”css/style.css” />
<audio id=”audioJugador” src=”sonidoDos/movimientoJugador3.mp3″ ></audio>
<audio id=”audioProyectil” src=”sonidoDos/dispaoLaser.mp3″></audio>
<audio id=”audioParticulas” src=”sonidoDos/movimiento.mp3″></audio>
<script type=”text/javascript” src=”js/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”js/juego.js”></script>

</head>
<body>

<canvas width= “500” height=”400″ id=”canvas”>tu navegador no soporta canvas</canvas>
<img id=”particulaGrande” src=”imagenes/particulaGrande.png”>
<img id=”jugador” src=”imagenes/jugadorJuegoDos_opt.png”>
<img id=”particula” src=”imagenes/particula_opt.png”>
<img id=”proyectil” src=”imagenes/pDOS.png”>
<img id=”proyectilDos” src=”imagenes/proyectilDos.png”>
<div id=”contadorPuntos”>
<p class=”contadorPuntos”></p>
<p class=”perdiste”></p>
<p class=”ganaste”></p>

</div>
</body>
</html>

Y ahora el archivo juego.js:

$(document).ready(function(){

// Objetos importentes de canvas
// definición de variables
var intervalo2;
var borradoRotulos = false;

var tecla = [];

var proyectil = [];
var aleatorioX;
var aleatorioY;
var intervalo;
var tiempo1;
var tiempo2;
var texto;
var puntos = {textoPrincipal:”Contador Puntos: “, textoGanarPartida: “has ganado la partida”,
textoPerdiste: “has perdido”, contador: 0};

var fondo;
var nivel;
var particulasEliminadas = 0;
var contacto;
var tiempo3;
var tecla2 = [];
var resultado;
var resultado3;
var contador = 0;
var x1 = 0;
var y1 = 0;
var fondo4 = false;

var jugador = {direccion: “s”, estado: ‘vivo’, dibujar: true, x: 10, y: 10, width: 50, height: 60, radio: 20, inicioRadianes: 0, finalRadianes: 7};
var particula1 = {direccion: “s”, estado: ‘vivo’, dibujar: true, x: 50, y: 50, width: 70, height: 70, contador: 100};
var particula2 = {direccion: “s”, estado: ‘vivo’, dibujar: true, x: 100, y: 100, width: 70, height: 70, contador: 400};
var particula3 = {direccion: “s”, estado: ‘vivo’, dibujar: true, x: 250, y: 200, width: 70, height: 70, contador: 200};
var particula4 = {direccion: “s”, estado: ‘vivo’, dibujar: true, x: 100, y: 200, width: 70, height: 70, contador: 1};
var particula5 = {direccion: “s”, estado: ‘vivo’, dibujar: true, x: 150, y: 200, width: 70, height: 70, contador: 1};
var particula6 = {direccion: “s”, estado: ‘vivo’, dibujar: true, x: 200, y: 200, width: 70, height: 70, contador: 1};
var particula7 = {direccion: “s”, estado: ‘vivo’, dibujar: true, x: 110, y: 200, width: 70, height: 70, contador: 1};
var x = 10;
var y = 0;
var tiempo;
var tecla4;
var juego = {estado: ‘iniciado’};
var canvas, ctx;
var imagenes = [‘particulaJuego.png’, ‘jugadorJuegoUno.png’];
var inicializar = false;
var inicializarDos = false;

canvas = $(‘#canvas’)[0];
ctx = canvas.getContext(‘2d’);
var img = document.getElementById(‘jugador’); // recuperamos imagen del jugador
var imgProyectil = document.getElementById(‘proyectil’); // recuperamos imagen del proyecil
var imgParticula = document.getElementById(‘particula’); // recuperams imagen de la particula
var imgProyectilDos = document.getElementById(‘proyectilDos’); // recuperamos imagen del proyecil
cWidth = $(‘#canvas’).width();
cHeight = $(‘#canvas’).height();
// limpiamaos el canvas
ctx.fillRect(0,0,cWidth,cHeight);
// obtenemos audio del html
var sonidoJugador = document.getElementById(‘audioJugador’);
var sonidoProyectil = document.getElementById(‘audioProyectil’);
var sonidoParticulas = document.getElementById(‘audioParticulas’);
sonidoJugador.src=”sonidoDos/movimientoJugador3.mp3″;
sonidoProyectil.src = “sonidoDos/dispaoLaser.mp3”;
sonidoParticulas.src = “sonidoDos/movimiento.mp3”;

// función del intervalo en el que se ejecuta nuestro juego
function main(){
intervalo = window.setInterval(gameLoop,1000/55);

}
main(); // llamada a la función de intervalo
// jquery que captura la tecla presionada
$(document).keydown(function(event){
tecla[event.which] = true;

});
$(document).keyup(function(event){
tecla[event.which] = false;
jugador.direccion = “s”;
});

// Definición de función principal llamada a todas las funciones
function gameLoop(){
dibujarFondo();
movimientoJugadorTeclado ();
moverJugador();
verificarContactoProyectil()
verificarPartidaGanada();
moverProyectil();
dibujarContadorPuntos();
crearProyectil();
probabilidadCuadrados();
colisionBordesCanvasJugador();
colisionJugadorParticula();
dibujarJugador();
dibujarCuadrados();
dibujarProyectil();

}

// ponemos imagen de fondo en el canvas
function dibujarFondo(){
ctx.save();
ctx.fillStyle = “#0080FF”;
ctx.fillRect(0,0,cWidth,cHeight);
ctx.strokeStyle = “#000000”;
ctx.strokeRect(0,0,cWidth,cHeight);
canvas.style.backgroundImage = “url(‘imagenes/imagen3.png’)”;

ctx.restore();

}

// dibujar jugador
function dibujarJugador(){
canvas.width = canvas.width;
if(contacto == false && jugador.estado == “vivo”){
ctx.save();
ctx.drawImage(img, jugador.x, jugador.y, jugador.width, jugador.height);
ctx.restore();

}

}
// dibujamos contador puntos
function dibujarContadorPuntos(){
if(jugador.estado == “vivo”){
$(“.contadorPuntos”).text(puntos.textoPrincipal + puntos.contador);
}
if(jugador.estado == “muerto”){
//console.log(“entra en el if del contacto”);
$(‘.perdiste’).text(puntos.textoPerdiste);
canvas.width = canvas.width;
nivel = 1;
puntos.contador = 0;
}
if(particulasEliminadas == 5){
$(‘.ganaste’).text(puntos.textoGanarPartida);
fondo4 = true;
nivel = 2;
puntos.contador = 0;
borradoRotulos = true;
}
if(borradoRotulos){
document.getElementsByTagName(“p”).innerHTML=””;
borradoRotulos = false;
}
fondo4 = true;

}
// dibujar esferas para que se las coma en jugador dibujarContadorPuntos();
function dibujarCuadrados(){
if(jugador.estado == “vivo”){
if(particula1.dibujar == true){
ctx.save();
ctx.drawImage(imgProyectil, particula1.x, particula1.y, particula1.width, particula1.height);
// se produce el sonido
sonidoParticulas.play();
ctx.restore();
}

if(particula2.dibujar == true){
ctx.save();
ctx.drawImage(imgProyectil, particula2.x, particula2.y, particula2.width, particula2.height);
// se produce el sonido
sonidoParticulas.play();
ctx.restore();

}

if(particula3.dibujar == true){
ctx.save();
ctx.drawImage(imgParticula, particula3.x, particula3.y, particula3.width, particula3.height);
// se produce el sonido
sonidoParticulas.play();
ctx.restore();

}
if(particula4.dibujar == true){
ctx.save();
ctx.drawImage(imgParticula, particula4.x, particula4.y, particula4.width, particula4.height);
// se produce el sonido
sonidoParticulas.play();
ctx.restore();

}
if(particula5.dibujar == true){
ctx.save();
ctx.drawImage(imgParticula, particula5.x, particula5.y, particula5.width, particula5.height);
// se produce el sonido
sonidoParticulas.play();
ctx.restore();

}

}

}

}
// Parametros en los que se mueve el jugador o se desplaza en este caso 20px dependiendo de la tecla presionada
function moverJugador(){

switch(jugador.direccion){
case “r”:
jugador.x += 20;
break;
case “l”:
jugador.x -= 20;
break;
case “t”:
jugador.y -= 20;
break;
case “d”:
jugador.y += 20;
break;
default:
jugador.x = jugador.x;
jugador.y = jugador.y;

}

}
// movemos el disparo y hacemos que desaparezca del canvas
function moverProyectil(){
for(var i in proyectil){
var disparo = proyectil[i];
disparo.y -= 2;
sonidoProyectil.play();
}
proyectil = proyectil.filter(function(disparo){
return disparo.y > 0;
});
}
// movemos al jugador para el lado que de la tecla presionada
function movimientoJugadorTeclado (){

if (tecla[39]){
// sonido del jugador cuando se despalza a un lado
sonidoJugador.play();
// se desplaza a la derecha el jugador
jugador.direccion = “r”;

}else if(tecla[37]){
// sonido jugador cuando se desplaza
sonidoJugador.play();
// se desplaza a la izquierda
jugador.direccion = “l”;

}else if(tecla[38]){
// sonido jugador cuando se desplaza
sonidoJugador.play();
// se desplaza hacia arriba
jugador.direccion = “t”;

}else if(tecla[40]){
// sonido jugador cuando se desplaza
sonidoJugador.play();
// se desplaza hacia hacia abajo
jugador.direccion = “d”;

}
}
// colisiones con el canvas para que no se salga el jugador u otro elemento del canvas
function colisionBordesCanvasJugador (){
if(jugador.y <= 5 && jugador.direccion == “t”){
jugador.y = 0;
jugador.direccion = “s”;
}else if(jugador.x <= 5 && jugador.direccion == “l”){
jugador.x = 0;
jugador.direccion = “s”;
}else if(jugador.y + jugador.height >= cHeight-5 && jugador.direccion == “d”){
jugador.y = cHeight-jugador.height;
jugador.direccion = “s”;
}else if(jugador.x + jugador.width >= cWidth-5 && jugador.direccion == “r”){
// console.log(“entra en codicional r”);
jugador.x = cWidth – jugador.width;
jugador.direccion = “s”;
}
}
// verifica la colisión entre jugador y la particula
function colisionJugadorParticula(){
if(particula1.dibujar &&
jugador.x + jugador.width > particula1.x &&
jugador.x < particula1.x + particula1.width &&
jugador.y < particula1.y + particula1.height &&
jugador.y + jugador.height > particula1.y){

particula1.dibujar = false;
particula1.estado = “muerto”;
puntos.contador = puntos.contador + 10;
particulasEliminadas++;

}

if(particula2.dibujar &&
jugador.x + jugador.width > particula2.x &&
jugador.x < particula2.x + particula2.width &&
jugador.y < particula2.y + particula2.height &&
jugador.y + jugador.height > particula2.y){

particula2.dibujar = false;
particula2.estado = “muerto”;
puntos.contador = puntos.contador + 10;
particulasEliminadas++;

}

if(particula3.dibujar &&
jugador.x + jugador.width > particula3.x &&
jugador.x < particula3.x + particula3.width &&
jugador.y < particula3.y + particula3.height &&
jugador.y + jugador.height > particula3.y){

particula3.dibujar = false;
particula3.estado = “muerto”;
puntos.contador = puntos.contador + 10;
particulasEliminadas++;

}
if(particula4.dibujar &&
jugador.x + jugador.width > particula4.x &&
jugador.x < particula4.x + particula4.width &&
jugador.y < particula4.y + particula4.height &&
jugador.y + jugador.height > particula4.y){

particula4.dibujar = false;
particula4.estado = “muerto”;
puntos.contador = puntos.contador + 10;
particulasEliminadas++;

}
if(particula5.dibujar &&
jugador.x + jugador.width > particula5.x &&
jugador.x < particula5.x + particula5.width &&
jugador.y < particula5.y + particula5.height &&
jugador.y + jugador.height > particula5.y){

particula5.dibujar = false;
particula5.estado = “muerto”;
puntos.contador = puntos.contador + 10;
particulasEliminadas++;

}
}

/*

***********************************************************************************************************

le damos un valor aleatorio para el movimiento de las particulas y llamamos a la función crearProyectil para que los disparos salga en la misma posición que la particula

**********************************************************************************************************

*/
function probabilidadCuadrados(){

crearProyectil();

if(particula1 && particula1.estado == ‘vivo’){
if(particula1.contador <= 400){
particula1.contador++;
particula1.x = Math.floor((particula1.contador * Math.PI / 300) * 12) + 300;
particula1.y = Math.floor((particula1.contador * Math.PI / 300) * 12) + 340;

}else if(particula1.contador >= 400){

x1 = Math.floor((Math.random() * Math.PI / 10) * 150) + 40;
y1 = Math.floor((Math.random() * Math.PI / 20) * 150) + 18;

particula1.x = x1;
particula1.y = y1;
particula1.contador++;
if(particula1.contador >= 800){
particula1.x+= Math.cos(200)* 100;
particula1.y+= Math.sin(110)* 30;

particula1.contador = 0;
particula1.x = 0;
particula1.y = 0;

}

}

}

if(particula2 && particula2.estado == ‘vivo’){
if(particula2.contador <= 2500){
particula2.contador++;
particula2.x = Math.floor((particula2.contador * Math.PI / 300) * 6) + 100;
particula2.y = Math.floor((particula2.contador * Math.PI / 300) * 6) + 220;
//console.log(“particula2.contador” + particula2.contador);

}else if(particula2.contador >= 2500){
particula2.contador++;
particula2.x += Math.cos(200)* 10;
particula2.y += Math.sin(250)* 20;

if(particula2.contador >= 2700){
particula2.contador = 0;
particula2.x = 10;
particula2.y = 10;

}
}

}
if(particula3 && particula3.estado == ‘vivo’){
if(particula3.contador <= 1700){
particula3.contador++;
particula3.x = Math.floor((particula3.contador * Math.PI / 300) * 7) + 250;
particula3.y = Math.floor((particula3.contador * Math.PI / 300) * 7) + 250;
// console.log(“particula3.contador” + particula3.contador);
}else if(particula3.contador >= 1700){
particula3.contador++;
particula3.x+= Math.cos(200)* 20;
particula3.y+= Math.sin(110)* 30;

}
if(particula3.contador >= 1800){
particula3.contador = 0;
particula3.x = 40;
particula3.y = 40;
}
}

if((particula4 && particula4.estado == ‘vivo’) && particula4.contador < 7900){
particula4.contador++;
particula4.x = Math.floor((-particula4.contador – Math.random(100)) * Math.PI / 100) + 250;
particula4.y = Math.floor((-particula4.contador – Math.random(100)) * Math.PI / 100) + 250;
console.log(“movimiento de particula4 con contador” + particula4.contador);

}else{
particula4.contador = 0;
}
if((particula5 && particula5.estado == ‘vivo’) && particula5.contador < 8100){
particula5.contador++;
particula5.x = Math.floor((-particula5.contador + Math.random(200)) * Math.PI / 100 + 7) + 250;
particula5.y = Math.floor((-particula5.contador + Math.random(200)) * Math.PI / 100 + 77) + 250;
// console.log(“movimiento de particula5 con contador” + particula5.contador);

}else{
particula5.contador = 0;
}

}
// analizamos si coincide las coordenada de jugador y el disparo
function colisionDisparosParticulas(a,b){
contacto = false;
if(b.x + b.width >= a.x && b.x < a.x + a.width){
if(b.y + b.height >= a.y && b.y < a.y + a.height){
contacto = true;
}
}
if(b.x <= a.x && b.x + b.width >= a.x + a.width){
if(b.y <= a.y && b.y + b.height >= a.y + a.height){
contacto = true;
}
}
if(a.x <= b.x && a.x + a.width >= b.x + b.width){
if(a.y <= b.y && a.y + a.height >= b.y + b.height){
contacto = true;
}
}
return contacto;
}

// verificamos que ha habido contacto del disparo con el jugador
function verificarContactoProyectil(){

for(var i in proyectil){

var disparo = proyectil[i];
if(colisionDisparosParticulas(disparo,jugador)){
jugador.estado = “muerto”;
jugador.contador = 0;
// console.log(“hubo contacto”);
// ctx.font=”35px Georgia”;
// ctx.fillStyle = “#E6E6E6”;
// ctx.fillText(“JUEGO FINALIZADO”,50,50);
// ctx.fillText(“pulsar R para jugar”,80,80);

}

}

}

// creamos los disparos
function crearProyectil(){
proyectil.push({
x: particula1.x + 20,
y: particula1.y – 20,
width: 10,
height: 20
});
proyectil.push({
x: particula2.x + 20,
y: particula2.y – 10,
width: 10,
height: 20
});
proyectil.push({
x: particula3.x + 20,
y: particula3.y – 10,
width: 10,
height: 20
});
proyectil.push({
x: particula4.x + 20,
y: particula4.y – 10,
width: 10,
height: 20
});
proyectil.push({
x: particula5.x + 20,
y: particula5.y – 10,
width: 10,
height: 20
});

}
// dibujamos los disparos
function dibujarProyectil(){
if(jugador.estado == “vivo” || particulasEliminadas == 5){
ctx.save();
// ctx.fillStyle = “red”;
for(var i in proyectil){
var disparo = proyectil[i];
ctx.rotate(20 * Math.PI / 100);
ctx.drawImage(imgProyectilDos, disparo.x, disparo.y, disparo.width, disparo.height);
//ctx.translate(disparo.x+10,disparo.y+10);
//ctx.drawImage(imgProyectilDos, disparo.x, disparo.y, disparo.width, disparo.height);
//ctx.fillRect(disparo.x, disparo.y, disparo.width, disparo.height);
}
ctx.restore();
}

}
function verificarPartidaGanada(){
// verificar muertas todas las particulas
if(particulasEliminadas == 5){
jugador.estado = “muerto”;
ctx.font=”35px Georgia”;
ctx.fillStyle = “#E6E6E6”;
ctx.fillText(“Game Over”,0,0)
ctx.fillText(“presiona la tecla R para empezar”, 2,2);
inicializar = true;
// comprobamos que se ha pulsado la tecla R para inicializar juego
if(inicializar && tecla[82]){
jugador.estado = “vivo”;
inicializar = false;
particula1.dibujar = true;
particula2.dibujar = true;
particula3.dibujar = true;
particula4.dibujar = true;
particula5.dibujar = true;
particulasEliminadas == 0;
jugador.x = 10;
jugador.y = 10;
window.location = “index.html”;
}
}
//verificar esta muerto del jugador
if(jugador.estado == “muerto”){
ctx.font=”35px Georgia”;
ctx.fillStyle = “#E6E6E6”;
ctx.fillText(“perdiste”,50,50);
ctx.fillText(“pulsar R para jugar”,80,80);
inicializarDos = true
// comprobamos que se ha pulsado la tecla R para inicializar juego
if(inicializarDos && tecla[82]){
jugador.estado = “vivo”;
particula1.dibujar = true;
particula2.dibujar = true;
particula3.dibujar = true;
particula4.dibujar = true;
particula5.dibujar = true;
jugador.x = 10;
jugador.y = 10;
}
}
}

})

 

 

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

w

Conectando a %s