Resulta que estoy iniciandome en el mundo de js y canvas ya que quiero desarrollar un juego de mesa algo sencillo. pero me trabe en lo siguiente:
- tengo dibujado un botón y quiero que cuando se le de un clic llame a una función para lanzar una serie de imagenes aleatorias (unos dados), para luego capturar el valor que retorne.
Código:
aquí esta lo que llevo hasta ahora. Espero me puedan ayudar //Objetos Importantes del Canvas.
var canvas,contexto;
//Crear Objetos para el Juego.
var jugadores = [];
var pasillos = {
x1: 140, y1: 230, width1: 37, height1: 42,
x2: 161, y2: 252, width2: 53, height2: 26,
x3: 216, y3: 252, width3: 36, height3: 26,
x4: 254, y4: 252, width4: 36, height4: 26,
x5: 292, y5: 252, width5: 36, height5: 26
// son 52 pasillos (esto xq no vi otra manera de dibujarlos ya que cada una tiene valores diferentes)
};
var juego = {
estado: 'iniciando',
cantidad: 2
};
var teclado = {};
//Definir variables para las imagenes.
var fondo, imgExclamacion, imgInterrogacion, imgBoton;
var imgPasillo = [];
var imgFichas = [];
var imagenes = ['Imagenes/boton.png','Imagenes/1.png','Imagenes/2.png','Imagenes/3.png','Imagenes/4.png','Imagenes/5.png','Imagenes/6.png','Imagenes/7.png',
'Imagenes/8.png','Imagenes/9.png','Imagenes/10.png','Imagenes/11.png','Imagenes/12.png','Imagenes/13.png','Imagenes/14.png','Imagenes/15.png',
'Imagenes/16.png','Imagenes/17.png','Imagenes/18.png','Imagenes/19.png','Imagenes/20.png','Imagenes/21.png','Imagenes/22.png','Imagenes/23.png',
'Imagenes/24.png','Imagenes/25.png','Imagenes/26.png','Imagenes/27.png','Imagenes/28.png','Imagenes/29.png','Imagenes/30.png','Imagenes/31.png',
'Imagenes/32.png','Imagenes/33.png','Imagenes/34.png','Imagenes/35.png','Imagenes/36.png','Imagenes/37.png','Imagenes/38.png','Imagenes/39.png',
'Imagenes/40.png','Imagenes/41.png','Imagenes/42.png','Imagenes/43.png','Imagenes/44.png','Imagenes/45.png','Imagenes/46.png','Imagenes/47.png',
'Imagenes/48.png','Imagenes/49.png','Imagenes/50.png','Imagenes/51.png','Imagenes/52.png','Imagenes/53.png','Imagenes/54.png','Imagenes/55.png',
'Imagenes/exclamacion.png','Imagenes/interrogacion.png','Imagenes/ficha1.png','Imagenes/ficha2.png','Imagenes/ficha3.png',
'Imagenes/ficha4.png','Imagenes/ficha5.png','Imagenes/ficha6.png','Imagenes/Fondo.png'];
var preloader;
//Definición de funciones
function loadMedia(){
canvas = document.getElementById('game');
$('#game').css({
'top':($('html').height()-canvas.height)+'px',
'left':($('html').width()-canvas.width)+'px'
});
$('#porcentaje').css({
'top':($('html').height()-$('#porcentaje').height())+'px',
'left':($('html').width()-$('#porcentaje').width())+'px'
});
preloader = new PreloadJS();
preloader.onProgress = progresoCarga;
prepararCanvas();
}
function prepararCanvas(){
contexto = canvas.getContext('2d');
var radio = 98;
var posX = radio + 2;
var posY = radio + 2;
contexto.arc(posX,posY,radio,0,2*Math.PI,false);
contexto.strokeStyle = 'gray';
contexto.lineWidth = 4;
contexto.stroke();
cargar();
}
function cargar(){
while(imagenes.length > 0){
var imagen = imagenes.shift();
preloader.loadFile(imagen);
}
}
function progresoCarga(){
contexto = canvas.getContext('2d');
contexto.beginPath();
var radio = 98;
var posX = radio + 2;
var posY = radio + 2;
var endAngle = (preloader.progress*(2*Math.PI));
contexto.arc(posX,posY,radio,0,endAngle,false);
contexto.strokeStyle = 'black';
contexto.lineWidth = 4;
contexto.stroke();
var progresoEntero = parseInt(preloader.progress*100);
$('#porcentaje').text(progresoEntero+'%');
if(preloader.progress == 1){
$('#preloader').remove();
var intervalo = window.setInterval(frameLoop,1000/40);
fondo = new Image();
fondo.src = 'Imagenes/Fondo.png';
imgExclamacion = new Image();
imgExclamacion.src = 'Imagenes/exclamacion.png';
imgInterrogacion = new Image();
imgInterrogacion.src = 'Imagenes/interrogacion.png';
imgBoton = new Image();
imgBoton.src = 'Imagenes/boton.png';
for(var i = 1; i <= 55; i++){
imgPasillo[i] = new Image();
imgPasillo[i].src = 'Imagenes/'+i+'.png';
}
for(var i = 1; i <= 6; i++){
imgFichas[i] = new Image();
imgFichas[i].src = 'Imagenes/ficha'+i+'.png';
}
/*Sonido = document.createElement('audio'); asi se definen los sonidos
document.body.appendChild(Sonido);
Sonido.setAtribute('src','rutasonido');*/
}
}
function agregarEventosTeclado(){
//Ponemos en true la tecla presionada
agregarEvento(document,"keydown",function(e){
teclado[e.keyCode] = true;
console.log(e.keyCode);
});
//Ponemos en false la tecla que dejó de ser presionada
agregarEvento(document,"keyup",function(e){
teclado[e.keyCode] = false;
});
function agregarEvento(elemento,evento,funcion){
if(elemento.addEventListener){
//Navegadores que soportan funcion addEventListener
elemento.addEventListener(evento,funcion,false);
}
else if(elemento.attachEvent){
//Internet Explorer
elemento.attachEvent(evento,funcion);
}
}
}
function dibujarFondo(){
contexto = canvas.getContext('2d');
contexto.drawImage(fondo,0,0,944,651);
}
function dibujarExclamacion(){
contexto = canvas.getContext('2d');
contexto.drawImage(imgExclamacion,786,349,144,94);
}
function dibujarInterrogacion(){
contexto = canvas.getContext('2d');
contexto.drawImage(imgInterrogacion,212,359,144,94);
}
function dibujarPasillos(){
contexto = canvas.getContext('2d');
contexto.save();
for(var i=1;i<=55;i++){
contexto.drawImage(imgPasillo[i],pasillos['x'+i],pasillos['y'+i],pasillos['width'+i],pasillos['height'+i]);
}
contexto.restore();
}
function dibujarJugadores(){
contexto = canvas.getContext('2d');
for(var i in jugadores){
var jugador = jugadores[i];
contexto.save();
contexto.drawImage(imgFichas[1],jugador.x+139,jugador.y+426,jugador.width,jugador.height); //ficha amarilla
contexto.drawImage(imgFichas[2],jugador.x+139,jugador.y+377,jugador.width,jugador.height); //ficha azul
contexto.drawImage(imgFichas[3],jugador.x+54,jugador.y+328,jugador.width,jugador.height); //ficha blanca
contexto.drawImage(imgFichas[4],jugador.x+139,jugador.y+328,jugador.width,jugador.height); //ficha negra
contexto.drawImage(imgFichas[5],jugador.x+54,jugador.y+426,jugador.width,jugador.height); //ficha roja
contexto.drawImage(imgFichas[6],jugador.x+54,jugador.y+377,jugador.width,jugador.height); //ficha verde
contexto.restore();
}
}
function actualizarJugadores(){
if(juego.estado == 'iniciando'){
for(var i = 1;i<=6;i++){
jugadores.push({
contador: 0,
estado: 'inactivo',
turno: 0,
x: 0,
y: 0,
width: 30,
height: 30
})
}
juego.estado = 'jugando';
}
}
function actualizarEstadoJuego(){
contexto = canvas.getContext('2d');
if(juego.estado == 'jugando' && juego.cantidad>=2){
for(var i=1;i<=juego.cantidad;i++){
contexto.save();
contexto.drawImage(imgFichas[i],jugadores[i].x+pasillos.x1,jugadores[i].y+pasillos.y1,jugadores[i].width,jugadores[i].height);
contexto.restore();
}
}
}
function dibujarBoton(){
contexto = canvas.getContext('2d');
contexto.save();
contexto.shadowOffsetX = 5;
contexto.shadowOffsetY = 5;
contexto.shadowBlur = 5;
contexto.shadowColor = "black";
contexto.drawImage(imgBoton,810,500,100,100);
contexto.restore();
}
function frameLoop(){
dibujarFondo();
dibujarInterrogacion();
dibujarExclamacion();
dibujarPasillos();
dibujarJugadores();
dibujarBoton();
actualizarJugadores();
actualizarEstadoJuego();
}
//Ejecución de funciones
$(document).on("ready",init);
function init(){
loadMedia();
}
