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. el 26 oct. 2017 a las 9:46

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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