hooyantsing's Blog

第61次课程

字数统计: 1.4k阅读时长: 7 min
2019/10/08

源辰74班

第61次课程

10.08.2019

内容

JS部分作业检查、复习及指导[廖彦]

1.五子棋(上)

仅完成了光标悬停棋盘变化,黑白棋子交替下棋,防止同位置重复下棋,横向五子连珠获取胜利。

a7868d614d0c4ce9d609b7fbdbedd59f.png

知识要点:

在jQuery中:

1.$ 等价 jQuery -> $() 等价 jQuery()

2.向标签内追加标签

1
2
3
4
5
6
7
//参数如果为id选择器或class选择器,则获取html中的相关标签
$divFather = $("#father");
//参数如果为标签,则创建该标签放入jQuery对象中
$divSon = $("<div></div>");
//.append()    向标签内追加新标签
$divFather.append($divSon);

3.获取标签中的属性值

1
2
3
4
5
6
7
html
<div id="father"></div>
js
//当触发以上div的事件时
$this = $(this);
//.prop()    获取属性值
var id =  $this.prop("id");

4.判断当前获取的样式名是否和参数中的一致

1
2
3
//当触发以上div的事件时
$this = $(this);
$this.hasClass("black");

5.光标跟随要监听事件(mouseenter光标移入,mouseout光标移出,hover悬停)

1
2
3
4
5
6
//$this对象中有两种样式:black black-last
$this = $(this);
if($this.hasClass("black")){
//如果是"black-last"样式,则toggleClass方法将"black-last"样式移走
$this.toggleClass("black-last");
}

源码:

题目.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
<!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>
    color = "black";
    //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;
           }
       }
       if(chesses.length>=5){
           alert("五子连珠成立");
       }
    }
</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>
           <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>

模板相关文件,css和js

%!(EXTRA markdown.ResourceType=, string=, string=)

CATALOG