0

Estoy tratando de crear un rompecabezas en cual se mueven las piezas de este para formar una imagen. Funcionaba bien, con la ayudad de compañeros de stackoverflow en español, pero le agregue funciones nuevas para que avise cuando se completa Añadí unos id para javascript, pero en el panel salen los números encima de la imagen, se ve que javascript funciona, moviendo los numeros

  
window.onload = alert("Hola...! disfruta de mi juego \nHaz clic en 'INICIAR', entonces debes colocar la imagen ... \nAsí que haz clic en la imagen...");

//establecemos el tiempo y los movimientos

var steps = 0;
var sec = "00";
var min = 0;
var seconds;
var minuts;
var div_sec = document.getElementById('sec');
var div_min = document.getElementById('min');
var classNames = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
function startTimer() {
seconds = setInterval(secTimer, 1000); minuts = setInterval(minTimer, 60000);
}
function secTimer() {
sec++;

if (sec < 10) {
    sec = "0" + sec;
}
else if (sec > 59) {
    sec = "0" + 0;
}
div_sec.innerHTML = sec;
}
function minTimer() {
min++;
div_min.innerHTML = min;
}

function clearTimer() {
clearInterval(seconds);
clearInterval(minuts);

}
function resetTimer() {
sec = "00";
min = 0;
div_sec.innerHTML = sec;
div_min.innerHTML = min;
}


//cambiando la imagen

var numbers = document.getElementsByClassName("box");


function change(x, left, up, right, down, left2, up2, right2, down2) {
var id = x;
if (left == true && verIfEmpty(id - 1) == true) {
    steps++;
    changeContent(id, id - 1);

}
else if (left2 == true && verIfEmpty(id - 2) == true) {
    steps++;
    changeContent(id - 1, id - 2);
    changeContent(id, id - 1);

}
else if (up == true && verIfEmpty(id - 3) == true) {
    steps++;
    changeContent(id, id - 3);

}
else if (up2 == true && verIfEmpty(id - 6) == true) {
    steps++;
    changeContent(id - 3, id - 6);
    changeContent(id, id - 3);

}
else if (right == true && verIfEmpty(id + 1) == true) {
    steps++;
    changeContent(id, id + 1);

}
else if (right2 == true && verIfEmpty(id + 2) == true) {
    steps++;
    changeContent(id + 1, id + 2);
    changeContent(id, id + 1);

}
else if (down == true && verIfEmpty(id + 3) == true) {
    steps++;
    changeContent(id, id + 3);

}
else if (down2 == true && verIfEmpty(id + 6) == true) {
    steps++;
    changeContent(id + 3, id + 6);
    changeContent(id, id + 3);

}
}

function verIfEmpty(x) {
var a = document.getElementById(x);
var c = a.innerHTML;
if (c === "") {
    y = true;
} else {
    y = false;
}
return y;
}

function changeContent(x, y) {
var m = document.getElementById(x);
var n = document.getElementById(y);
n.innerHTML = m.innerHTML;
n.className = m.className;
m.innerHTML = "";
m.className = "";
win();
showScore();
ok();
}

//este generador aleatorio que encontré en internet


function randomGenerator(low, high) {
if (arguments.length < 2) {
    high = low;
    low = 0;
}
this.low = low;
this.high = high;
this.reset();
}

randomGenerator.prototype = {
reset: function () {
    this.remaining = [];
    for (var i = this.low; i <= this.high; i++) {
        this.remaining.push(i);
    }
},
get: function () {
    if (!this.remaining.length) {
        this.reset();
    }
    var index = Math.floor(Math.random() * this.remaining.length);
    var val = this.remaining[index];
    this.remaining.splice(index, 1);
    return val;
}
}

//escribe los números al azar en el rompecabezas

function getNum() {
var randomNoRepeatNumbers = new randomGenerator(0, 8);
for (var i = 1; i <= 9; i++) {
    var newNumbers = document.getElementById(i);
    var rndNumber = randomNoRepeatNumbers.get();
    newNumbers.innerHTML = rndNumber;
    newNumbers.className = "box " + classNames[rndNumber-1];
}
for (var i in numbers) {
    if (numbers[i].innerHTML == 0) {
        numbers[i].innerHTML = "";
        numbers[i].className = "";
    }
}
steps = 0;
showScore();
verifArray();
clearTimer();
resetTimer();
startTimer();
ok();
}



