1

He creado un rompecabezas con la ayuda de los compañeros de es.stackoverflow. como @Asier Villanueva.Su función es mover las piezas para conseguir una imagen final. Funciona perfectamente, pero cuando terminamos la imagen, se muestra con una pieza menos en la esquina inferior derecha, y en la parte de abajo se ve parte de arriba de la imagen. Muestro la imagen del resultado final y el código por si alguno de ustedes quiere jugar y probar el rompecabezas, es fácil de hacer, y quizá encuentren el fallo que yo no veo. Muchas gracias y un saludo.

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;
}

 //Esta parte funciona gracias a Asier Villanueva
 
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
//Esta parte funciona gracias a Asier Villanueva

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] = 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 lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="css/index.css">
  <link rel="stylesheet" type="text/javascript" href="js/index.css">
  <title>Document</title>
</head>

<body>

  <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>
    <!--<img src="img\bob feliz.png">
        <iframe src="audio\BobEsponjaRemix.mp3" id="music"></iframe>
        <script type="text/javascript" src="cordova.js"></script>-->
    <script type="text/javascript" src="js/index.js"></script>
  </body>

</html>

introducir la descripción de la imagen aquí

1 respuesta 1

2

El problema está en la función win cuando estableces el contenido de la novena celda. Le estableces el literal "9" a la propiedad innerHTML pero no le asignas la clase de estilos para que muestre la imagen correcta.

Échale un vistazo a este código:

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;
}

 //Esta parte funciona gracias a Asier Villanueva
 
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
//Esta parte funciona gracias a Asier Villanueva

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); 
        
        var celda9 = document.getElementById('9');
        celda9.innerHTML = "9";
        celda9.className = "box nine";
        
    }
}

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] = 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%;
}
    <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>

1
  • Muchas gracias, las vueltas que le di desde que me le arreglaste. Le tendre que poner tu nombre al juego. Gracias de nuevo. Commented el 26 oct. 2017 a las 9:46

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.