-
Notifications
You must be signed in to change notification settings - Fork 0
/
05-xox-game.htm
137 lines (92 loc) · 4.84 KB
/
05-xox-game.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
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html>
<head>
<title>XOX Game</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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:
- By pressing empty squares on a three by three (3x3) field; It marks it as the "x" or "o" symbol.
WORKING LOGIC:
- Each field is a image object.
- The clicked object loads itself the image file of the next symbol.
GAME PLAY:
- One player uses the symbol "x" and the other uses the symbol "o".
- They continue in turn by placing their symbols on one of the empty squares.
- Three of its own symbols horizontally, vertically or diagonally
The first player to bring them together wins a point.
- Until the empty squares are filled, if no one succeeds, it is a draw. And the game restarts.
PROJECT DESCRIPTION:
A step-by-step video of the project. (Language: Turkish)
https://www.youtube.com/watch?v=DQBqankxnUM
*/
// A variable that stores whose turn it is.
var whoIsNext = "x"
// NOTE: for the changeImage() function to append "x" when it first runs,
// While defining the whoIsNext variable, the value "x" is passed.
// First run function.
var start = function() {
page.color = "whitesmoke"
// Create and align 3 x 3 image objects on the screen.
for (var y = 0; y <= 2; y++) {
for (var x = 0; x <= 2; x++) {
// IMAGE: Create an image object.
createImage()
that.load("images/xox-empty.svg")
that.width = 150
that.height = 150
// Align objects according to their number of loops.
that.left = 40 + (180 * x)
that.top = 40 + (180 * y)
// Let's add an information to the object to keep it.
that.value = "empty"
// Call the function when clicked on it.
that.onClick(changeImage)
// NOTE: that is a variable to which the most recently created object is moved.
// Note: In this example, 9 image objects are created.
// And these objects are not passed to variables.
// They do not have special names that we can access later.
}
}
}
// Function that works when one of the images is clicked.
var changeImage = function(clickedButton) {
// NOTE: When an object is clicked,
// the object itself is sent as a parameter.
// If the value of the object is empty,
// (This means that a symbol is not selected and the image can be clickable.)
if (clickedButton.value == "empty") {
// If the sequence is in the symbol "x",
if (whoIsNext == "x") {
// Change the properties of the clicked object.
// Load a image of the "x" symbol.
clickedButton.load("images/xox-x.svg")
// Change the value to "x".
clickedButton.value = "x"
// Edit the next symbol to be "o".
whoIsNext = "o"
} else if (whoIsNext == "o") {
// Or if it's the "o" symbol, do the same for it.
clickedButton.load("images/xox-o.svg")
clickedButton.value = "o"
whoIsNext = "x"
}
}
}
/*
DEVELOPMENT SUGGESTIONS:
- When the game is over, the restart button can be added.
- To keep the scores, a section can be developed.
For example: A score tag for each user and
a button that increases them.
- (DIFFICULT) Automatically detecting the winner, increasing the score and
A new game-starting algorithm can be added.
- Think, design and try to develop what else can be improved.
*/
</script>
</head>
<body></body>
</html>