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
| (function() {
var Memory = {
init: function(cards) {
this.$game = $(".game");
this.$modal = $(".modal");
this.$overlay = $(".modal-overlay");
this.$restartButton = $("button.restart");
this.cardsArray = $.merge(cards, cards); // 两个数组。
// this.cardsArray = $.merge(cards, cards); // 四个数组。
this.shuffleCards(this.cardsArray); // 先有数据
this.setup(); // 处理内容
},
shuffleCards: function(cardsArray) {
this.$cards = $(this.shuffle(this.cardsArray)); // 随机
},
<!-- 这里什么时候调用的？？？调用一次！ -->
setup: function() {
this.html = this.buildHTML();
// console.log(this.html, '111')
this.$game.html(this.html); // 这里是写入。。。
this.$memoryCards = $(".card"); // 创建之后获取。全部卡片内容
this.paused = false; // 是否可以翻转
this.guess = null; // 匹配id
this.binding(); // 绑定交互事件
},
binding: function() {
this.$memoryCards.on("click", this.cardClicked);
this.$restartButton.on("click", $.proxy(this.reset, this));
},
<!-- 这里每次调用，paused一直变化 -->
cardClicked: function() {
// 核心
var _ = Memory; // 总的。
var $card = $(this); // 当前
// 如果没有固定 && 没有被匹配 && 没有被选中 - 设置选中
if (!_.paused && !$card.find(".inside").hasClass("matched") && !$card.find(".inside")
.hasClass("picked")) {
$card.find(".inside").addClass("picked");// 添加标志类
// 如果当前的为空 - 设置（第一次选中）
if (!_.guess) {
_.guess = $(this).attr("data-id");
// 第二次选中 - 比较id - 如果对的就给它matched标志 - 不对，就不给。
} else if (_.guess == $(this).attr("data-id") && !$(this).hasClass("picked")) {
$(".picked").addClass("matched");
_.guess = null;
// 重置。
} else {
_.guess = null;
_.paused = true;
// 翻转回去。
setTimeout(function() {
$(".picked").removeClass("picked"); //- 删除标志类
Memory.paused = false; // 0.6秒后，可以翻转
}, 600);
}
// 全部匹配 - 弹出成功页面 - 有是否重新开始的选项
if ($(".matched").length == $(".card").length) {
_.win();
}
}
},
win: function() {
this.paused = true;
setTimeout(function() {
Memory.showModal();
Memory.$game.fadeOut();
}, 1000);
},
showModal: function() {
this.$overlay.show();
this.$modal.fadeIn("slow");
},
hideModal: function() {
this.$overlay.hide();
this.$modal.hide();
},
// 重置
reset: function() {
this.hideModal();
this.shuffleCards(this.cardsArray);
this.setup();
this.$game.show("slow");
},
// Fisher--Yates Algorithm -- https://bost.ocks.org/mike/shuffle/
shuffle: function(array) { // 随机
var counter = array.length,
temp, index;
// While there are elements in the array
while (counter > 0) {
// Pick a random index - 随机下标
index = Math.floor(Math.random() * counter);
// Decrease counter by 1
counter--;
// And swap the last element with it - 交换
temp = array[counter];
array[counter] = array[index];
array[index] = temp;
}
return array;
},
// 这里像JSX。。
buildHTML: function() {
var frag = '';
// 每个创建一个div
// 结构 div.card - div.inside - div.front + div.back - img
this.$cards.each(function(k, v) {
frag += '<div class="card" data-id="' + v.id + '"><div class="inside">\
<div class="front"><img src="' + v.img + '"\
alt="' + v.name + '" /></div>\
<div class="back"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/codepen-logo.png"\
alt="Codepen" /></div></div>\
</div>';
});
return frag;
}
};
// 起始数据！
var cards = [{
name: "php",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/php-logo_1.png",
id: 1,
},
{
name: "css3",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/css3-logo.png",
id: 2
},
{
name: "html5",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/html5-logo.png",
id: 3
},
{
name: "jquery",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/jquery-logo.png",
id: 4
},
{
name: "javascript",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/js-logo.png",
id: 5
},
{
name: "node",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/nodejs-logo.png",
id: 6
},
{
name: "photoshop",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/photoshop-logo.png",
id: 7
},
{
name: "python",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/python-logo.png",
id: 8
},
{
name: "rails",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/rails-logo.png",
id: 9
},
{
name: "sass",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sass-logo.png",
id: 10
},
{
name: "sublime",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/sublime-logo.png",
id: 11
},
{
name: "wordpress",
img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/74196/wordpress-logo.png",
id: 12
},
];
Memory.init(cards); // Js的起点！
})(); // 立即执行
|
