JQuerry Board Game
JQuerry Board Game
Hi Folks,
I am trying to get a "game piece" to move around a board. I have it animating with a die that it rolls. So if you roll a 6 it will animate 6 times 110px. Each box on the game is 110px.
The problem I am having is changing the direction of the animation once it hits a certain point.
Any thoughts or ideas? I am new to jQuery.
Below is my code. and here is the test link http://kyledicke.com/game/index5.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>GoProStart Game Demo</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script type="text/javascript">
<!-- THIS IS THE CODE FOR THE DICE - GENERATES A RANDOM NUMBER -->
<!-- The JavaScript Source!! http://javascript.internet.com -->
<!-- Begin
var die = 6;
var dice = 1;
function dice_roll(die, dice) {
var roll = 0;
for (loop=0; loop < dice; loop++) {
// random number fix by George Johnston (cali_scripter@yahoo.com)
roll = roll + Math.round(Math.random() * die) % die + 1;
}
document.roller.rolls.value = roll;
}
// End -->
<!-- This function takes the value of the rolled die (rolls definied by variable x) and multiplies it by 120 -->
function clickme() {
var x = document.getElementById("rolls").value * 120;
$('#piece').animate({
left: '+=' + x ,<!-- Then it moves it (X * 120) to the left -->
}, 500, function() {
// Animation complete.
});
//END
<!-- This checks the coordinates of the image -->
var left = $("#piece").offset().left;
var top = $("#piece").offset().top;
console.log('left: ' + left + ' top: ' + top);
// End -->
};
</script>
</head>
<body>
<div id="wrapper">
<div id="board">
<table width="100%">
<tr>
<td> <div id="piece" style="position: relative; left: 0px; margin: 20px 20px 20px 20px; width: 80px; height: 80px; top:00px;" ><img id="book" src="images/piece.png" alt="" width="80" height="80" /></div></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><form name="roller">
<input type="button" value="Roll Dice" name="button" onclick="dice_roll(die, dice)">
<input name="rolls" type="text" id="rolls" size="3" >
</form>
<form>
<input type="button" value="move" onclick="clickme()"/>
</form></td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
</div>
</body>
</html>