Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $(document).ready(function() {
- var timeArray = new Array(3,4,5,6,7,8,9,10);
- var shortestTime = timeArray[7];
- var fastestPony = {};
- var index;
- var pony = {
- name: "pony",
- raceTime: -1,
- selected: ""
- };
- //change the color of the pony when the user clicks on it
- $('.pony').bind('click', function() {
- $('.pony').removeClass('selectedPony');
- $(this).addClass('selectedPony');
- //get the pony that the user selected
- pony.selected = $(this);
- });
- $('#startButton').click(function() {
- if (pony.selected == "") {
- alert("Please click the pony you think will win the race.");
- }
- else {
- for (i = 1; i <= 8; i++) {
- //get a random number from the timeArray
- index = Math.floor(Math.random() * timeArray.length);
- pony.raceTime = timeArray[index];
- //pull the random race time number out of the array
- //so it can't be assigned to another horse
- timeArray.splice(index, 1);
- //get the fastest pony
- if (pony.raceTime < shortestTime) {
- shortestTime = pony.raceTime;
- fastestPony = $('#pony' + i);
- }
- //award the winner after the ponies have reached the finish line
- if (i == 8) {
- fastestPony.addClass('winner').append(' - Winner!');
- }
- //send the horses on their way to race!
- $('#pony' + i).animate({left: '320px'}, pony.raceTime * 1000);
- }
- }
- });
- //reset the ponies back to the starting line by reloading the page
- $('#resetButton').click(function() {
- document.location.reload(true);
- });
- });
- $(function() { // just pass in a function; it's the same as using $(document).ready()
- var ponies = $(".pony"), // Again: I never thought I'd write "ponies" in code
- raceButton = $("#raceButton"); // use a single button for race and reset
- ponies.click(function (event) {
- ponies.removeClass('selected');
- $(this).addClass('selected');
- // no need to store the selection; we can always find it, now that it's got a "selected" class
- });
- // use one button for both start and reset
- raceButton.click(function() {
- // If we have a winner, the race is pretty much over
- // If we have no winner, and no elements currently animating, we're ready to race
- // Otherwise we're racing; don't do anything
- if( ponies.filter(".winner").length !== 0 ) {
- reset();
- } else if( ponies.filter(".winner, :animated").length === 0 ) {
- race();
- }
- });
- function race() {
- // check for selection
- if( ponies.filter(".selected").length === 0 ) {
- alert("Please click the pony you think will win the race.");
- return; // return here instead of having a big else-block
- }
- var times = [], i, l;
- // disable the race button
- raceButton.prop("disabled", true);
- // build time array; don't hardcode it
- for( i = 0, l = ponies.length ; i < l ; i++ ) {
- times.push(i);
- }
- // Use .each() instead of relying on all the divs having numbered IDs.
- ponies.each(function () {
- var index = Math.floor(Math.random() * times.length),
- time = times[index],
- pony = $(this);
- times.splice(index, 1);
- // Use the onComplete callback to identify the winner
- pony.animate({left: '320px'}, {
- duration: (time + 3) * 1000, // only here do we set the minimum time by adding 3
- complete: function () {
- // If this was the fastest one
- if( time === 0 ) {
- pony
- .addClass("winner")
- .append("<span>Winner!</span>"); // use a span or something, so it's easier to remove later
- // alert the gambler and enable the reset button
- if( pony.hasClass("selected") ) {
- alert("You win tons of money or something");
- } else {
- alert("You lost. Boo-hoo");
- }
- raceButton.prop("disabled", false).val("Reset");
- }
- }
- });
- });
- }
- // just reset everything yourself; no need to reload
- function reset() {
- ponies
- .stop() // stop any running animations
- .removeClass("selected") // clear selection
- .removeClass("winner") // clear winner
- .css({ left: '0px' }) // move 'em back
- .children("span").remove(); // remove the label
- raceButton.val("Race!");
- }
- });
- function raceInProgress() {
- return ponies.filter(":animated").length > 0;
- }
- function raceDecided() {
- return ponies.filter(".winner").length > 0
- }
- function raceNotStarted() {
- return !raceInProgress() && !raceDecided();
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement