-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
385 lines (359 loc) · 16.8 KB
/
index.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
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
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
<html lang="zh-TW">
<style>
@font-face {
font-family: 'wakan';
src: url('fonts/TpldKhangXiDictTrial.otf') format('truetype');
unicode-range: U+5927, U+5BB6, U+5FEB, U+4F86, U+627E, U+FF0C, U+4E00, U+6A23, U+7684, U+7259, U+5957, U+54E5, U+54E5, U+5728, U+54EA, U+88E1, U+5DF2, U+627E, U+5230, U+FF1A, U+7D44, U+8CBC, U+5716, U+66F4, U+591A, U+5169, U+500B,U+56C9, U+FF01, U+518D, U+73A9, U+6B21, U+904A, U+6232, U+7D50, U+675F, U+FF01, U+6642, U+9593,U+6700, U+4F73,U+79D2 ;
}
p {font-family: 'wakan',serif;}
#reButton {font-family: 'wakan',serif; }
</style>
<head>
<title>測測你的記憶力（藍瘦香菇篇）</title>
<meta charset="utf-8">
<!-- cover by http://www.108js.com/article/article3/30001.html?id=5-->
<script type="text/javascript">
window.onload = function () {
var ctx = document.getElementById('canvas').getContext('2d');
if (window.innerHeight > window.innerWidth){ //手機螢幕 canvas 寬,高
ctx.canvas.width = document.body.offsetWidth;
ctx.canvas.height = document.body.offsetWidth;
init();
document.getElementById("gameScore").style.fontSize = "60px";
document.getElementById("gameIntro").style.fontSize = "60px";
document.getElementById("gameStats").style.fontSize = "60px";
document.getElementById("reButton").style.fontSize = "60px";
}else{ //電腦螢幕 canvas 寬,高
ctx.canvas.width = document.body.offsetWidth;
ctx.canvas.height = document.body.offsetHeight*3/4;
init();
document.getElementById("gameScore").style.fontSize = "25px" ;
document.getElementById("gameIntro").style.fontSize = "25px";
document.getElementById("gameStats").style.fontSize = "25px";
document.getElementById("reButton").style.fontSize = "25px";
}
}
</script>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
var pixwidth;
wh = document.documentElement.clientHeight-16; //扣掉16 = body.Height
ww = document.documentElement.clientWidth-16; //扣掉16 = body.Width
if (wh > ww){ //手機螢幕
pixwidth = Math.floor((ww-50)/4)+1;
}else{ //電腦螢幕
pixwidth = Math.floor((wh*3/4-50)/4);
}
var backimg= new Image();
backimg.src = "frontcover.jpg"; //撲克牌的背面圖片
var backgimg= new Image();
backgimg.src = "background.jpg"; //白圖用來蓋掉某些不需要的資訊
var finialx= new Image(); //gmae over 呈現的圖片
finialx.src = "34.png";
var endground= new Image(); //gmae over 呈現的圖片
endground.src = "pink_rice.png";
var backgroundimg = new Image();
backgroundimg.src = "backgroundcolor.jpg";
var cwidth = 760;//canvas的宽和高
var cheight = 280;
var ctx;
var firstpick = true;
var firstcard = -1;
var secondcard=-1;
var sum=0;//紀錄點擊牌的次数
var tablecolor = "rgb(255,255,255)";//用這個色清除圖片的背面
var deck = [];//一副牌，空數组
var firstsx = 0;//第一張牌的X坐標
var firstsy = 10;//第一張牌的Y坐標
var margin = 10;//牌之間的距離
var cardwidth = pixwidth;//牌的宽
var cardheight = pixwidth;//牌的高
var tid;//計時器引用
var matched;//兩張牌是否匹配
var starttime;
var count = 0;
var pairs = [//二维圖片数组
["01.png","01-1.png","05.png","05-1.png"],
["02.png","02-1.png","06.png","06-1.png"],
["03.png","03-1.png","07.png","07-1.png"],
["04.png","04-1.png","08.png","08-1.png"],
];
var uiIntro ;//遊戲的玩法
var uiStats;//遊戲的狀態
var uiScore;
var uiScore1
function Card(sx,sy,swidth,sheight, img, info) {//牌類的構造函数
this.sx = sx;
this.sy = sy;
this.swidth = swidth;
this.sheight = sheight;
this.info = info;//牌面信息，用於指示是否配對
this.img = img;
this.draw = drawback;//繪製自己,畫面的背面
}
function makedeck() {//創建一副牌
var i;
var acard;//a牌
var bcard;//與a配對的b牌
var pica;//a圖片
var picb;//與a配對的b圖片
var cx = firstsx;
var cy = firstsy;
for(i=0;i< pairs.length;i++) {
pica = new Image();
pica.src = pairs[i][0];
acard = new Card(cx,cy,cardwidth,cardheight,pica,i*2);
deck.push(acard);
picb = new Image();
picb.src = pairs[i][1];
bcard = new Card(cx,cy+cardheight+margin,cardwidth,cardheight,picb,i*2);//處於a的下方
deck.push(bcard);
acard.draw();
bcard.draw();
//
pica = new Image();
pica.src = pairs[i][2];
acard = new Card(cx,cy+(cardheight+margin)*2,cardwidth,cardheight,pica,i*2+1);
deck.push(acard);
picb = new Image();
picb.src = pairs[i][3];
bcard = new Card(cx,cy+(cardheight+margin)*3,cardwidth,cardheight,picb,i*2+1);//處於a的下方
deck.push(bcard);
acard.draw();
bcard.draw();
cx = cx+cardwidth+ margin;
}
}
function shuffle() {//洗牌
var i;
var k;
var holderinfo;
var holderimg;
var dl = deck.length
var nt;
for (nt=0;nt< 3*dl;nt++) {
i = Math.floor(Math.random()*dl);
k = Math.floor(Math.random()*dl);
holderinfo = deck[i].info;//牌面的信息
holderimg = deck[i].img;//牌面的圖片
deck[i].info = deck[k].info;
deck[i].img = deck[k].img;
deck[k].info = holderinfo;
deck[k].img = holderimg;
}
}
function drawback() {//畫牌的背面
ctx.drawImage(backimg,this.sx,this.sy,this.swidth,this.sheight);
}
function choose(ev) {//在桌面上單擊時用
var out;
var mx;//保存鼠標的X坐標
var my;//保存鼠標的Y坐標
var pick1;
var pick2;
if ( ev.layerX || ev.layerX == 0) { // Firefox
mx= ev.layerX;
my = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
mx = ev.offsetX;
my = ev.offsetY;
}
var i;
for (i=0;i< deck.length;i++){
var card = deck[i];
if (card.sx >=0) //檢查鼠標是不是點了這張牌
if ((mx>card.sx)&&(mx< card.sx+card.swidth)&&(my>card.sy)&&(my< card.sy+card.sheight)) {
if(i==firstcard) return;
sum++;
if(sum>=3) return;//點擊了同一張牌或者在没有蓋住兩張翻開的牌時又點擊了某張牌
if ((firstpick)|| (i!=firstcard)) {//玩家有没有再次點擊同一張牌
break;}
}
}
if (i< deck.length) { //在i張牌上點擊了
if (firstpick) {//如果是第一次點擊
firstcard = i;//第一次點擊的牌為i
firstpick = false;
ctx.drawImage(backgimg,card.sx,card.sy,card.swidth,card.sheight);
ctx.drawImage(card.img,card.sx,card.sy,card.swidth,card.sheight); //翻開牌
}else {
secondcard = i;//第二次點擊的牌為i
ctx.drawImage(backgimg,card.sx,card.sy,card.swidth,card.sheight);
ctx.drawImage(card.img,card.sx,card.sy,card.swidth,card.sheight); //翻開第二張
if (card.info==deck[firstcard].info) {//翻開的二張牌如果配對
matched = true;
count++;
uiScore.innerHTML = String(count);
if (count>= .5*deck.length) {//所有的牌翻完了
var now = new Date();
var nt = Number(now.getTime());
var seconds = Math.floor(.5+(nt-starttime)/1000);
//記錄分數用
if(localStorage.getItem("bluemushroom_score") == null||localStorage.getItem("bluemushroom_score") > seconds){
localStorage.setItem("bluemushroom_score", seconds);
}
//最後結果顯示
gameoverset(seconds);
uiIntro.innerHTML = "<p>更多牙套哥貼圖 <a href='https://store.line.me/stickershop/product/1361178/?ref=Desktop';'>here</a></p>";
//結束清空已找到幾組貼圖這行敘述
uiShowScore.innerHTML = "";
//結束後，背景圖會變，所以字的風格也要修改
document.getElementById("showscore").style.color = "black";
document.getElementById("reButton").style.color = "black";
//document.getElementById("gameScore").style.color = "black";
return;
}
}else {//翻開的二張牌不配對
matched = false;
}
firstpick = true;
tid = setTimeout(flipback,500);//翻開的二張牌不配對时，给玩家一點時間，然後蓋住牌
}
}
}
function flipback() {
var card;
if (!matched) {//兩張牌不配對时，重繪這兩張牌的背面
//因為png檔，邊邊透明會看上一個畫的圖（牌的正面），所以我們必須先畫一層底圖來防止這件事
ctx.drawImage(backgroundimg,deck[firstcard].sx,deck[firstcard].sy,deck[firstcard].swidth,deck[firstcard].sheight)
ctx.drawImage(backgroundimg,deck[secondcard].sx,deck[secondcard].sy,deck[secondcard].swidth,deck[secondcard].sheight)
deck[firstcard].draw();
deck[secondcard].draw();
sum=0;
firstcard=-1;
}
else {
//兩張牌配對时，在桌面上清除
//註解這三行是因為排翻完我不要讓他從檯面上消失
//ctx.fillStyle = tablecolor;
//ctx.fillRect(deck[secondcard].sx,deck[secondcard].sy,deck[secondcard].swidth,deck[secondcard].sheight+5);
//ctx.fillRect(deck[firstcard].sx,deck[firstcard].sy,deck[firstcard].swidth,deck[firstcard].sheight+5);
deck[secondcard].sx = -1;
deck[firstcard].sx = -1;
sum=0;
firstcard=-1;
}
}
function init(){
ctx = document.getElementById('canvas').getContext('2d');
canvas1 = document.getElementById('canvas');
canvas1.addEventListener('click',choose,false);
makedeck();//創建一副牌
shuffle();//洗牌
document.body.style.backgroundImage = "url('backgroundcolor.jpg')"; //我的底圖（背景圖）
ctx.strokeStyle="rgb(255,0,0)";
//ctx.font="bold 20pt sans-serif";
//ctx.strokeText("Blue thin mushrooms",150,30); 加標題
starttime = new Date();
starttime = Number(starttime.getTime());
uiIntro = $("gameIntro");
uiStats = $("gameStats");
uiScore = $("gameScore");
uiScore1 = $("gameScore1");
uiShowScore = $("showscore");
}
//遊戲結束的顯示
function gameoverset(seconds){
// 因為牌的位置是靠marginLeft來調整的，最後畫圖你要先把他歸0，畫上新圖再調整
document.getElementById('canvas').style.marginLeft = 0;
if (window.innerHeight > window.innerWidth){ //手機螢幕
ctx.canvas.width = document.body.offsetWidth;
ctx.canvas.height = window.innerWidth+100;
document.body.style.backgroundImage = "url('pink_rice.png')";
ctx.drawImage(endground,0,0,document.getElementById('canvas').width,document.getElementById('canvas').height);//結束把上面牌全部清空，畫上背景圖
pic_width = document.getElementById('canvas').height*3/5
pic_height = document.getElementById('canvas').height*3/5
//畫圖，drawImage(w,h,pic_w,pic_h)
ctx.drawImage(finialx,(document.getElementById('canvas').width-pic_width)/2,document.getElementById('canvas').width*1/2-document.getElementById('canvas').height*2/5,pic_width,pic_height);
ctx.textAlign = "center";
ctx.font = "90px wakan";
ctx.fillText("遊戲結束",document.getElementById('canvas').width*1/2,document.getElementById('canvas').height*3/4);
ctx.font = "70px wakan";
ctx.fillText("時間 "+String(seconds)+" 秒",document.getElementById('canvas').width*1/2,document.getElementById('canvas').height*3/4+125);
ctx.fillText("最佳 "+String(localStorage.getItem("bluemushroom_score"))+" 秒",document.getElementById('canvas').width*1/2,document.getElementById('canvas').height*3/4+250);
}else{ //電腦螢幕
ctx.canvas.width = document.body.offsetWidth;
ctx.canvas.height = window.innerHeight-150;
document.body.style.backgroundImage = "url('pink_rice.png')";
ctx.drawImage(endground,0,0,document.getElementById('canvas').width,document.getElementById('canvas').height);//結束把上面牌全部清空，畫上背景圖
pic_width = document.getElementById('canvas').height*3/5
pic_height = document.getElementById('canvas').height*3/5
//畫圖，drawImage(w,h,pic_w,pic_h)
ctx.drawImage(finialx,(document.getElementById('canvas').width-pic_width)/2,document.getElementById('canvas').height*1/2-document.getElementById('canvas').height*2/5,pic_width,pic_height);
ctx.textAlign = "center";
ctx.font = "35px wakan";
ctx.fillText("遊戲結束",document.getElementById('canvas').width*1/2,document.getElementById('canvas').height*4/5);
ctx.font = "30px wakan";
ctx.fillText("時間 "+String(seconds)+" 秒",document.getElementById('canvas').width*1/2,document.getElementById('canvas').height*4/5+40);
ctx.fillText("最佳 "+String(localStorage.getItem("bluemushroom_score"))+" 秒",document.getElementById('canvas').width*1/2,document.getElementById('canvas').height*4/5+80);
}
}
</script>
<style type="text/css">
#game{
position:relative;
}
a{
font-family: Microsoft JhengHei;
}
/* 字體置中 */
div{
text-align: center;
}
#reButton:hover {
background-color: rgb(255,192,0);
}
</style>
</head>
<body id = "mybody">
<canvas id="canvas" width="760" height="280" >
你的瀏覽器不支持HTML5
</canvas>
<br/>
<div id="game" >
<div id="gameUI">
<div id="gameIntro">
<p style="color: black;" class = "wakan">大家快來找，一樣的牙套哥哥在哪裡</p>
</div>
<div id="gameStats">
<p id="showscore" style="color: black;" class = "wakan">已經找到
<span id="gameScore" style="color:black; font-family: Microsoft JhengHei;" class = "wakan">0</span> 組一樣的牙套哥哥囉！
</p>
<button id="reButton" class = "wakan" onclick="myFunction()" style="color: black; border: 2px solid black;padding: 14px 40px;">再玩一次</button>
</div>
<script>
function myFunction() {
location.reload();
}
</script>
<script type="text/javascript">
wh = window.innerHeight-16; // 扣16 = body.Height
ww = window.innerWidth-16; // 扣16 = body.Width
console.log(wh);
console.log(ww);
//alert("高"+wh+"寬"+ww);
var ctx = document.getElementById('canvas').getContext('2d');
//顯示字體大小
if (wh > ww){ //手機螢幕
pixwidth = Math.floor((ww-50)/4)+1;
//調整圖的位置，置中
document.getElementById('canvas').style.marginLeft=(document.body.offsetWidth-(pixwidth)*4-30)/2;
document.getElementById("gameScore").style.fontSize = "60px";
document.getElementById("gameIntro").style.fontSize = "60px";
document.getElementById("gameStats").style.fontSize = "60px";
document.getElementById("reButton").style.fontSize = "60px";
}else{ //電腦螢幕
pixwidth = Math.floor((wh*3/4-50)/4);
//將遊戲移至中央
document.getElementById('canvas').style.marginLeft=(document.body.offsetWidth-(pixwidth)*4-30)/2;
document.getElementById("gameScore").style.fontSize = "25px" ;
document.getElementById("gameIntro").style.fontSize = "25px";
document.getElementById("gameStats").style.fontSize = "25px";
document.getElementById("reButton").style.fontSize = "25px";
}
</script>
</div>
</div>
</body></html>