-
Notifications
You must be signed in to change notification settings - Fork 0
/
TicTacToe.html
232 lines (197 loc) · 6.76 KB
/
TicTacToe.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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
body,input,button,select,textarea{
font-family: "Helvetica Neue", Helvetica, Arial, "微軟正黑體", sans-serif;
}
h1,h2,h3,h4,h5,h6{
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.cell {
cursor:pointer;
}
</style>
</head>
<body>
<div w3-include-html="Menu.html"></div>
<div class="container-fluid">
<!-- 頁籤 -->
<ul class="nav nav-tabs">
<li role="presentation"><a href="Home.html">Home</a></li>
<li role="presentation" class="active"><a href="#">井字遊戲</a></li>
<li role="presentation"><a href="Gomoku.html">五子棋</a></li>
<li role="presentation"><a href="Battleship.html">海戰棋</a></li>
</ul>
<div class="page-header">
<h3>Welcome to OOXX</h3>
</div>
<!-- 自訂遊戲區塊 -->
<div class="row">
<div class="col-md-4">
<div class="input-group">
<input id="changeLevel" class="form-control" type="number" placeholder="幾層的井字遊戲" min="3" max="12">
<span class="input-group-btn">
<button id="changeLevelBtn" class="btn btn-success" type="button">開始新遊戲</button>
</span>
</div>
</div>
</div>
<!-- 遊戲資訊 -->
<div class="well well-lg">
<span>這是一個 <span class="isLevel"></span>*<span class="isLevel"></span> 的井字遊戲</span>
<button type="button" class="btn btn-info btn-sm" onClick="window.location.reload();">再來一局</button>
<p id="turnMessage">現在輪到:<span id="isTrunTo" class="text-info"></span></p>
<div class="alert alert-warning" role="alert" id="endMessage">...</div>
</div>
<!-- 棋盤區 -->
<div id="table" style="text-align: center;">
</div>
</div>
<script>
var turn; //輪到誰
var level = 3; //預設3*3
var isFinsh = false; //遊戲結束
$(document).ready(function() {
$("title").html("井字遊戲");
startCheckerboard(level);
changePlayer();
});
$(document)
//變更層數
.on('click','#changeLevelBtn',function(){
if($('#changeLevel').val() > 12){
alert("層數太大了玩不完啦");
return false;
}else if($('#changeLevel').val() < 3){
alert("層數太小不能玩..");
return false;
}
level = $('#changeLevel').val();
startCheckerboard(level);
})
//下棋!
.on('click','.cell',function(){
if($(this).data("value") == 0 && !isFinsh){
isFinsh = true;
$(this).html(turn);
$(this).data("value",turn);
setTimeout(function(){
if(checkIsWin()){
if(confirm("玩家"+turn+"贏了!\n\n要再玩一場嗎?")){
location.reload();
}else{
$('#endMessage').html("遊戲已結束，玩家"+turn+"贏了!");
$('#endMessage').show();
$('#turnMessage').hide();
}
}else if(checkerboardIsFull()){
$('#endMessage').html("遊戲已結束，平手!");
$('#endMessage').show();
$('#turnMessage').hide();
}else{
isFinsh = false;
}
changePlayer();
}, 20);
}
});
//重置遊戲
function startCheckerboard(level){
$("#table").html('');
$(".isLevel").html(level);
for(var i=0 ; i < level ; i++){
var contect="";
for(var j=0 ; j < level ; j++){
contect += '<span id="cell'+ i + "-" + j + '" class="cell border" style="height:50px ; width: 50px; display: block;" data-value=0>--</span>';
}
$("#table").append('<div class="row">' + contect + '</div>');
}
isFinsh = false;
$('#endMessage').hide();
}
//變更玩家
function changePlayer(){
turn = ((turn == 'O' || turn === undefined) ? 'X' : 'O');
$("#isTrunTo").html(turn);
}
//檢查是否獲勝
function checkIsWin(){
// 直線 + 橫線
var name = '';
var value = '';
var rowCount = 0;
var colCount = 0;
for(var i=0; i < level ; i++){
rowValue = '';
colValue = '';
rowCount = 0;
colCount = 0;
for(var j=0 ; j < level ; j++){
rowName = "cell"+i+"-"+j;
rowValue = (rowValue == '') ? $('#'+rowName).data("value") : rowValue;
if(rowValue != 0 && rowValue == $('#'+rowName).data("value"))
rowCount++;
colName = "cell"+j+"-"+i;
colValue = (colValue == '') ? $('#'+colName).data("value") : colValue;
if(colValue != 0 && colValue == $('#'+colName).data("value"))
colCount++;
}
if(rowCount == level || colCount ==level) return true;
}
// 斜線(左)
var leftName = '';
var leftValue = '';
var leftCount = 0;
for(i=0; i < level ; i++){
leftName = "cell"+i+"-"+i;
leftValue = (leftValue == '') ? $('#'+leftName).data("value") : leftValue;
if(leftValue != 0 && leftValue == $('#'+leftName).data("value"))
leftCount++;
}
if(leftCount == level) return true;
// 斜線(右)
var rightName = '';
var rightValue = '';
var rightCount = 0;
for( i=0 , j=(level-1); i < level ; i++ , j--){
rightName = "cell"+i+"-"+j;
rightValue = (rightValue == '') ? $('#'+rightName).data("value") : rightValue;
if(rightValue != 0 && rightValue == $('#'+rightName).data("value"))
rightCount++;
}
if(rightCount == level) return true;
return false;
}
//比較結果
function compare(obj0, obj1, obj2){
if($(obj0).data("value") != '0' && $(obj1).data("value") != '0' && $(obj2).data("value") != '0')
if($(obj0).data("value") == $(obj1).data("value") && $(obj1).data("value") == $(obj2).data("value")){
$(obj0).addClass('border-success');
$(obj1).addClass('border-success');
$(obj2).addClass('border-success');
return true;
}
return false;
}
//檢查是否還有空位
function checkerboardIsFull(){
for(i=0; i < level; i++){
for(j=0; j < level; j++){
if($("#cell" + i + "-" + j).data("value") == 0)
return false;
}
}
return true;
}
</script>
</body>
</html>