relux教學 中文官網

relux教學 中文官網

日本高級飯店訂房推薦 5000日圓優惠券 More »

泰國曼谷 calm spa

泰國曼谷 calm spa

預約 Ari站高級按摩 沐浴在陽光下的綠意盎然 More »

 

jQuery 記憶&配對卡牌遊戲 簡易版本 教學

  •  
  •  
  • 40
  •  
    40
    Shares

教學用jQuery撰寫記憶&配對卡牌遊戲,此次教學式簡易版本,只會配對一組卡牌。要讓玩家在許多的卡牌內找到相對應的卡片,大家可以試著跟著以下教學寫,下次會教學多組配對的遊戲撰寫方式喔。

memory-game-jquery-easy
遊戲範例:點我

Welcome to wanchen travel blog website : )
歡迎來到玩轉芋圓部落格網站,最新豐富的美食餐廳與飯店心得,讓你熟知旅行大小事,跟著玩轉芋圓旅遊去!

jQuery 記憶&配對卡牌遊戲,基本上分為以下七個步驟思考邏輯:
1.亂數產生數字,並存放在陣列內
2.將亂數的數字指定成使用者要猜的卡片
3.將要猜的卡片獨立改變顯示方式
4.使用者觀看的時間到後,所有卡片樣式改成一樣
5.偵測使用者是否有點到對的卡片
6.點到對的卡片後,是否此卡片已經被選過,如被選過則不加分,沒被選過則加分
7.加的分數跟指定的亂數數量一樣則勝利

步驟一:
在body內創建一個div,供jq放置卡片用,並引入jq。

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>


<div class="base" style="width: 800px;">

———-

步驟二:
創建遊戲會需要使用到的變數,例如想放幾張卡片,要有幾張亂數卡片之類的,統一創建在最開始,未來容易維護,如下語法,都有中文註解供參照:

var cardArea = $(".base"); /*指定卡片要產生的位置*/
        var cardNum = 20; /*要產生幾張卡片*/
        var rowNum = 5; /*一排要放幾張卡片*/
        var randomNum = 2; /*要產生幾張使用者要猜的卡片數量*/
        var useedNum = new Array; /*亂數產生的數字會存到此陣列,預先開啟,未防產生出一樣的亂數*/
        var hitedNum = new Array; /*使用者點選到對的卡片後,將此卡片數字存到此,以供第二張以後的卡片偵測是否有被選過*/
        var hitNum = 0; /*用來存放成功點擊到卡片的數字,如果此數字跟亂數的數量一樣,則表示使用者勝利*/

———-

步驟三:
開始產生卡片,如果卡片的數量不到步驟二設定好的數量,則重複跑回圈產生,如下語法,都有中文註解供參照:

for (i = 0; i < cardNum; i++) { /*如果i小於要產生的卡片數量,則一直執行以下之程式,產生數量完整的卡片*/

            var aCard = $("<div>"); /*定義卡片是div的DOM*/
            cardArea.append(aCard) /*產生位置,放入此卡片*/
            aCard.css({ /*設定此卡片外觀*/
                "display": "inline-block",
                "width": 100 / rowNum + "%",
                "background": "#000",
                "border": "1px solid #fff",
                "box-sizing": "border-box"
            });
            aCard.css({ /*設定此卡片高度,為了讓卡片高度夠隨著寬度固定比例變化,因此等寬度全部寫完後,才執行此高度運算*/
                "height": aCard.width() * 1.1
            });
        };

———-

步驟四:
產生亂數,由步驟二設定好的卡片數量,產生亂數的範圍,並依據步驟二設定好的亂數數量產生。且每次產生完會偵測此數字是否已經存在,如果存在則重新產生,如不存在則放入存放亂數的陣列內,如下語法,都有中文註解供參照:

var randomNow; /*定義亂數變數*/
        for (i = 0; i < randomNum; i++) { /*如果i小於要產生的亂數數量,則一直執行以下之程式,產生足夠的亂數*/
            function creatNUm() { /*將產生亂數的語法包成一個函式,因為未來會重複使用,因此包成函式,供未來使用時不用重寫*/
                randomNow = Math.floor(Math.random() * cardNum) /*用所有的卡片數量產生此數量內的亂數,並放入變數randomNow*/

                if (useedNum.indexOf(randomNow) === -1) { /*如果產生的亂數,未在useedNum這個存放亂數的陣列內則執行以下*/
                    useedNum.push(randomNow) /*將此亂數放入useedNum陣列*/
                } else { /*如陣列內已經有此亂數,則執行以下*/
                    console.log("重複")
                    creatNUm(); /*重新執行產生亂數的函式*/
                }

            };
            creatNUm(); //執行產生亂數的函式
        };

———-

步驟五:
步驟似的亂數產生完後,要將亂數相對應到的卡片改變樣式,供使用者知道,如下語法,都有中文註解供參照:

for (i = 0; i < randomNum; i++) { /*如果i小於亂數之數量,則執行以下程式*/
            cardArea.children("div").eq(useedNum[i]).css("background", "#fff200");
            /*將相對應亂數的卡片改變樣式*/
        };

