The problem is in the function win when you set the contents of the ninth cell. You set the literal "9" to the property innerHTML but you don't assign the kind of styles to show the right image.Take a look at this code: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 = </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></code></pre></div></div></p>