hooyantsing's Blog

第62次课程

字数统计: 1.7k阅读时长: 9 min
2019/10/10

源辰74班

第62次课程

10.10.2019

内容

补课[廖彦]

1.五子棋(下)

知识要点:

jQuery监听器

jQuery.cookie的使用:用于临时缓存数据

源码:

题目.html

注意:function check($chess){_} 方法相较于上次课”五子棋(上)“已被重构。

新增”保存”,”加载”相关监听事件及处理函数,基于cookie缓存数据。

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
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"  content="text/html; charset=UTF-8">
<title>jQuery五子棋</title>
<link href="css/chess5.css" rel="stylesheet"  type="text/css" />
<script  src="js/jquery-1.11.3.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script>
    /*
    监听器:
    1.首先通过$(#/._)锁定HTML标签,创建jQuery对象
    2.调用jQuery监听方法
        如:.hover(function(){如果触发后做什么}) .click(function(){如果触发后做什么})
    */
    
    /*
    本案例要点
    项目根据不同样式(CSS)来确定棋子和棋盘
    */
    color = "black";
    
    var offset =  [[-1,0],[0,-1],[-1,-1],[1,-1]];
    //jQuery 的加载函数
    $(function(){
       //$ 等价 jQuery
       $board = jQuery(".chessboard");
       //由于老师的失误,x y 值在图中表示相反
       for(var x=0;x<15;x++){
           for(var y=0;y<15;y++){
               //创建div元素,并且封装成jQuery对象
               var id = y + "-" + x;
               $div = $("<div  id='"+id+"'></div>");
               //标签内追加元素
               $board.append($div);
               
               //光标跟随要监听事件(mouseenter光标移入  mouseout光标移出,此处使用悬停hover代替前面两种事件)
               $div.hover(function(){
                  $this = $(this);
                  var id =  $this.prop("id");
                  var arrXy =  id.split("-");
                  var x = arrXy[0];
                  var y = arrXy[1];
                  
                  if($this.hasClass("black")){
                      //如果是"black-last"样式,则toggleClass方法将"black-last"样式移走
                      $this.toggleClass("black-last");
                  }else  if($this.hasClass("white")){
                      $this.toggleClass("white-last");
                  }else {
                      var cls;
                      if(x==0 && y==0){
                          cls =  "hover-up-left";
                      }else if(x==14 &&  y==14){
                          cls =  "hover-down-right";
                      }else if(x==0 &&  y==14){
                          cls =  "hover-down-left"
                      }else if(x==14 &&  y==0){
                          cls =  "hover-up-right";
                      }else if(x==0){
                          cls =  "hover-left";
                      }else if(x==14){
                          cls =  "hover-right";
                      }else if(y==0){
                          cls = "hover-up";
                      }else if(y==14){
                          cls =  "hover-down";
                      }else{
                          cls = "hover";
                      }
                      //样式切换
                      $(this).toggleClass(cls);
                  }
                  
               });
               
               $div.click(function(){
                  
                  var $this = $(this);
                  //判断当前是否下过棋子
                  //indexOf 判断子字符在前面字符串中是否出现过,出现过返回0 未出现返回-1
                  if($this.prop("class").indexOf("hover")==0){
                      //清空样式类
                      $this.prop("class","");
                      $this.addClass(color);
                      $this.addClass(color+"-last");
                      //更改下次下棋子颜色
                      color = color ==  "black" ? "white" : "black";
                      check($this);
                  }
               });
               
           }
       }
    })
    
    function check($chess){
       /*
       var id = $chess.prop("id");
       var arrXy = id.split("-");
       var x = arrXy[0];
       var y = arrXy[1];
       //先判断横向
       var chesses = [$chess];       //定义记录五子的数组
       while(true){
           //当前棋子
           var $curr = $("#"+x+"-"+y);
           //下一个棋子
           var $next = $("#"+(--x)+"-"+y);
           if($next.hasClass("white") ||  $next.hasClass("black")){
               if($curr.prop("class").indexOf($next.prop("class"))==0){
                  chesses.push($next);
               }else{
                  break;
               }
           }else{
               break;
           }
       }
       
       var x = arrXy[0];
       var y = arrXy[1];
       while(true){
           var $curr = $("#"+x+"-"+y);
           var $next = $("#"+(++x)+"-"+y);
           if($next.hasClass("white") ||  $next.hasClass("black")){
               if($curr.prop("class").indexOf($next.prop("class"))==0){
                  chesses.push($next);
               }else{
                  break;
               }
           }else{
               break;
           }
       }
       */
       var chesses;
       var id = $chess.prop("id");
       var xyarr = id.split("-");
       var chessColor =  $chess.prop("class").substr(0,5);
       
       for(var i=0;i<offset.length;i++){
           chesses = [$chess];
           for(var o=0;o<2;o++){
               var y = parseInt(xyarr[0]);
               var x = parseInt(xyarr[1]);
               var op = o == 0 ? 1 : -1 ;
               
               while(true){
                  $this = $("#"+y+"-"+x);
                  x += op * offset[i][0];
                  y += op * offset[i][1];
                  $next = $("#"+y+"-"+x);
                  if($next.length==1 &&  $next.prop("class").indexOf(chessColor)==0){
                      chesses.push($next);
                  }else{
                      break;
                  }
               }
           }
           if(chesses.length>=5){
               alert("五子连珠成立");
           }
       }
       return chesses;
    }
    
    //第二个加载事件
    $(function(){
       var $p = $(".operating-panel  p").eq(2);
       //找到 "保存" 按键,并将其创建为jQuery对象
       var $save = $p.children().first();
       //找到 "加载" 按键,并将其创建为jQuery对象
       var $load = $p.children().last();
       
       //如果"保存"被点击
       $save.click(function(){
           alert("save");
           var arrdata = [];
           //each方法 遍历每一个div元素,并且调用括号内的函数
           $(".chessboard  div").each(function(){
               $this = $(this);
               //null "" define = false ;
               //black white = true;
               if($this.prop("class")){
                  var d = $this.prop("id")  + "_" +$this.prop("class");
                  arrdata.push(d);
               }
           });
           var strdata = arrdata.join(";");
           //调用cookie方法,将变量strdata中的数据写入"chess5.data"中
           $.cookie("chess5.data",strdata);
       });
       
       //如果"加载"被点击
       $load.click(function(){
           alert("load");
           //调用cookie方法,将"chess5.data"中的数据放入变量strdata中
           var strdata =  $.cookie("chess5.data");
           var arrdata = strdata.split(";");
           for(var  i=0;i<arrdata.length;i++){
               var idAndColor =  arrdata[i].split("_");
               var id = idAndColor[0];
               var color = idAndColor[1];
               $("#"+id).addClass(color);
           }
       });
    });
    
    
