move square in a route

[Mr_John]

I need to move the coloured little square trought the 4lines.now i know they move just in the first line and take a solution using parent node and cellIndex to move to alla lines.example: if u start and u trow dice adn u got 6 the corrispondig square got be in box 6.and then the same player from 6 if he trows dice again and got 4 got be in box num.10 ..thats what i mean.someone can help me??thanks a lot


var p=1;
var dice;

function lancia(){
dice = Math.ceil(Math.random()*6);
alert(dice);
setTimeout('move(p)',1000);
}

function move(j){
var player = document.getElementById("player-"+j),
from = player.parentNode,
cells = from.parentNode.cells,
to = cells[(from.cellIndex+dice)];

to.appendChild(player);
p++;if(p>4)p=1;alert("the p is "+p);
}
</script>

<style type="text/css">
table.board{
margin-top : 200px;
position : relative;
}
table.board td{
width : 64px;
height : 64px;
vertical-align : center;
background : #ddd;
}

#player-1,
#player-2,
#player-3,
#player-4{
width : 12px;
height : 12px;
border : 1px solid silver;
overflow : hidden;
}
#player-1{
background : red;
margin : 0px 20px;
}
#player-2{
background : blue;
margin : 0px 8px;
}
#player-3{
background : green;
margin : 0px 15px;
}
#player-4{
background : yellow;
margin : 0px 5px;
}
</style>

<CENTER>

<table class="board" border="0" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td>
<div id="player-1"></div>
<div id="player-2"></div>
<div id="player-3"></div>
<div id="player-4"></div>
</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr> <td>12</td>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
<td>17</td>
</tr>
<tr>
<td>18</td>
</tr>

</tbody>
</table>

<button onclick="lancia()">move player n</button>

 

[David Mark]

I don't understand the question exactly. I assume the code you posted
isn't doing what you want. What is it doing wrong?

var p=1;
var dice;

function lancia(){
dice = Math.ceil(Math.random()*6);
alert(dice);
setTimeout('move(p)',1000);
}

function move(j){
var player = document.getElementById("player-"+j),
from = player.parentNode,
cells = from.parentNode.cells,
to = cells[(from.cellIndex+dice)];

to.appendChild(player);

This doesn't look right. You are appending an existing node. Remove
the existing player element from its parent element and then create
and append a new element.

 

[Dr J R Stockton]

In comp.lang.javascript message <[email protected]
oglegroups.com>, Fri, 13 Jul 2007 09:56:27, Mr_John

dice = Math.ceil(Math.random()*6);

No; you want 1 to 6, and that can return 0, since 0<=random<1 ; read
the newsgroup FAQ. See below.

* * * DO NOT MULTIPOST ***

 

[scripts.contact]

function move(j){
var player = document.getElementById("player-"+j),
from = player.parentNode,
cells = from.parentNode.cells,
to = cells[(from.cellIndex+dice)];

to.appendChild(player);

This doesn't look right. You are appending an existing node. Remove
the existing player element from its parent element and then create
and append a new element.

Why ? Appending an element to a new place moves the element and that
is what he wants to do. What is wrong with that ?

 

[David Mark]

function move(j){
var player = document.getElementById("player-"+j),
from = player.parentNode,
cells = from.parentNode.cells,
to = cells[(from.cellIndex+dice)];
to.appendChild(player);

This doesn't look right. You are appending an existing node. Remove
the existing player element from its parent element and then create
and append a new element.

Why ? Appending an element to a new place moves the element and that
is what he wants to do. What is wrong with that ?

I've never seen such a thing, so it didn't look right to me. Assuming
it works, that's an interesting use of appendChild.