Drag Race

Small drag racing game

by fenderistic

HTML

<div id="result">About to race....</div>
<div id="wraper">
    <div id="tableOut"></div>
</div>

CSS

.raceTrack {
    padding: 0;
    border-width: 0;
    border-spacing: 0;
    width: 50px;
}
.carPic {
    position:absolute;
    width;
    20px;
    height:20px;
}
.wraper {
    width:100px;
    overflow:scroll;
}

JavaScript

//drag race

//Elliot Mitchell

//Global variables
var _distance = 200;
var outputTable = "";
var results = new Array();
var globalCounter = 0;
var leftCar;
var rightCar;
var TIMER1;
var raceFinished = false;

//make drag track
createTrack();

//use this to run many test cases
for (var j = 0; j < 1; j++) {
    globalCounter = j;
    //change these two numbers to adjust the chances of a car winning
    //so in logic, when a car "gets better" these two numbers will 
    //increase and get closer together.
    leftCar = new car("BOTTOM BLAZER", 50, 60, "carpic2");

    rightCar = new car("TOP TIER", 15, 90, "carpic1");

    race(leftCar, rightCar)

}
//car class
function car(carName, bot, top, imgId) {
    this.name = carName;
    this.bot = bot;
    this.top = top;
    this.lastMovingSpot=0;
    this.disTrav = 0;
    this.lastStep = 0;
    this.steps = "";
    this.isFinished = false;
    this.wonRace = false
    this.imgId = imgId;

    this.moveCar = function (step) {
        
        this.steps += String(step) + ",";

    }
    this.startAnimation = function(){
     var stepInc = this.steps.split(",");
        //for(var i=0;i<stepInc.length;i++){
        //    this.animateCar(Number(stepInc[i]));
        //}
        this.recurAnimate(stepInc,0);
    }
    this.recurAnimate = function(arr,place){
       
        if(arr.length!==place){
        var carEl = this;
        var xPos = this.lastMovingSpot;
        
        xPos += arr[place];
        
        this.lastMovingSpot  = xPos;
        
        $("#" + this.imgId).animate({
            
            'left': xPos
            
        }, 250, 'linear',function(){carEl.recurAnimate(arr,++place);});
        }
    }
    this.animateCar = function (step) {
        var xPos = this.lastMovingSpot;
        if (step < 0 || xPos < 0) {
            var fdsa = "break here";
        }
        xPos += step;
        this.lastMovingSpot  = xPos;
        $("#" + this.imgId).animate({
            'left': xPos
        }, 250,...