js之翻牌游戲中的一個深刻感悟

本文轉載自查看原文 2016-08-26 18:05 1479 網頁建設技巧

先“上菜”：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>記憶方塊</title>
 6     <script src="randomNum.js"></script>
 7     <script src="Card.js"></script>
 8     <link rel="stylesheet" href="style.css">
 9 </head>
10 <body>
11 <div id="container"></div>
12 <script src="main.js"></script>
13 </body>
14 </html>

html

 1 #container{
 2     width: 800px;
 3     height: 600px;
 4     background-color: orchid;
 5     border: 3px solid orange;
 6     position: relative;
 7 }
 8 .cardContainer{
 9     width: 50px;
10     height: 50px;
11     overflow: hidden;
12     position: absolute;
13 }
14 .card{
15     width: 100%;
16     height: 100%;
17     margin: 0 auto;
18 }
19 .cardA{
20     background-color: red;
21     font-size: 32px;
22     line-height: 50px;
23     text-align: center;
24     color: aqua;
25 }
26 .cardB{
27     display: none;
28     background-color: blue;
29 }

css

 1 window.meng = window.meng || {};
 2 (function () {
 3 
 4     function createRandom(N) {
 5         var arr = [];
 6         this._randomArr = [];
 7         for (var i = 0; i < N; i++) {
 8             arr[i] = i;
 9         }
10         do {
11             var index = Math.floor(Math.random() * arr.length);
12             var flag = true;
13             this._randomArr.push(arr[index]);
14             arr.splice(index, 1);
15             if (arr.length == 0) {
16                 flag = false;
17             }
18         } while (flag);
19 
20     }
21 
22     Object.defineProperty(createRandom.prototype, "randomArr", {
23         get: function () {
24             return this._randomArr;
25         }
26     });
27     meng.createRandom = createRandom;
28 })();

 1 /**
 2  * Created by Administrator on 2016/8/26.
 3  */
 4 window.meng = window.meng || {};
 5 (function () {
 6 
 7     function Card(num) {
 8         this._aVisible = true;
 9         this._number=num;
10         this._htmlNode = document.createElement("div");
11         this._htmlNode.className = "cardContainer";
12         this._cardA = document.createElement("div");
13         this._cardA.className = "card cardA";
14         this._cardA.innerHTML=""+this._number;
15         this._htmlNode.appendChild(this._cardA);
16         this._cardB = document.createElement("div");
17         this._cardB.className = "card cardB";
18         this._htmlNode.appendChild(this._cardB);
19 
20         var self = this;
21         this._htmlNode.addEventListener("click", function (e) {
22             if (self.onclick) {
23                 self.onclick(self);
24                 // console.log(self);
25             }
26         });
27         //寫這句話的意思以后，main里面的  Card.htmlNode.onclick=clickHandle;
28         //就可以了寫成  Card.onclick=clickHandle;
29         // 因為這樣寫就保證了點擊的都是Card的節點而不是，Card對象
30     }
31 
32 
33     Object.defineProperties(Card.prototype, {
34         htmlNode: {
35             get: function () {
36                 return this._htmlNode;
37             }
38         },
39         aVisible: {
40             get: function () {
41                 return this._aVisible;
42             }
43         },
44         left: {
45             set: function (value) {
46                 this._htmlNode.style.left = value + "px";
47             }
48         },
49         top: {
50             set: function (value) {
51                 this._htmlNode.style.top = value + "px";
52             }
53         },
54         number: {
55             get: function () {
56                 return this._number;
57             }
58         }
59     });
60     Card.prototype.showA = function () {
61         this._cardA.style.display = "block";
62         this._cardB.style.display = "none";
63         this._aVisible = true;
64     };
65     Card.prototype.showB = function () {
66         this._cardA.style.display = "none";
67         this._cardB.style.display = "block";
68         this._aVisble = false;
69     };
70     meng.Card = Card;
71 })();

 1 /**
 2  * Created by Administrator on 2016/8/26.
 3  */
 4 (function () {
 5 
 6     var N = 10;
 7     var currentNumber = 1;
 8     var cards = [];
 9     var container = document.querySelector("#container");
10 
11     function clickHandle(card) {
12         if (currentNumber == card.number) {
13             container.removeChild(card.htmlNode);
14 
15             var index = cards.indexOf(card);
16             if (index != -1) {
17                 cards.splice(index,1);
18                 if (currentNumber == 1) {
19                     for (var i = 0; i < cards.length; i++) {
20                         cards[i].showB();
21                     }
22                 }
23                 if (cards.length <= 0) {
24                     alert("yes");
25                 }
26             }
27             currentNumber++;
28         } else {
29             alert("no");
30         }
31         //     console.log(card.number);
32 
33     }
34 
35 
36     function addCard() {
37         var randomLeft = new meng.createRandom(N);
38         var randomTop = new meng.createRandom(N);
39 
40         for (var i = 0; i < N; i++) {
41             var Card = new meng.Card(i+1);
42             cards.push(Card);
43             Card.left = randomLeft.randomArr[i] * 50;
44             Card.top = randomTop.randomArr[i] * 50;
45             container.appendChild(Card.htmlNode);
46             Card.onclick=clickHandle;
47             /*
48             *這里有個死循環:number是Card的屬性，而onclick點擊的應該是Card.htmlNode，
49             *而onclick只能接受一個單個功能，而不能帶參數，所以就不能在clickHandle中設置
50             * card為Card.htmlNode了，它里面的card只能接受Card。
51             * 所以要在Card里面寫上
52             * var self = this;
53             * this._htmlNode.addEventListener("click", function (e) {
54             * if (self.onclick) {
55             * self.onclick(self);
56             * }
57             * });
58             * 代碼，原因在Card.js里面已經寫明白了。
59             * */
60 
61         }
62     }
63 
64     function init() {
65         currentNumber = 1;
66         addCard();
67     }
68 
69     init();
70 })();

“這道菜”的有個特別重要的一點，感覺還挺重要的，特此強行解釋一波。╮(╯▽╰)╭

這個翻牌游戲中，我用了個Card函數去生產卡片，再在main函數里面去對個生產。

當點擊的時候有個重大問題：點擊的對象應該是Card.htmlNode這個div，不應該是Card對象。

而我代碼中寫的

  Card.onclick=clickHandle;
onclick接受的只能是function,顧function不能待參數，而clickHandle中必須對一個形參進行操作，而這個形參只能是Card。
這就出現了問題，onclick的行使對象"只能"是Card.htmlNode，而onclick實行的function只能用Card做參數。
這就不統一了，（Card.htmlNode與Card明顯不同啊）。
所以應解決一遍問題，讓這一邊去符合另一邊，引出了解決問題的思路就是：

　　　var self = this;
     this._htmlNode.addEventListener("click", function (e) { if (self.onclick) {  self.onclick(self); // console.log(self);  }  });
先用self接受this(也就是Card對象)。
設置當htmlNode被點擊的時候，執行self.onclick,也就是Card.onclick
這里巧妙地把htmlNode的點擊引到了Card的點擊上。
歸結一句話：當Card.htmlNode點擊的時候行使的功能變成了Card點擊行使改功能。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 游戲中的隨機概率 lua腳本在游戲中的應用 AAA游戲中雪的實現 JS寫的一個猜拳游戲在游戲中播放cg視頻遇到的問題 Unity游戲中關於傷害范圍的計算各種競技游戲中的ELO機制（講解得非常生動） unity 查找游戲中隱藏的物體關於游戲中的運動模糊的一點思考 Unity游戲中的尋路方案