-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path04-dice.htm
124 lines (87 loc) · 3.71 KB
/
04-dice.htm
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
122
123
124
<!DOCTYPE html>
<html>
<head>
<title>Roll the Dice</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- LIBRARY FILES -->
<link rel="stylesheet" type="text/css" href="basic/basic.min.css">
<script src="basic/basic.min.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
ALGORITHM:
- When the button is clicked, the two dice change randomly.
WORKING LOGIC:
- Dice are Image objects.
- There is a picture of dice for each number. dice1.png, dice2.png etc.
- When the button is clicked, two numbers are randomly determined
and the images corresponding to those numbers are loaded into the objects.
PROJECT DESCRIPTION:
A step-by-step video of the project. (Language: Turkish)
https://www.youtube.com/watch?v=Ouu2_WYqD9E
*/
// Image objects.
var imgDice1
var imgDice2
// Button object.
var btnRollTheDice
// First run function.
var start = function() {
page.color = "whitesmoke"
// IMAGE: Create dice images.
imgDice1 = createImage()
imgDice2 = createImage()
// Distance of objects to the left.
imgDice1.left = 175
imgDice2.left = 325
// Distance from objects upwards.
imgDice1.top = 50
imgDice2.top = 50
// Determining the dimensions of objects.
imgDice1.width = 100
imgDice2.width = 100
imgDice1.height = 100
imgDice2.height = 100
// Load images from files.
imgDice1.load("images/dice1.png")
imgDice2.load("images/dice6.png")
// Note: Inside the images folder, image files with .png extension.
// Set the angles of the images to 0 degrees.
imgDice1.rotate = 0
imgDice2.rotate = 0
// BUTTON: Create the Button object.
btnRollTheDice = createButton()
// Edit the text on the object.
btnRollTheDice.text = "Roll"
// Calculate the distance of the object from the solo.
btnRollTheDice.left = imgDice1.left + 60
// Calculate the distance of the object up.
btnRollTheDice.top = imgDice1.top + imgDice1.height + 50
// Determine which function will run when the object is clicked.
btnRollTheDice.onClick(rollTheDice)
}
// Function that randomly changes the dice image.
var rollTheDice = function() {
// Pick 2 random numbers between 1 and 6.
var number1 = random(1, 6)
var number2 = random(1, 6)
// NOTE: the random(number1, number2) function,
// generates a random number from two given numbers.
// (Including given numbers)
// Load image files.
imgDice1.load("images/dice" + number1 + ".png")
imgDice2.load("images/dice" + number2 + ".png")
// Rotate objects at random angles between 0 and 90.
imgDice1.rotate = random(0, 90)
imgDice2.rotate = random(0, 90)
}
/*
DEVELOPMENT SUGGESTIONS:
- In one corner of the screen, there is a screen showing the number equivalents of randomly thrown dice.
It can be a label object. 5x6
- Think about what other improvements can be made, design them and try to improve them.
*/
</script>
</head>
<body></body>
</html>