Menu
Hiya i am tryin to build a 4×4 sliding puzzle the problem is i dont know how to code the part of javascript where it checks to see if the move is valid. I want it so that only a tile adjacent to a free tile can be moved into the free tile space. I know one way of doing it but it involes 48 IF statements lol surely there must be a better way. Any ideas??
[code=php]<script type="text/javascript">
/* GAME SETUP SCRIPT */
var pics = new Array
pics[0] = "1.jpg"
pics[1] = "2.jpg"
pics[2] = "3.jpg"
pics[3] = "4.jpg"
pics[4] = "5.jpg"
pics[5] = "6.jpg"
pics[6] = "7.jpg"
pics[7] = "8.jpg"
pics[8] = "9.jpg"
pics[9] = "10.jpg"
pics[10] = "11.jpg"
pics[11] = "12.jpg"
pics[12] = "13.jpg"
pics[13] = "14.jpg"
pics[14] = "15.jpg"
pics[15] = "blank.jpg" // source of blank image
/* GENERATE IMAGE BOARD */
for(var i=0;i<pics.length;i++) {
document.write('<img name="pic'+ (i - -1) +'" id="pic'+ (i - -1) +'" src="blank.jpg" height="50" width="50" onclick="moveImg('+ i +')">')
if((i - -1) % 4 == 0) {
document.write("<BR>")
}
}
document.write('<BR><BR><span id="moves">Moves: 0</span>')
var newPic = ""
var tempPics = new Array
var numMoves = 0
for(var i=0;i<pics.length;i++) {
newPic = pics[Math.floor(Math.random()*pics.length)]
tempPics[i] = newPic
for(var j=0;j<tempPics.length - 1;j++) {
if(newPic == tempPics[j]) {
newPic = pics[Math.floor(Math.random()*pics.length)]
tempPics[i] = newPic
j = -1
}
}
document.getElementById('pic'+ (i- -1)).src = newPic
}
/* IMAGE MOVEMENT */
function moveImg(image) {
var ok = new Array
ok[0] = "1,4"
ok[1] = "0,5,2"
ok[2] = "1,6,3"
ok[3] = "2,7"
ok[4] = "0,8,5"
ok[5] = "4,1,9,6"
ok[6] = "5,7,2,10"
ok[7] = "3,11,6"
ok[8] = "4,12,9"
ok[9] = "8,10,13,5"
ok[10] = "9,11,14,6"
ok[11] = "10,7,15"
ok[12] = "8,13"
ok[13] = "12,14,9"
ok[14] = "13,15,10"
ok[15] = "14,11"
for(var i=0;i<ok.length;i++) {
ok[i] = ok[i].split(',')
}
var theSrc = ""
var toMove = -1
if(window.event.ctrlKey) {
toMove = parseInt(prompt('With what space do you want to switch? (1-16)','') - 1)
ok[image][toMove] = toMove
}
else {
for(var i=0;i<ok[image].length;i++) {
toMove = -1
theSrc = document.getElementById('pic'+ (ok[image][i] - -1)).src
theSrc = theSrc.substr(theSrc.length - 6,theSrc.length)
if(theSrc == pics[15].substr(pics[15].length - 6,pics[15].length)) {
toMove = i
break;
}
}
}
if(toMove >= 0) {
var backUp = document.getElementById('pic'+ (ok[image][toMove] - -1)).src
document.getElementById('pic'+ (ok[image][toMove] - -1)).src = document.getElementById('pic'+ (image - -1)).src
document.getElementById('pic'+ (image - -1)).src = backUp
numMoves += 1
moves.innerHTML = "Moves: "+ numMoves
}
var conDit = ""
var ok = "1"
for(var i=0;i<pics.length;i++) {
temp = document.getElementById('pic'+ (i - -1)).src
temp = temp.substr(temp.length - 6,temp.length)
equ = i - -1
if(equ < 10) {
equ = "/"+ (i - -1)
}
conDit = "temp == equ + pics[i].substr(pics[i].length - 4,pics[i].length)"
if(!(eval(conDit)) && temp == pics[i].substr(pics[i].length - 6,pics[i].length)) {
conDit = "temp == pics[i].substr(pics[i].length - 6,pics[i].length)"
}
if(!eval(conDit)) {
ok = "0"
break;
}
}
if(ok == 1) {
youWin()
}
}
/* YOU WON! */
function youWin() {
alert("You win!")
}
</script>[/code]Note, if you hold the control key when playing, it will allow you to choose the space to switch it with (just to make sure one can win the game). You can change the line to if(1 == 2) as opposed to the current line to completely ignore it![i]Originally posted by baz7621[/i]No-one wants that.
[B]well i dont want any fighting now[/B][/QUOTE]
[i]Originally posted by baz7621[/i]I expected that you would but it's always nice to have options open.
[B]i have used the first solution [/B][/QUOTE]
[i]Originally posted by steelersfan88[/i]Can't argue with you there, but I try not to step on anyones toes (like I think I've done here :eek: ). ?
[B]...and while competitive...[/b][/quote]
[code=php]function sortfunction(a, b){
return (a - b)
}[/code]0.1.9 — BETA 5.28