Ropmecabezas numérico
JavaScript
6.104 visualizaciones desde el 6 de Marzo del 2017

El clásico rompecabezas numérico. ¿Quien no lo conoce?
<head>
<script>
/* VARIABLES DEL JUEGO */
var canvas, ctx, imagen;
var numEnable = true;
var inicioX = 40;
var inicioY = 40;
var renglones = 4;
var columnas = 4;
var numFichas = renglones * columnas;
var ancho = 100;
var fichas_array = new Array();
var colorFichaB = "#3A000D";
var colorText = colorFichaB;
var colorMarco = "black";
window.onload = iniciar;
/* INICIAR JUEGO */
function iniciar(){
imagen = new Image();
imagen.src = "imagen.jpg";
imagen.onload = function(){
canvas=document.getElementById("miCanvas");
canvas.width = 480;
canvas.height = 480;
if(canvas && canvas.getContext){
ctx=canvas.getContext("2d");
if(ctx){
tablero();
barajea();
canvas.addEventListener("click",selecciona,false);
}else{
document.write("Tu navegador no soporta canvas");
}
}
}
imagen.onerror = function(){alert('No se pudo cargar la imagen\r\n'+imagen.src);};
}
/* INFORMACION DE LA FICHA */
function ficha(x,y, w, ren, col, i){
this.x = x;
this.y = y;
this.w = w;
this.ren = ren;
this.col = col;
this.i = i;
this.dibuja = dibujaFicha;
}
/* CREACION DEL TABLERO */
function tablero(){
var i, j;
for(i=0; i<renglones; i++){
for(j=0; j<columnas; j++){
x = inicioX+ancho*j;
y = inicioY+ancho*i;
ii= j+i*renglones;
fichas_array.push(new ficha(x,y, ancho, i,j, ii+1));
fichas_array[ii].dibuja();
}
}
}
/* DIBUJAR LA FICHA */
function dibujaFicha(){
ctx.save();
// Seleccion del color de la ficha
if(this.i==16){
ctx.fillStyle=colorFichaB;
ctx.fillRect(this.x, this.y, this.w, this.w);
}else{
ctx.drawImage(imagen,(this.i-1)%4*100,Math.floor((this.i-1)/4)*ancho,ancho,ancho,this.x,this.y,ancho,ancho);
}
// Se dibuja la ficha
ctx.strokeStyle=colorMarco;
ctx.strokeRect(this.x, this.y, this.w, this.w);
if(numEnable){
// Se dibuja el numero
ctx.font="bold 20px Comic";
ctx.fillStyle=colorText;
if(this.i==numFichas){
ctx.fillText("", this.x+this.w/2-10, this.y+this.w/20+10);
}else{
ctx.fillText(this.i, this.x+2, this.y+this.w-4);
}
}
}
/* REVOLVER LAS FICHAS */
function barajea(){
for(i=0; i<1000; i++){
r=Math.floor(Math.random()*numFichas);
buscar(r);
}
}
/* BUSCA PARA DONDE MOVER LA FICHA */
function buscar(ficha){
var ren2,col2;
var ren=fichas_array[ficha].ren;
var col=fichas_array[ficha].col;
// Arriba
ren2=ren-1
if(ren2>-1) intercambia(ren,col, ren2,col);
// Abajo
ren2= ren+1;
if(ren2<renglones) intercambia(ren,col, ren2,col);
// Derecha
col2=col+1;
if(col2<columnas) intercambia(ren,col, ren,col2);
// Izquierda
col2 =col-1;
if(col2>-1)intercambia(ren,col, ren,col2);
}
/* MUEVE LAS FICHAS */
function intercambia(ren,col, ren2,col2){
var i=col +ren *renglones;
var j=col2+ren2*renglones;
var cambio=false;
if(fichas_array[j].i == numFichas){
fichas_array[j].i=fichas_array[i].i;
fichas_array[i].i=numFichas;
cambio=true;
tablero();
}
return cambio;
}
/* SELECCIONAR UNA CASILLA */
function selecciona(e){
var pos = ajusta(e.clientX, e.clientY);
var x = pos.x;
var y = pos.y;
var ficha;
for(var i=0; i<fichas_array.length; i++){
ficha=fichas_array[i];
if( (x>ficha.x) && (x<ficha.x+ficha.w) && (y>ficha.y) && (y<ficha.y+ficha.w) ){
break;
}
}
if(i<fichas_array.length){
if(fichas_array[i].i!=16){
buscar(i);
}
}
}
/* CONVERTIR LAS CORDENADAS DE LA VENTANA A CORDENADAS DENTRO DEL CANVAS */
function ajusta(xx,yy){
var posCanvas = canvas.getBoundingClientRect();
var x = xx-posCanvas.left;
var y = yy-posCanvas.top;
return {x:x,y:y}
}
</script>
<style>
div{
width:480px;
margin:auto;
}
h1{
text-align:center
}
#miCanvas{
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border:solid 1px;
background-color:#5E000E;
}
</style>
</head>
<body>
<h1>Rompecabezas</h1>
<div>
<canvas id="miCanvas"></canvas>
</div>
</body>
No hay comentarios
Esta version es con una imagen
La imagen es "imagen.jpg" (a menos que cambien el src)
El tamaño tiene que ser de 400x400
La variable numEnable habilita o deshabilita la visibilidad de los pequeños numeros.
En este ejemplo su codigo era poco mas complejo y en lo personal inecesario pues con pocas modificaciones al anterior obtuve mejores resultados.
Imagen que utilice: