-
Notifications
You must be signed in to change notification settings - Fork 0
/
ludo.html
121 lines (113 loc) · 3.08 KB
/
ludo.html
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html>
<head>
<style>
#rollDice{
position: absolute;
top:250px !important;
float:left;
margin-left: -500px;
}
#rollDice1{
position: absolute;
top:250px !important;
float:left;
margin-left: -370px;
}
#rollDice2{
position: absolute;
top:250px !important;
float:left;
margin-left: -230px;
}
#rollDice3{
position: absolute;
top:250px !important;
float:left;
margin-left: -100px;
}
#score1{
position: absolute;
top:250px !important;
float:left;
margin-left: -100px;
}
#score2{
position: absolute;
top:250px !important;
float:left;
margin-left: -100px;
}#score3{
position: absolute;
top:250px !important;
float:left;
margin-left: -100px;
}#score4{
position: absolute;
top:250px !important;
float:left;
margin-left: -100px;
}
</style>
<script>
//simply show a dice face corresponding to the rolled dice number. It will also work with multiple dice that are laid side by side.
function dice(diceRoll,diceNumber){
console.log("diceImage"+diceNumber)
document.getElementById("diceImage"+diceNumber).src=diceRoll+".png"
}
/**
Rolls the dice and totals the number of moves a player is allowed. If the player rolls a six, they will be allowed to roll again.
If the player rolls three sixes they will have forfieted their turn
**/
function rollPlayerDice(diceNumber){
var totalMoves=0 //how much the player can move in a turn
var diceRoll =Math.floor(Math.random() * 6) + 1;
var playerNumber=diceNumber
totalMoves+=diceRoll
console.log(diceRoll)
console.log("The player dice number is "+diceNumber)
dice(diceRoll,playerNumber)
console.log("The total the player can move is "+totalMoves)
if(diceRoll===6){ //the player can roll again
console.log("success, you can roll again")
diceRoll =Math.floor(Math.random() * 6) + 1;
totalMoves+=diceRoll
console.log(diceRoll)
dice(6,playerNumber) //otherwise the player will not see a six
dice(diceRoll,playerNumber)
console.log("The total the player can move is "+totalMoves)
if(diceRoll===6){
console.log("two sixes")
diceRoll =Math.floor(Math.random() * 6) + 1;
totalMoves+=diceRoll
console.log(diceRoll)
dice(6,playerNumber) //otherwise the player will not see a six
dice(diceRoll,playerNumber)
console.log("The total the player can move is "+totalMoves)
diceRoll =Math.floor(Math.random() * 6) + 1;
if(diceRoll===6){
console.log("three sixes")
dice(diceRoll,playerNumber)
totalMoves=0
}
}
}
}
</script>
</head>
<body>
<h2>Ludo!</h2>
<img src="1.png" id="diceImage1"></img>
<img src="1.png" id="diceImage2"></img>
<img src="1.png" id="diceImage3"></img>
<img src="1.png" id="diceImage4"></img>
<button id="rollDice" class="dice" onclick="rollPlayerDice(1)">Roll the dice</button>
<button id="rollDice1" class="dice" onclick="rollPlayerDice(2)">Roll the dice</button>
<button id="rollDice2" class="dice" onclick="rollPlayerDice(3)">Roll the dice</button>
<button id="rollDice3" class="dice" onclick="rollPlayerDice(4)">Roll the dice</button>
<p id="score1"></p>
<p id="score2"></p>
<p id="score3"></p>
<p id="score4"></p>
</body>
</html>