———-

步驟六:
在此步驟,我們先將”成功點擊到對的卡片”要執行的動作寫好,如下語法,都有中文註解供參照:

function hit(num) { /*成功點擊到對應亂數的卡片函式*/
            cardArea.children("div").eq(num).css("background", "#fff200"); /*對應到的卡片改變樣式*/

            if (hitedNum.indexOf(num) === -1) { /*點選到正確的亂數卡片是否已存在在對應的陣列函數內,如果沒有則執行以下*/
                hitedNum.push(num); /*將此亂數數字,放入已經點擊的陣列內儲存*/
                hitNum = hitNum + 1; /*已成功數 數字+1*/

                if (hitNum == randomNum) { /*已成功的點擊數如果等於亂數數量,表示使用者勝利,執行以下動作*/
                    $("body").before('

<div style="background:#000;color:#fff200;padding:10px 0;text-align: center;">過關</div>

');
                }
            }
        };

———-

步驟七:
在此步驟,我們先將”失敗點擊到對的卡片”要執行的動作寫好,如下語法,都有中文註解供參照:

function miss(num) { /*失敗點擊到沒有對應到亂數的卡片,執行以下*/
            cardArea.children("div").eq(num).css("background", "#000"); /*改變此卡片的樣式*/
            setTimeout(function() { /*1秒後執行以下動作*/
                cardArea.children("div").eq(num).css("background", "#555"); /*將此卡片回復成原來樣式*/
            }, 1000)
        };

———-

步驟八:
在此步驟,我們先將卡片偵測點擊的動作寫好,等到牌面翻到背後面,才可以執行偵測使用者點擊的動作,如下語法,都有中文註解供參照:

function checkNum() { /*使用者點擊後,偵測卡片函式*/
            cardArea.children("div").click(function() {
                if (useedNum.indexOf($(this).index()) === -1) { /*使用者點擊的卡片,沒對應到亂數陣列內存放的數字執行以下*/
                    miss($(this).index()) /*執行失敗點擊的函式*/
                } else { /*有對應到的話執行以下*/
                    hit($(this).index()); /*執行成功點擊的函式*/
                }
            })

        };

———-

步驟九:
我們寫一個卡片翻成背面的動作,並在兩秒後執行此函式,並開始偵測使用者點擊,如下語法,都有中文註解供參照:

function rotateCard() { /*將卡片翻成背面的函式*/
            cardArea.children("div").css("background", "#555"); /*所有的卡片統一變成背面樣式*/
            checkNum(); /*執行使用者點擊後,偵測卡片函式*/
        };

        setTimeout(rotateCard, 2000); /*兩秒後執行將卡片翻成背面的函式*/

———-

完成!jQuery 記憶&配對卡牌遊戲 簡易版本的教學到此就結束了,以下附上所有的語法,只要全部複製並且貼到空白的html檔案就可以執行囉。
未來會在推出多張卡片配對的教學,敬請期待囉。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>玩轉芋圓旅遊手札-程式教學</title>

</head>

<body>
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<div class="base" style="width: 800px;"></div>
<script type="text/javascript">
    $(function() {

        var cardArea = $(".base"); /*指定卡片要產生的位置*/
        var cardNum = 20; /*要產生幾張卡片*/
        var rowNum = 5; /*一排要放幾張卡片*/
        var randomNum = 2; /*要產生幾張使用者要猜的卡片數量*/
        var useedNum = new Array; /*亂數產生的數字會存到此陣列,預先開啟,未防產生出一樣的亂數*/
        var hitedNum = new Array; /*使用者點選到對的卡片後,將此卡片數字存到此,以供第二張以後的卡片偵測是否有被選過*/
        var hitNum = 0; /*用來存放成功點擊到卡片的數字,如果此數字跟亂數的數量一樣,則表示使用者勝利*/

        for (i = 0; i < cardNum; i++) { /*如果i小於要產生的卡片數量,則一直執行以下之程式,產生數量完整的卡片*/

            var aCard = $("<div>"); /*定義卡片是div的DOM*/
            cardArea.append(aCard) /*產生位置,放入此卡片*/
            aCard.css({ /*設定此卡片外觀*/
                "display": "inline-block",
                "width": 100 / rowNum + "%",
                "background": "#000",
                "border": "1px solid #fff",
                "box-sizing": "border-box"
            });
            aCard.css({ /*設定此卡片高度,為了讓卡片高度夠隨著寬度固定比例變化,因此等寬度全部寫完後,才執行此高度運算*/
                "height": aCard.width() * 1.1
            });
        };

        var randomNow; /*定義亂數變數*/
        for (i = 0; i < randomNum; i++) { /*如果i小於要產生的亂數數量,則一直執行以下之程式,產生足夠的亂數*/
            function creatNUm() { /*將產生亂數的語法包成一個函式,因為未來會重複使用,因此包成函式,供未來使用時不用重寫*/
                randomNow = Math.floor(Math.random() * cardNum) /*用所有的卡片數量產生此數量內的亂數,並放入變數randomNow*/

                if (useedNum.indexOf(randomNow) === -1) { /*如果產生的亂數,未在useedNum這個存放亂數的陣列內則執行以下*/
                    useedNum.push(randomNow) /*將此亂數放入useedNum陣列*/
                } else { /*如陣列內已經有此亂數,則執行以下*/
                    console.log("重複")
                    creatNUm(); /*重新執行產生亂數的函式*/
                }

            };
            creatNUm(); //執行產生亂數的函式
        };

        for (i = 0; i < randomNum; i++) { /*如果i小於亂數之數量,則執行以下程式*/
            cardArea.children("div").eq(useedNum[i]).css("background", "#fff200");
            /*將相對應亂數的卡片改變樣式*/
        };

        function hit(num) { /*成功點擊到對應亂數的卡片函式*/
            cardArea.children("div").eq(num).css("background", "#fff200"); /*對應到的卡片改變樣式*/

            if (hitedNum.indexOf(num) === -1) { /*點選到正確的亂數卡片是否已存在在對應的陣列函數內,如果沒有則執行以下*/
                hitedNum.push(num); /*將此亂數數字,放入已經點擊的陣列內儲存*/
                hitNum = hitNum + 1; /*已成功數 數字+1*/

                if (hitNum == randomNum) { /*已成功的點擊數如果等於亂數數量,表示使用者勝利,執行以下動作*/
                    $("body").before('

<div style="background:#000;color:#fff200;padding:10px 0;text-align: center;">過關</div>

');
                }
            }
        };

        function miss(num) { /*失敗點擊到沒有對應到亂數的卡片,執行以下*/
            cardArea.children("div").eq(num).css("background", "#000"); /*改變此卡片的樣式*/
            setTimeout(function() { /*1秒後執行以下動作*/
                cardArea.children("div").eq(num).css("background", "#555"); /*將此卡片回復成原來樣式*/
            }, 1000)
        };

        function checkNum() { /*使用者點擊後,偵測卡片函式*/
            cardArea.children("div").click(function() {
                if (useedNum.indexOf($(this).index()) === -1) { /*使用者點擊的卡片,沒對應到亂數陣列內存放的數字執行以下*/
                    miss($(this).index()) /*執行失敗點擊的函式*/
                } else { /*有對應到的話執行以下*/
                    hit($(this).index()); /*執行成功點擊的函式*/
                }
            })

        };

        function rotateCard() { /*將卡片翻成背面的函式*/
            cardArea.children("div").css("background", "#555"); /*所有的卡片統一變成背面樣式*/
            checkNum(); /*執行使用者點擊後,偵測卡片函式*/
        };

        setTimeout(rotateCard, 2000); /*兩秒後執行將卡片翻成背面的函式*/

    })
    </script>
</body>

</html>

作者芋圓是位喜歡寫程式的視覺設計師,因此可以用視覺人的邏輯去教學javascrip和jQuery、CSS如果有任何想學的又或者是疑問,都可以留言,芋圓樂意分享與教學。

作者網站:https://huangmaster.com/
遊戲範例:點我

有任何疑問可以留言告知,或是E-Mail給芋圓
nickhuang1121@gmail.com

看更多 芋圓語法教室 教學示範文章

 

 

 

 

玩轉芋圓讀者優惠專區

★喜歡玩轉芋圓旅遊手札嗎?歡迎下載APP 把部落格文章帶著走!

玩轉芋圓app

★信用卡推薦
台新Richart開戶優惠 用戶禮 NT$100元連結登記或輸入專屬代碼「PIXNET111」

★wanchen畫的line貼圖
實用橘貓貼圖 Orange cat オレンジ ねこ→前往貼圖

★預訂門票行程推薦klook

★買藥妝必領 2020日本藥妝家電優惠
松本清藥妝品項齊全藥妝店
日本札幌藥妝1萬日圓折500日圓、3萬日圓折2000日圓
唐吉訶德折價券滿額免稅享折扣
Japantaxi 「88DFB5」日本計程車折價券 ¥500jpy
Amazon 日本亞馬遜 挖寶購物好好買
BicCamera優惠券 日本家電電器折價券
樂天銀座優惠券 樂天免稅店折價券

★飯店訂房
agoda限定優惠台灣人高使用率訂房網站
booking中文訂房全球旅遊玩透透
relux 新用戶領取好友邀請9折優惠券
stay japan 預訂合法日本民宿
airbnb優惠 領1100旅遊金

★機票預訂
skyscanner機票比價快速好用找便宜機票

★其他優惠
日本電器家電優惠券 EDION免稅+93折優惠
餐廳訂位eztable 新會員優惠 抽紅包壽星優惠餐廳
Willer Travel預訂日本高速巴士車票
otomo travel日本導遊預約「MLKLX0PR」 折扣300元
GLOBAL WiFi上網分享器租借8折

★外送叫餐app/台北叫車
foodpanda外送優惠 輸入手機號碼領優惠
ubereats優惠「eats-7vh9sk」2次NT$100元折扣
uber優惠「wanchen120」首次搭乘uber省120


  •  
  •  
  • 40
  •  
    40
    Shares

發表迴響