</script>
</head>
<body>
    <div class="wrapper">
       <div class="chessboard"></div>
       <div class="operating-panel">
           <h2 style="margin: 30px auto">黑用时:00 : 00</h2>
           <h2 style="margin: 30px auto">白用时:00 : 00</h2>
           <p>
               <a id="black_btn"  class="selected" href="#">黑&nbsp;&nbsp;子</a> <a
                  id="white_btn" href="#">白&nbsp;&nbsp;子</a>
           </p>
           <p>
               <a id="first_move_btn"  class="selected" href="#">先&nbsp;&nbsp;手</a>
               <a id="second_move_btn"  href="#">后&nbsp;&nbsp;手</a>
           </p>
           <p>
               <a href="#">保&nbsp;&nbsp;存</a>
               <a href="#">加&nbsp;&nbsp;载</a>
           </p>
           <a id="replay_btn" class="btn"  href="#">开&nbsp;&nbsp;&nbsp;始</a>
           <p id="result_info">胜率:100%</p>
           <p id="result_tips"></p>
       </div>
       <div style="margin: 40px auto">
           <h2>图片样例,代码完成之后,请隐藏当前DIV</h2>
           <img src="images/black.png" />  <img src="images/white.png" /> <img
               src="images/hover.png" /> <img src="images/hover_up.png" /> <img
               src="images/hover_down.png"  /> <img src="images/hover_up_left.png" />
           <img  src="images/hover_up_right.png" />  <img
               src="images/hover_left.png"  /> <img src="images/hover_right.png" />
           <img src="images/hover_down_left.png" /> <img
               src="images/hover_down_right.png" /> <img
               src="images/black_last.png"  /> <img src="images/white_last.png" />
       </div>
    </div>
</body>
</html>
CATALOG