#setInterval
#Math.random()亂數
*html原始碼，牌的建置：
有十六張牌，分別給他們0~15的id，以便在Javascript中控制牌。
程式碼：
<div class="board">
<div class="card" id=0 ></div>
<div class="card" id=1 ></div>
<div class="card" id=2 ></div>
<div class="card" id=3 ></div>
<div class="card" id=4 ></div>
<div class="card" id=5 ></div>
<div class="card" id=6 ></div>
<div class="card" id=7 ></div>
<div class="card" id=8 ></div>
<div class="card" id=9 ></div>
<div class="card" id=10 ></div>
<div class="card" id=11 ></div>
<div class="card" id=12 ></div>
<div class="card" id=13 ></div>
<div class="card" id=14 ></div>
<div class="card" id=15 ></div>
</div>
*html原始碼，時間的建置：倒數、重新開始、暫停
在class="timing"的部分，只是顯示倒數的時間
restart的部分，使用onclick=""，點下去後執行restart()函式
stop則執行stop()函式。
程式碼：
<div class="timing" id="timing">
倒數：
</div>
<div class="restart">
<input type="button" onclick="restart()" value="洗牌or開始">
</div>
<div class="stop">
<input type="button" onclick="stop()" id="stop" value="暫停">
</div>
*Javascript程式碼的部分：
有的功能：
1.確認哪一個位置的牌被翻閱
2.紀錄翻開的第一張牌跟第二章牌，判斷是否為同樣的花色
3.紀錄有幾對成功
4.時間暫停
5.亂數洗牌
<script>
//首先要來設定變數
var clickable=false;//暫停，是否開始
var round=0;//回合
var FirstCard,//翻開的第一張牌的花色
SecondCard,
FirstPosition,//翻開的位置
SecondPosition,
success=0;//紀錄有幾對成功
var stopbool=false;//現在是否暫停
var start=false;//能不能點擊，代表的是整個遊戲是否開始
var time,
timer;
//接著是花色，設定一個長度為16的陣列，花色的名字有8個，並重複。
var fruit=['apple','banana','cherry','peach'
,'orange','strawberry','juice','apple',
'banana','cherry','peach','orange',
'strawberry','juice','lemons','lemons'];
//接著設定一個陣列，代表每一個位置上的牌是否是被翻閱
var opened=new Array(16);
for (i=0;i<opened.length;i++){
opened[i]=false;
}
//restart函式，這個函式的功能是開始遊戲或重新洗牌(重新開始)，
var restart=function(){
clearInterval(timer); //一開始先清除timer這個計時器(往下會寫到)
time=60; //接著重新設定time=60
start=true; //遊戲已經開始
timer = setInterval(countDown,1000);//計時器每一秒值行countDown函式
clickable=true;//可以點擊
ChangeSuit(fruit);//執行ChangeSuit函式，這是洗牌的函式，傳入fruit這個代表花色的陣列
}
//暫停功能，stop()函式。如果現在是遊戲開始(start==true)，判斷現在是否暫停。
//如果現在沒有暫停，代表點下去是玩家要暫停，所以先終止計時器，然後設定stopbool是true，代表現在暫停
//clickable=false，玩家不能點牌。
var stop=function(){
if(start==true){
if(stopbool==false){
clearInterval(timer);
stopbool=true;
clickable=false;
document.getElementById("stop").value="繼續";
}
else if (stopbool==true){
timer = setInterval(countDown,1000);
stopbool=false;
clickable=true;
document.getElementById("stop").value="暫停";
}
}
}
//計時，
function countDown(){
if(time>=0){
document.getElementById("timing").innerHTML="倒數"+time
+"秒";
console.log(time);
time-=1;}
else if(time<0&&success<8){//如果沒有在時間內完成
clearInterval(timer);
clickable=false;
document.getElementById("timing").innerHTML="U Lose";
}
}
//此函式改變花色，打亂fruit的順序
function ChangeSuit(arr){
success=0;//重新設定成功的牌對為零
document.getElementById("count").innerHTML="已成功： "+success;
for (i=0;i<16;i++){
document.getElementById(i).innerHTML="";//蓋上，所以用內容是""空的代表
opened[i]=false;
}
//開始洗牌
//Math.random()函式，隨機產生出0~1之間的小數，
//Math.floor()函式，會將所有的小數無條件捨去到整數
//Math.ramdom()*i，假設最大為0.9，則乘上1會得到0，乘上2得到1，乘上3得到2...以此類推，
//先記錄隨機得到的數字位置，接著調換位置。
var i,
j,
temp;
for (i = arr.length - 1; i > 0; i--) {
j = Math.floor(Math.random() *i );
temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
return arr;
}
//點擊位置後判斷，是否是可以點擊的狀態(沒有暫停)，將翻開的位置對應opened。
for(var i=0;i<16;i++){
document.getElementById(i).onclick=function(){
if(clickable===true){
if(opened[this.id]===false){
opened[this.id]=true;
this.innerHTML='<img src="./'+fruit[this.id]+'.jpg"></img>';//改變花色
//翻牌後判斷，第一張牌
if(round===0){
FirstCard=fruit[this.id];//第一張牌的花色
FirstPosition=this.id;//第一張牌的位置
round+=1;
}
else if(round===1){
SecondCard=fruit[this.id];
SecondPosition=this.id;
round-=1;
setTimeout("judge()",500);//執行判斷
}
}
}
}
}
//判斷第一張跟第二張卡片
judge=function(){
if(FirstCard!=SecondCard){
document.getElementById(FirstPosition).innerHTML="";
document.getElementById(SecondPosition).innerHTML="";
opened[FirstPosition]=false;
opened[SecondPosition]=false;
}
else if(FirstCard===SecondCard){
success+=1;
if(success<8){
document.getElementById("count").innerHTML="已成功： " + success;}
else if(success==8){
clearInterval(timer);
document.getElementById("count").innerHTML="Win!!!" ;
}
}
}
</script>
留言
張貼留言