I'm playing with a little race game to try to brush up my Javascript and JQuery skills (I need a big broom!). I've got some little graphics animating across the screen, but need them to flow more smoothly?
Although I'm sure it's not necessary, here's the entire code:
Does anyone know how the movements of the graphics could be made to flow more smoothly?
Although I'm sure it's not necessary, here's the entire code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "[URL unfurl="true"]http://www.w3.org/TR/html4/loose.dtd">[/URL]
<html>
<head>
<title>Race</title>
<meta name="distribution" content="Global">
<meta http-equiv="Content-Language" content="en-gb">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="[URL unfurl="true"]http://code.jquery.com/jquery-latest.min.js"></script>[/URL]
<style type="text/css" media="screen">
DIV.movable { position:absolute; }
#canvas {
position: absolute;
width: 1000px;
height: 400px;
background-color: #99CCCC;
}
</style>
</head>
<body>
<script type="text/javascript">
var racestart = false;
var namers = new Array("Saab","Volvo","BMW","Triumph","Peugeot","VW");
var id = new Array(1,2,3,4,5,6);
var pace = new Array(60,65,70,75,80,75);
var racepace = new Array(60,65,70,75,80,75);
var disttravelled = new Array(0,0,0,0,0,0);
var placings = new Array(0,0,0,0,0,0);
var ended = new Array(0,0,0,0,0,0);
var racedistance = new Array(0,0,0,0,0,0);
var racetime = new Array(0,0,0,0,0,0);
var traintime = new Array();
var racediff = new Array();
var stamdrop = new Array();
var pacedrop = new Array();
var racedist = 1600;
var race = racedist;
var seconds = 0;
var completers = 0;
var nonfinishers = 0;
var placement = -1;
var finish = false;
var looper = 0;
var bestdistance = 0;
var runners = 6;
$(function() {
$('#clickme').click(function() {
if(racestart == false){
$('#book').animate({
left: '+=50'
}, 5000, function() {
// Animation complete.
});
racestart = true;
}
});
});
$(function() {
$.perSecond = function() {
if(race){
for(looper = 0; looper < runners; looper++){
looperplus = looper+1;
disttravelled[looper] += racepace[looper];
if(racepace[looper] > bestdistance) {
bestdistance = racepace[looper];
}
}
race -= bestdistance;
$('#h'+looperplus).animate({ left: '+='+racepace[looper]+"px" }, 1000, function() { });
} else {
document.write("Race ended");
}
};
});
function raceGo(){
document.write("runners: "+runners+"<br/><br/>");
bestdistance = 0;
var int = self.setInterval(function(){$.perSecond()},1000);
racestart = true;
}
</script>
<script type="text/javascript">
if(racestart == false){
document.write("<button onclick='raceGo()'>Start Race</button>");
}
</script>
<div id="canvas">
<img src="sitewise/bwl.jpg" alt="" name="box" width="13" height="18" id="h1" class="movable" style="position: relative; left: 100px;" /><br/>
<img src="sitewise/bwl.jpg" alt="" name="box" width="13" height="18" id="h2" class="movable" style="position: relative; left: 100px;" />
</div>
</body>
</html>Does anyone know how the movements of the graphics could be made to flow more smoothly?
