'How to determine the winner in a race?
I have created a program that places several nodes (which act as animals) on the screen; they're supposed to race eachother. Animal.js is the parent object of the four subclasses: cheetah.js, leopard.js and other subclasses which are similar
This is the animal.js class, the constructor takes three arguments, left and right to set the start position, and timeBetweenSteps which is used to give each animal a random amount of milliseconds to reach the end of the race. To get to the end of the race the animate() method is used to set the animals left variable to 1380.
This is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The Race</title>
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="lib/jquery.js"></script>
<script src="src/animal.js"></script>
<script src="src/cheetah.js"></script>
<script src="src/leopard.js"></script>
<script src="src/caracal.js"></script>
<script src="src/ocelot.js"></script>
</head>
<body>
<div class="topbar">
<span class="title">The Race</span>
<a href="#" class="addAnimalButton" id="cheetah" data-animal-maker-function-name="Cheetah">Add Cheetah</a>
<a href="#" class="addAnimalButton" id="leopard" data-animal-maker-function-name="Leopard">Add Leopard</a>
<a href="#" class="addAnimalButton" data-animal-maker-function-name="Caracal">Add Caracal</a>
<a href="#" class="addAnimalButton" data-animal-maker-function-name="Ocelot">Add Ocelot</a>
<div class="button">
<button class="get-ready">Get Ready</button>
<button class="startRace" onclick="">Start</button>
</div>
</div>
<div id="content"></div>
<span class="race-info"></span>
<script src="src/init.js"></script>
</body>
</html>
This is the animal class:
var Animal = function(top, left, timeBetweenSteps) {
this.$node = $('<span class="animal"></span>');
this.top = top;
this.left = left;
this.timeBetweenSteps = timeBetweenSteps;
this.step();
this.setPosition(this.top, this.left);
};
Animal.prototype.step = function() {
setTimeout(this.step.bind(this), this.timeBetweenSteps);
};
Animal.prototype.setPosition = function(top, left) {
this.position = {
top: top,
left: left
};
this.$node.css(this.position);
};
Animal.prototype.getReady = function() {
var trackWidth = 1380;
var raceTime = this.timeBetweenSteps;
this.$node.animate({
left: trackWidth,
}, raceTime, function() {
console.log(this.$node + " completed race in " + raceTime + " Milliseconds") //This logs the amount of milliseconds it took each node to complete the race, but I need to show the winner who completed it in the least amount of time possible
})
}
This is the Leopard.js subclass:
var Leopard = function(top, left, timeBetweenSteps) {
Animal.call(this, top, left, timeBetweenSteps);
}
Leopard.prototype = Object.create(Animal.prototype);
Leopard.prototype.constructor = Leopard;
Leopard.prototype.step = function() {
Animal.prototype.step.call(this);
this.$node.css('background-color', "orange"); //styles animal/div
}
And all the code is run from an init.js file. Here there's an array that stores all the added animals.
/*
When this complete page loads into memory if any of the addAnimalButton is clicked, make an animal object based on the type of object desired.
Add that object to the window content area.
*/
$(document).ready(function() {
var arr = window.animals = []; //This is the array
$('.addAnimalButton').on('click', function(event) {
/* This function sets up the click handlers for the create-animal
* buttons on track.html. You should only need to make one small change to it.
* As long as the "data-animal-maker-function-name" attribute of a
* class="addAnimalButton" DOM node matches one of the names of the
* maker functions available in the global scope, clicking that node
* will call the function to make the animal.
*/
/* animalMakerFunctionName is a string which must match
* one of the animal maker functions available in global scope.
* A new object of the given type will be created and added
* to the stage.
*/
var animalMakerFunctionName = $(this).data('animal-maker-function-name');
// get the maker function for the kind of animal we're supposed to make
var animalMakerFunction = window[animalMakerFunctionName];
// make an animal with a random position
var animal = new animalMakerFunction(
$("#content").height() * Math.random(), //sets the top
$("#content").width() * Math.random(), //set the left
Math.floor((Math.random() * 5000) + 1) //gives random time speed to each animal
);
$('body').append(animal.$node); //places animal on page window
window.animals.push(animal); //pushes all added animals to array
console.log(arr)
});
$(".get-ready").click(function() { //Sets all animals on the screen to line up vertically
let top = 50;
arr.forEach(animal => animal.setPosition(top += 60, 10))
})
$(".startRace").click(function() { //Once start button is clicked, //the animals "run"
until they cross the line
arr.forEach(function(animal) {
animal.getReady()
})
})
});
So how do I determine the winner of the race? Who completed the race in the least time possible?
Also, this.$node prints "undefined", why is that?
console.log(this.$node + " completed race in " + raceTime + " Milliseconds")
990 milliseconds will be the winner.
Solution 1:[1]
Not sure, could be you lose it in the animate function, maybe try something like this:
var myAnimal = this.$node;
this.$node.animate({
left: trackWidth,
}, raceTime, function() {
console.log(myAnimal + " completed race in " + raceTime + " Milliseconds") //This logs the amount of milliseconds it took each node to complete the race, but I need to show the winner who completed it in the least amount of time possible
})
}
Else maybe you need to print something like this.$node.name if you have a key like that.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Medda86 |