JS: Volgorde van de race
ik probeer om een paardenrace te maken in javascript. Tot nu toe werkt alles zoals het moet.
Maar nu zou ik graag hebben dat de volgorde van de paarden na elke "zet" getoond word in volgorde, en daar heb ik dus een groot probleem mee.
Iemand die mij hierbij zou kunnen helpen?
Hier is alvast het script:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Horse Racing</title>
<style type="text/css">
div.horse
{
color: #fff;
position: absolute;
height: 50px;
width: 90px;
}
div#horse1 {
top: 0px;
background: none #000;
}
div#horse2 {
top: 50px;
background: none #900;
}
div#horse3 {
top: 100px;
background: none #369;
}
div#horse4 {
top: 150px;
background: none #6f6;
}
div#horse5 {
top: 200px;
background: none #cc0;
}
div#horse6 {
top: 250px;
background: none #999;
}
div#renbaan
{
border: solid 1px #000;
height: 300px;
width: 890px;
position: relative;
}
</style>
</head>
<body>
<div id="renbaan">
<div class="horse" id="horse1" data-user="Trigger">1</div>
<div class="horse" id="horse2" data-user="Champ">2</div>
<div class="horse" id="horse3" data-user="Oakley">3</div>
<div class="horse" id="horse4" data-user="Bonney">4</div>
<div class="horse" id="horse5" data-user="Rio">5</div>
<div class="horse" id="horse6" data-user="Dale">6</div>
</div>
<p id="board">1 - 2 - 3 - 4 - 5 - 6</p>
<p id="info"></p>
</body>
<script type="text/javascript">
function runHorse(horseID, maxStep, maxSpeed, horsePosition)
{
// Random step and speed
randomStep = Math.round((Math.random() * maxStep) + 1);
randomSpeed = Math.round((Math.random() * (100 - maxSpeed)) + 1);
// Position horse
horsePosition = horsePosition + randomStep;
if (horsePosition > 800){ horsePosition = 800; }
horseID.style.left = horsePosition + "px";
// Check position
if (horsePosition < 800){
goNext = setTimeout(function(){
runHorse(horseID, maxStep, maxSpeed, horsePosition);
}, randomSpeed);
} else {
leader[place] = horseID.innerHTML + ". " + horseID.dataset.user;
place++;
if (place == 6){
document.getElementById('info').innerHTML = '1st place: ' + leader[0] + '<br>2nd place: ' + leader[1] + '<br>3th place: ' + leader[2] + '<br>4th place: ' + leader[3] + '<br>5th place: ' + leader[4] + '<br>6th place: ' + leader[5];
}
}
}
var leader = [];
var place = 0;
runHorse(horse1, 4, 48, 0);
runHorse(horse2, 5, 48, 0);
runHorse(horse3, 4, 49, 0);
runHorse(horse4, 5, 49, 0);
runHorse(horse5, 4, 50, 0);
runHorse(horse6, 5, 50, 0);
</script>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Horse Racing</title>
<style type="text/css">
div.horse
{
color: #fff;
position: absolute;
height: 50px;
width: 90px;
}
div#horse1 {
top: 0px;
background: none #000;
}
div#horse2 {
top: 50px;
background: none #900;
}
div#horse3 {
top: 100px;
background: none #369;
}
div#horse4 {
top: 150px;
background: none #6f6;
}
div#horse5 {
top: 200px;
background: none #cc0;
}
div#horse6 {
top: 250px;
background: none #999;
}
div#renbaan
{
border: solid 1px #000;
height: 300px;
width: 890px;
position: relative;
}
</style>
</head>
<body>
<div id="renbaan">
<div class="horse" id="horse1" data-user="Trigger">1</div>
<div class="horse" id="horse2" data-user="Champ">2</div>
<div class="horse" id="horse3" data-user="Oakley">3</div>
<div class="horse" id="horse4" data-user="Bonney">4</div>
<div class="horse" id="horse5" data-user="Rio">5</div>
<div class="horse" id="horse6" data-user="Dale">6</div>
</div>
<p id="board">1 - 2 - 3 - 4 - 5 - 6</p>
<p id="info"></p>
</body>
<script type="text/javascript">
function runHorse(horseID, maxStep, maxSpeed, horsePosition)
{
// Random step and speed
randomStep = Math.round((Math.random() * maxStep) + 1);
randomSpeed = Math.round((Math.random() * (100 - maxSpeed)) + 1);
// Position horse
horsePosition = horsePosition + randomStep;
if (horsePosition > 800){ horsePosition = 800; }
horseID.style.left = horsePosition + "px";
// Check position
if (horsePosition < 800){
goNext = setTimeout(function(){
runHorse(horseID, maxStep, maxSpeed, horsePosition);
}, randomSpeed);
} else {
leader[place] = horseID.innerHTML + ". " + horseID.dataset.user;
place++;
if (place == 6){
document.getElementById('info').innerHTML = '1st place: ' + leader[0] + '<br>2nd place: ' + leader[1] + '<br>3th place: ' + leader[2] + '<br>4th place: ' + leader[3] + '<br>5th place: ' + leader[4] + '<br>6th place: ' + leader[5];
}
}
}
var leader = [];
var place = 0;
runHorse(horse1, 4, 48, 0);
runHorse(horse2, 5, 48, 0);
runHorse(horse3, 4, 49, 0);
runHorse(horse4, 5, 49, 0);
runHorse(horse5, 4, 50, 0);
runHorse(horse6, 5, 50, 0);
</script>
</html>
Er zijn nog geen reacties op dit bericht.