日新网培训Javascript之五 五子棋例子

需要注意三点:

1、JS代码的分层，View、Model、Controller

2、数组操作技巧，四个方向的遍历优化，哨兵的使用。

3、对象的构造关系，全局配置的使用。

 

  1 //Model层
  2 Config = { MapContainDiv/*盛放网格的DIV对象*/: {}, MapIMP: [], ChessBoardArray/*表示棋盘的数组*/: [], GameMode/*游戏模式1为人人对战、2为人机对战*/: 1, WinTime/*获胜次数数组：0表示白、1表示黑*/: [], PlayTimeWork: /*游戏落子记时、仅在人人对战有效、0代表白、1代表黑*/[], SrcUrlArray: /*0代表白、1代表黑、2代表无*/[], CurrentColor/*当前该下的人、0表示白、1表示黑*/: 0, ChessMaxHeight: 20, ChessMaxWidth: 20, Winner: 2, WinnerName: ["白方", "黑方"] };
  3 Config.Init = function() {
  4     this.MapContainDiv = document.getElementById("GameMap");
  5     this.MapContainDiv.innerHTML = "";
  6     for (var i = 0; i < 3; i++) {
  7         this.SrcUrlArray[i] = "image/" + i + ".jpg";
  8     }
  9     for (var i = 0; i < 2; i++) {
 10         this.WinTime[i] = 0;
 11     }
 12     for (var i = -1; i <= this.ChessMaxWidth; i++) {
 13         this.ChessBoardArray[i] = [];
 14         for (var j = -1; j <= this.ChessMaxHeight; j++) {
 15             var img = new Image();
 16             img.src = this.SrcUrlArray[2];
 17             img.className = "EveryOne";
 18             img.x = i;
 19             img.y = j;
 20             this.ChessBoardArray[i][j] = { Obj: img, Color: 2 };
 21             if (i != -1 && i != this.ChessMaxWidth && j!= -1 && j != this.ChessMaxHeight) {
 22                 this.MapContainDiv.appendChild(img);
 23             }
 24         }
 25     }
 26 }
 27 //Controller层
 28 function OnMouseDownImage(x, y) {
 29     if (Config.GameMode == 1) {//人人对战
 30         if (Config.ChessBoardArray[x][y].Color == 2) {
 31             Config.ChessBoardArray[x][y].Color = Config.CurrentColor;
 32             Config.ChessBoardArray[x][y].Obj.src = Config.SrcUrlArray[Config.CurrentColor];
 33             Config.Winner = IfWinGame();
 34             if (Config.Winner != 2) {
 35                 Config.WinTime[Config.Winner]++;
 36                 ShowWin();
 37             }
 38             Config.CurrentColor = Config.CurrentColor == 0 ? 1 : 0;
 39         }
 40     }
 41     if (Config.GameMode == 2) {//人机对战
 42         
 43     }
 44     return;
 45 }
 46 function BeginGame() {
 47     for (var i = 0; i < Config.ChessMaxWidth; i++) {
 48         for (var j = 0; j < Config.ChessMaxHeight; j++) {
 49             Config.ChessBoardArray[i][j].Obj.onclick = function() {
 50                 OnMouseDownImage(this.x, this.y);
 51             }
 52         }
 53     }
 54 }
 55 function WorkOutIMP(x, y) {
 56     var i = [0, 0, 0, 0, 0, 0, 0, 0]; //依次代表方向由上、右上、右、右下……顺时针到……左上
 57     var xi = [0, 1, 1, 1, 0, -1, -1, -1];//对应X方向增量
 58     var yi = [1, 1, 0, -1, -1, -1, 0, 1];//对应Y方向增量
 59     for (var j = 0; j < 8; j++) {
 60         for (var n = 1; n < 6; n++) {
 61             if (Config.ChessBoardArray[x + n * xi[j]][y + n * yi[j]].Color == Config.CurrentColor) {
 62                 i[j]++;
 63             }
 64             else {
 65                 break;
 66             }
 67         }
 68     }
 69 }
 70 function GetSultNum(num) {
 71     if (num > Config.ChessMaxWidth) {
 72         return Config.ChessMaxWidth;
 73     }
 74     if (num < 0) {
 75         return -1;
 76     }
 77     return num;
 78 }
 79 function IfWinGame() {
 80     //遍历测试
 81     for (var y = 0; y < Config.ChessMaxHeight; y++) {
 82         var countX = 0, countY = 0, countDownX = 0, countDownY = 0, countUpX = 0, countUpY = 0;
 83         for (var x = 0; x < Config.ChessMaxWidth; x++) {
 84             Config.ChessBoardArray[x][y].Color == Config.CurrentColor ? countX++ : (countX = 0); //遍历横向
 85             Config.ChessBoardArray[y][x].Color == Config.CurrentColor ? countY++ : (countY = 0); //遍历纵向
 86             Config.ChessBoardArray[GetSultNum(x + y)][x].Color == Config.CurrentColor ? countDownX++ : (countDownX = 0); //遍历左上到右下的方向
 87             Config.ChessBoardArray[x][GetSultNum(x + y)].Color == Config.CurrentColor ? countDownY++ : (countDownY = 0); //同上
 88             Config.ChessBoardArray[GetSultNum(Config.ChessMaxWidth - 1 - x - y)][x].Color == Config.CurrentColor ? countUpX++ : (countUpX = 0); //遍历右上到左下方向
 89             Config.ChessBoardArray[GetSultNum(Config.ChessMaxWidth - 1 - x)][GetSultNum(x + y)].Color == Config.CurrentColor ? countUpY++ : (countUpY = 0); //同上
 90             if (countX == 5 || countY == 5 || countDownX == 5 || countDownY == 5 || countUpX == 5 || countUpY == 5) {
 91                 return Config.CurrentColor;
 92             }
 93         }
 94     }
 95     return 2;
 96 }
 97 //View层
 98 function ShowWin() {
 99     alert(Config.WinnerName[Config.Winner] + "赢了!");
100     Config.Init();
101     BeginGame();
102 }
103 //代码执行区
104 Config.Init();
105 BeginGame();

 

 

 1 *
 2 {
 3     margin:0px;
 4     padding:0px;
 5 }
 6 #Contain
 7 {
 8     margin:20px auto;
 9     width:804px;
10     height:542px;
11     border-color:#C3C3C3;
12     border-width:2px;
13     background-color:#E5EECC;
14     border-style:solid;
15 }
16 #GameMap
17 {
18     width:540px;
19     height:542px;
20     float:left;
21     border-color:#C3C3C3;
22     border-width:1px;
23     border-style:solid;
24 }
25 #Control
26 {
27     width:260px;
28     height:542px;
29     float:left;
30     border-color:#C3C3C3;
31     border-style:solid;
32     border-width:1px;
33 }
34 .EveryOne
35 {
36     width:27px;
37     height:27px;
38     float:left;
39     cursor:pointer;
40 }

 

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 <head>
 5     <title>日新网JS培训课程（五）作品 | http://www.ecjtu.net 日新网</title>
 6     <link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
 7 </head>
 8 <body>
 9     <div id="Contain">
10         <div id="GameMap"></div>
11         <div id="Control"></div>
12     </div>
13     <script src="js/JScript.js" type="text/javascript"></script>
14 </body>
15 </html>
16