function win() {

var time = min + ":" + sec;
var win = true;
for (var i in numbers) {
    if (numbers[i].innerHTML != numbers[i].id) {
        if (numbers[i].id != numbers.length) {
            win = false; break;
        }
    }
}
if (win) {
    clearTimer();
    function showAlert() {
        alert("Has ganado...!!! \nUsted hizo" + steps + "movimientos \nTu tiempo a sido " + min + " min. y " + sec + " sec.");
    }
    setTimeout(showAlert, 1000); document.getElementById('9').innerHTML = "9";
}
}

function showScore() {
document.getElementById("score").innerHTML = ("MOVES = " + steps);
}

function verifArray() {
var count = 0;
var arrayNum = [];
for (var i = 1; i <= 9; i++) {
    var w = document.getElementById(i).innerHTML;
    arrayNum[i - 1] = w;
}

for (var i = 0; i <= arrayNum.length - 1; i++) {
    for (var n = i + 1; n <= arrayNum.length ; n++) {
        if (arrayNum[i] > arrayNum[n] && arrayNum[n] != 0) {
            count++;
        }
    }
}
if (count % 2 != 0) {
    getNum();
}
}

function ok() {
for (var i = 1; i < 10; i++) {
    var x = document.getElementById(i);
    if (x.innerHTML == i) {
        x.style.color = "#74a57a";
    } else {
        x.style.color = "#ffffff";
    }
}
}
* {
  box-sizing: border-box;
}

.main {
  margin: 10px auto;
  width: 400px;
  height: 400px;
  margin-bottom: 5px;
}

body {
  background: grey;
}

h1,
p {
  font-family: open sans;
  margin: 5px auto;
  text-align: center;
  font-size: 95%;
}

.board {
  background: rgba(0, 0, 0, 0.15);
  position: relative;
  width: 90%;
  padding-bottom: 90%;
  margin: 50px auto;
  border: 1px solid black;
  z-index: 0;
  box-shadow: 0px 0px 7px black inset;
  overflow: hidden;
}

.box {
  position: absolute;
  height: 33.33%;
  width: 33.33%;
  float: left;
  transition: 0.5s;
  background-image: url("http://i64.tinypic.com/21l6gck.jpg");
  box-shadow: 0px 0px 7px black;
  background-size: 300%;
}

