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 = </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