generic homework help...

Sorry about the useless title guys, couldn't figure out what to call this.

I am to (last assignment, Yay!) create one of those sliding tile games. The actual instructions from the course are not quite enough to get my head working in the right direction. I've gone looking for examples on the net, but they all seem to be more code than I can wrap my head around today.

Can someone point me in the direction of a simple (say 3x3) version with some reasonably well commented code or even an "in english" explanation of the processes and functions involved so that I can figure out how to do this?

Thanks so much...

Heh. Somehow I thought that was asking a bit much.

Someone pointed me to this script on the WebDevelopers forum, and it is short enough that I should be able to figure out what is going on. But there are still a number of questions I have:


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


first, what does this notation mean:

ok[image][toMove] =

second, can anyone see where he came up with the numbers in the ok[i] array?

Third, why does he use
(i - -1)?
is that an autodecrememtnt of i by one or... the same as i+1? or something else?

I understand how it generates the game board, how it randomizes the tiles, and checks to make sure it does not repeat any of the tiles... but the movIng function is a bit over my head...

the ok array is dimensioned by using the split method so
ok[image][toMove] = toMove is choiseing a field from that array


in some onstances the 1 - - 1 could be +1
but in others it is adding a sting number with 1
and the - auto 'types' the string number to be a digit number.

could have used '42'*1+1;

or other methods

if it had used a true dimensioned array using digits for array ok there woulld be no need to auto type

Hi there nathan_lamothe,
Can someone point me in the direction of a simple (say 3x3) version
Well, this is pretty basic...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple 3X3 sliding tile game</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
table {
border:3px double #000;
background-color:#999;
color:#000;
margin:30px auto;
}
td {
width:40px;
height:40px;
border:1px solid #530;
background-color:#ffe;
font-family:arial,sans-serif;
font-size:18px;
color:#530;
text-weight:bold;
text-align:center;
}
.blank {
border:0 solid #000;
background-color:#999;
color:#000;
}
.notBlank{
border:1px solid #530;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[


onload=function() {
cell=document.getElementsByTagName('td');
for(i=0;i<cell.length;i++) {
cell[i].onclick=function() {
moveCell(this);
}
}
}

function moveCell(el) {

num=new Array();
num[0]=parseFloat(el.id.split('-')[1])-1;
num[1]=parseFloat(el.id.split('-')[1])+1;
num[2]=parseFloat(el.id.split('-')[1])-3;
num[3]=parseFloat(el.id.split('-')[1])+3;

if(num[0]<0) {
num[0]=0;
}
if(num[1]>8) {
num[1]=8;
}
if(num[2]<0) {
num[2]=num[2]+3;
}
if(num[3]>8) {
num[3]=num[3]-3;
}
for(i=0;i<num.length;i++) {
obj=document.getElementById(el.id.split('-')[0]+'-'+num[i]);
if(obj.className=='blank') {
obj.innerHTML=el.innerHTML;
obj.className='notBlank';
el.innerHTML=''
el.className='blank';
}
}
}
//]]>
</script>

</head>
<body>

<table><tr>
<td id="c-0">3</td>
<td id="c-1">1</td>
<td id="c-2">5</td>
</tr><tr>
<td id="c-3">7</td>
<td id="c-4">2</td>
<td id="c-5">8</td>
</tr><tr>
<td id="c-6">4</td>
<td id="c-7">6</td>
<td id="c-8" class="blank"></td>
</tr></table>

</body>
</html>


coothead

Thank you guys. This is awesome.

coothead, I went through your script three times before I truly understood it...but that is exactly what I needed.

just to make sure, i've never used .innerHTML ... that refers to the number in the cell right?

and once I figured out that -1, +1, -3, +3 were the cells left, right, up, and down from the clicked cell... I was able to go back to the script I posted and figure out where the numbers in ok[] came from. (the cells l, r, up, down, from cell ok[i].

And with that and Vic's explanation of dimensioned arrays coupled with a quick google of devarticles.com, I am an awful lot closer to fully understanding the first script as well.

I am so going to get this done today.

Thank you both so much.

Hi Guys,

Slide tiles until c-2 is blank and press c-3
or vise versa, when c-3 is blank press c-2,
same with c-5 and c-6.
Not easily done in real life ;)

On a minor note, coothead, the nums
configuration in your sample is not solvable.

Owl, Mentor at WebXpertz (http://www.webxpertz.net/forums/forumdisplay.php?f=1)

Hi there Owl,

thanks for testing my code more vigorously than I. :D

Oh well, back to the drawing board. :eek:

coothead

 
 
I have found a cure for the error in the script, if somewhat inelegant. :eek:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>simple 3X3 sliding tile game</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/
table {
border:3px double #000;
background-color:#999;
color:#000;
margin:30px auto;
}
td {
width:40px;
height:40px;
border:1px solid #530;
background-color:#ffe;
font-family:arial,sans-serif;
font-size:18px;
color:#530;
text-weight:bold;
text-align:center;
}
.blank {
border:0 solid #000;
background-color:#999;
color:#000;
}
.notBlank{
border:1px solid #530;
}
/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

onload=function() {
cell=document.getElementsByTagName('td');

for(i=0;i<cell.length;i++) {
cell[i].id='c-'+i;
if(i==cell.length-1){
cell[i].className='blank';
}
cell[i].onclick=function() {
moveCell(this);
}
}
}

function moveCell(el) {

if((el.id=='c-3')&&(document.getElementById('c-2').className=='blank')||
(el.id=='c-2')&&(document.getElementById('c-3').className=='blank')||
(el.id=='c-6')&&(document.getElementById('c-5').className=='blank')||
(el.id=='c-5')&&(document.getElementById('c-6').className=='blank')) {
return;
}
num=new Array();
num[0]=parseFloat(el.id.split('-')[1])-1;
num[1]=parseFloat(el.id.split('-')[1])+1;
num[2]=parseFloat(el.id.split('-')[1])-3;
num[3]=parseFloat(el.id.split('-')[1])+3;

if(num[0]<0) {
num[0]=0;
}
if(num[1]>8) {
num[1]=8;
}
if(num[2]<0) {
num[2]=num[2]+3;
}
if(num[3]>8) {
num[3]=num[3]-3;
}
for(i=0;i<num.length;i++) {
obj=document.getElementById(el.id.split('-')[0]+'-'+num[i]);
if(obj.className=='blank') {
obj.innerHTML=el.innerHTML;
obj.className='notBlank';
el.innerHTML=''
el.className='blank';
}
}
}
//]]>
</script>

</head>
<body>

<table><tr>
<td>3</td>
<td>1</td>
<td>5</td>
</tr><tr>
<td>7</td>
<td>2</td>
<td>8</td>
</tr><tr>
<td>4</td>
<td>6</td>
<td></td>
</tr></table>

</body>
</html>


Looking on the bright side though, I have tidied up the table. :D

coothead

I also been playing

it can be completed

http://www.vicsjavascripts.org.uk/Fun/06043B.htm