.border {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

div.one {
  background-position: 0% 0%;
}

div.two {
  background-position: -100% 0%;
}

div.thee {
  background-position: -100% 100%
}

div.four {
  background-position: 0% -100%
}

div.five {
  background-position: -100% -100%;
}

div.six {
  background-position: -200% -100%;
}

div.seven {
  background-position: 0% -200%;
}

div.eight {
  background-position: -100% -200%;
}

div.nine {
  background-position: -200% -200%;
}
<!DOCTYPE html>

<html>

<head>

  <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">-->
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>Hello World</title>
</head>

<body>
  <div id="container">
    <nav>
      <div id="score">Movimientos = 0</div>
      <div class="time" id="sec">00</div>
      <div class="time">:</div>
      <div class="time" id="min">0</div>
      <div class="time">TIEMPO = &nbsp; </div>
      <div id="start">
        <span onclick="getNum()">INICIAR </span>
      </div>

    </nav>

    <div class="main">
      <div class="board" id="board">
        <div class="box one" id="1" onclick="change(1,0,0,1,1,0,0,1,1)" style="top:0%;left:0%;">
          <div class="border"> </div>
        </div>
        <div class="box two" id="2" onclick="change(2,1,0,1,1,0,0,0,1)" style="top:0%;left:33.33%;">
          <div class="border"> </div>
        </div>
        <div class="box three" id="3" onclick="change(3,1,0,0,1,1,0,0,1)" style="top:0%;left:66.66%;">
          <div class="border"> </div>
        </div>
        <div class="box four" id="4" onclick="change(4,0,1,1,1,0,0,1,0)" style="top:33.33%;left:0%;">
          <div class="border"> </div>
        </div>
        <div class="box five" id="5" onclick="change(5,1,1,1,1,0,0,0,0)" style="top:33.33%;left:33.33%;">
          <div class="border"> </div>
        </div>
        <div class="box six" id="6" onclick="change(6,1,1,0,1,1,0,0,0)" style="top:33.33%;left:66.66%;">
          <div class="border"> </div>
        </div>
        <div class="box seven" id="7" onclick="change(7,0,1,1,0,0,1,1,0)" style="top:66.66%;left:0%;">
          <div class="border"> </div>
        </div>
        <div class="box eight" id="8" onclick="change(8,1,1,1,0,0,1,0,0)" style="top:66.66%;left:33.33%;">
          <div class="border"> </div>
        </div>
        <div class="box nine" id="9" onclick="change(9,1,1,0,0,1,1,0,0)" style="top:66.66%;left:66.66%;">
          <div class="border"> </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

y completando el panel. Pero la imagen no cambia, y es de lo que se trata. He probado con los id varias opciones, pero no doy con la solución. Dejo el código para que ustedes me digan donde esta el error. Gracias

0

1 respuesta 1

1

El principal problema es que la imagen la estableces mediante css, es decir, a través del atributo class.

Cuando cambias el contenido de cada celda cambias el valor de la propiedad innerHTML, esto incluye el código HTML dentro del div (en tu caso el número) pero no los atributos de éste (como el class que es el que establece la imagen a mostrar).

Además de cambiar la propiedad innerHTML deberías cambiar la propiedad className que es la que almacena el valor del atributo class:

window.onload = alert("Hola...! disfruta de mi juego \nHaz clic en 'INICIAR', entonces debes colocar la imagen ... \nAsí que haz clic en la imagen...");

//establecemos el tiempo y los movimientos

var steps = 0;
var sec = "00";
var min = 0;
var seconds;
var minuts;
var div_sec = document.getElementById('sec');
var div_min = document.getElementById('min');
var classNames = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
function startTimer() {
    seconds = setInterval(secTimer, 1000); minuts = setInterval(minTimer, 60000);
}
function secTimer() {
    sec++;

    if (sec < 10) {
        sec = "0" + sec;
    }
    else if (sec > 59) {
        sec = "0" + 0;
    }
    div_sec.innerHTML = sec;
}
function minTimer() {
    min++;
    div_min.innerHTML = min;
}

function clearTimer() {
    clearInterval(seconds);
    clearInterval(minuts);

}
function resetTimer() {
    sec = "00";
    min = 0;
    div_sec.innerHTML = sec;
    div_min.innerHTML = min;
}


//cambiando la imagen

var numbers = document.getElementsByClassName("box");


function change(x, left, up, right, down, left2, up2, right2, down2) {
    var id = x;
    if (left == true && verIfEmpty(id - 1) == true) {
        steps++;
        changeContent(id, id - 1);

    }
    else if (left2 == true && verIfEmpty(id - 2) == true) {
        steps++;
        changeContent(id - 1, id - 2);
        changeContent(id, id - 1);

    }
    else if (up == true && verIfEmpty(id - 3) == true) {
        steps++;
        changeContent(id, id - 3);

    }
    else if (up2 == true && verIfEmpty(id - 6) == true) {
        steps++;
        changeContent(id - 3, id - 6);
        changeContent(id, id - 3);

    }
    else if (right == true && verIfEmpty(id + 1) == true) {
        steps++;
        changeContent(id, id + 1);

    }
    else if (right2 == true && verIfEmpty(id + 2) == true) {
        steps++;
        changeContent(id + 1, id + 2);
        changeContent(id, id + 1);

    }
    else if (down == true && verIfEmpty(id + 3) == true) {
        steps++;
        changeContent(id, id + 3);

    }
    else if (down2 == true && verIfEmpty(id + 6) == true) {
        steps++;
        changeContent(id + 3, id + 6);
        changeContent(id, id + 3);

    }
}

function verIfEmpty(x) {
    var a = document.getElementById(x);
    var c = a.innerHTML;
    if (c === "") {
        y = true;
    } else {
        y = false;
    }
    return y;
}

function changeContent(x, y) {
    var m = document.getElementById(x);
    var n = document.getElementById(y);
    n.innerHTML = m.innerHTML;
    n.className = m.className;
    m.innerHTML = "";
    m.className = "";
    win();
    showScore();
    ok();
}

//este generador aleatorio que encontré en internet


function randomGenerator(low, high) {
    if (arguments.length < 2) {
        high = low;
        low = 0;
    }
    this.low = low;
    this.high = high;
    this.reset();
}

randomGenerator.prototype = {
    reset: function () {
        this.remaining = [];
        for (var i = this.low; i <= this.high; i++) {
            this.remaining.push(i);
        }
    },
    get: function () {
        if (!this.remaining.length) {
            this.reset();
        }
        var index = Math.floor(Math.random() * this.remaining.length);
        var val = this.remaining[index];
        this.remaining.splice(index, 1);
        return val;
    }
}

//escribe los números al azar en el rompecabezas

function getNum() {
    var randomNoRepeatNumbers = new randomGenerator(0, 8);
    for (var i = 1; i <= 9; i++) {
        var newNumbers = document.getElementById(i);
        var rndNumber = randomNoRepeatNumbers.get();
        newNumbers.innerHTML = rndNumber;
        newNumbers.className = "box " + classNames[rndNumber-1];
    }
    for (var i in numbers) {
        if (numbers[i].innerHTML == 0) {
            numbers[i].innerHTML = "";
            numbers[i].className = "";
        }
    }
    steps = 0;
    showScore();
    verifArray();
    clearTimer();
    resetTimer();
    startTimer();
    ok();
}



function win() {

    var time = min + ":" + sec;
    var win = true;
    for (var i in numbers) {
        if (numbers[i].innerHTML != numbers[i].id) {
            if (numbers[i].id != numbers.length) {
                win = false; break;
            }
        }
    }
    if (win) {
        clearTimer();
        function showAlert() {
            alert("Has ganado...!!! \nUsted hizo" + steps + "movimientos \nTu tiempo a sido " + min + " min. y " + sec + " sec.");
        }
        setTimeout(showAlert, 1000); document.getElementById('9').innerHTML = "9";
    }
}

function showScore() {
    document.getElementById("score").innerHTML = ("MOVES = " + steps);
}

function verifArray() {
    var count = 0;
    var arrayNum = [];
    for (var i = 1; i <= 9; i++) {
        var w = document.getElementById(i).innerHTML;
        arrayNum[i - 1] = w;
    }

    for (var i = 0; i <= arrayNum.length - 1; i++) {
        for (var n = i + 1; n <= arrayNum.length - 1; n++) {
            if (arrayNum[i] > arrayNum[n] && arrayNum[n] != 0) {
                count++;
            }
        }
    }
    if (count % 2 != 0) {
        getNum();
    }
}

function ok() {
    for (var i = 1; i < 10; i++) {
        var x = document.getElementById(i);
        if (x.innerHTML == i) {
            x.style.color = "#74a57a";
        } else {
            x.style.color = "#ffffff";
        }
    }
}
* {
  box-sizing: border-box;
}

.main {
  margin: 10px auto;
  width: 400px;
  height: 400px;
  margin-bottom: 5px;
}

body {
  background: grey;
}

h1,
p {
  font-family: open sans;
  margin: 5px auto;
  text-align: center;
  font-size: 95%;
}

.board {
  background: rgba(0, 0, 0, 0.15);
  position: relative;
  width: 90%;
  padding-bottom: 90%;
  margin: 50px auto;
  border: 1px solid black;
  z-index: 0;
  box-shadow: 0px 0px 7px black inset;
  overflow: hidden;
}

.box {
  position: absolute;
  height: 33.33%;
  width: 33.33%;
  float: left;
  transition: 0.5s;
  background-image: url("http://i64.tinypic.com/21l6gck.jpg");
  box-shadow: 0px 0px 7px black;
  background-size: 300%;
}

.border {
  width: 100%;
  height: 100%;
  border: 1px solid black;
}

div.one {
  background-position: 0% 0%;
}

div.two {
  background-position: -100% 0%;
}

div.three {
  background-position: -200% 0%
}

div.four {
  background-position: 0% -100%
}

div.five {
  background-position: -100% -100%;
}

div.six {
  background-position: -200% -100%;
}

div.seven {
  background-position: 0% -200%;
}

div.eight {
  background-position: -100% -200%;
}

div.nine {
  background-position: -200% -200%;
}
<!DOCTYPE html>

<html>

<head>

  <!--<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
        <meta name="format-detection" content="telephone=no">
        <meta name="msapplication-tap-highlight" content="no">-->
  <meta charset="UTF-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <title>Hello World</title>
</head>

<body>
  <div id="container">
    <nav>
      <div id="score">Movimientos = 0</div>
      <div class="time" id="sec">00</div>
      <div class="time">:</div>
      <div class="time" id="min">0</div>
      <div class="time">TIEMPO = &nbsp; </div>
      <div id="start">
        <span onclick="getNum()">INICIAR </span>
      </div>

    </nav>

    <div class="main">
      <div class="board" id="board">
        <div class="box one" id="1" onclick="change(1,0,0,1,1,0,0,1,1)" style="top:0%;left:0%;">
          <div class="border"> </div>
        </div>
        <div class="box two" id="2" onclick="change(2,1,0,1,1,0,0,0,1)" style="top:0%;left:33.33%;">
          <div class="border"> </div>
        </div>
        <div class="box three" id="3" onclick="change(3,1,0,0,1,1,0,0,1)" style="top:0%;left:66.66%;">
          <div class="border"> </div>
        </div>
        <div class="box four" id="4" onclick="change(4,0,1,1,1,0,0,1,0)" style="top:33.33%;left:0%;">
          <div class="border"> </div>
        </div>
        <div class="box five" id="5" onclick="change(5,1,1,1,1,0,0,0,0)" style="top:33.33%;left:33.33%;">
          <div class="border"> </div>
        </div>
        <div class="box six" id="6" onclick="change(6,1,1,0,1,1,0,0,0)" style="top:33.33%;left:66.66%;">
          <div class="border"> </div>
        </div>
        <div class="box seven" id="7" onclick="change(7,0,1,1,0,0,1,1,0)" style="top:66.66%;left:0%;">
          <div class="border"> </div>
        </div>
        <div class="box eight" id="8" onclick="change(8,1,1,1,0,0,1,0,0)" style="top:66.66%;left:33.33%;">
          <div class="border"> </div>
        </div>
        <div class="box nine" id="9" onclick="change(9,1,1,0,0,1,1,0,0)" style="top:66.66%;left:66.66%;">
          <div class="border"> </div>
        </div>
      </div>
    </div>
  </div>
  <script type="text/javascript" src="cordova.js"></script>
  <script type="text/javascript" src="js/index.js"></script>
</body>

</html>

4
  • Muchas gracias @AsierVillanueva. Entonces he de modificar las llamadas al DOM en javascript o modofico el html, porque lo he cambiado varias veces y no se como proceder. Gracias, un saludo Commented el 25 oct. 2017 a las 15:41
  • 1
    Como te he puesto en el ejemplo: al cambiar el contenido de una celda deberías modificar también el valor de la propiedad className para que muestra la imagen adecuada. Commented el 25 oct. 2017 a las 15:47
  • Muchas gracias me lo voy a estudiar Commented el 25 oct. 2017 a las 15:50
  • Has sido de gran ayuda. Intentare quitar los numeros umeros de la imagen, pero no funciona, al completarle no se muestra la imagen completamente, queda el hueco de mover.Intentare solucionar imagino que sera desde javascript. Gracias por la ayuda Commented el 25 oct. 2017 a las 17:34

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.