JS實現簡單斗地主效果


let play = document.querySelectorAll(".play");
let dizhupai = document.getElementById("dizhupai");

function creatPoker(){
    let paidui = [];
    let color = ["黑桃", "紅桃", "梅花", "方塊"];
    let number = ["3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K", "A", "2"]
    for (let i = 0; i < number.length; i++) {
        let forColor = number[i];
        for (let j = 0; j < color.length; j++) {
            let forNum = color[j];
            paidui.push(
{
                    name:forColor + forNum,
                    order:i * 4 + j,
                    path:"../img/" + (i + 3) + "_" + (j + 1) + ".jpg"
                }
            )
        }
    }
    paidui.push(
        {
            name:"小王",
            order:52,
            path:"../img/16_1.jpg"
        }
    );
    paidui.push(
        {
            name:"大王",
            order:53,
            path:"../img/17_1.jpg"
        }
    );
    return paidui;
}
function shufflePoker(pokers){
    for (let i = 0; i < pokers.length; i++) {//通過循環隨機的將牌進行交換,實現洗牌
        let ranNum = parseInt(Math.random() * pokers.length);
        [pokers[i], pokers[ranNum]] = [pokers[ranNum], pokers[i]];
    }
}
function dealPoker(pokers,...players){
    // let player = [[], [], []];
    while (pokers.length > 3) {//只要牌堆的牌大於3張,玩家繼續摸牌
        for (let i = 0; i < players.length; i++) {//玩家3人輪流摸牌
            players[i].push(pokers.pop());
        }
    }
}
function orderPoker(...players){
    players.forEach(function (player) {//每個玩家將手里的牌理好
        //  players
        player.sort(function (a, b) {//a,b代表着排序過程中兩個相互比較的元素
            return a.order - b.order;
        })
    });
}
function renderPocker(pokers,...players){
    dizhupai.innerHTML = "";
    let flag = true;
    for (let i = 0; i < players.length; i++) {
        let nowPlay = play[i];
        nowPlay.innerHTML = "";
        let k = 0;
        let timer = setInterval(function(){
            let newImg = document.createElement("img");
                nowPlay.appendChild(newImg);
                newImg.src = players[i][k].path;
                if (i == 0) {
                    newImg.style.left = (k * 20) + "px"
                } else if (i == 1 || i == 2) {
                    newImg.style.top = (k * 27) + "px"
                }
                if(k == players[i].length - 1){
                    clearInterval(timer);
                    if(flag){
                        for (let i = 0; i < pokers.length; i++) {
                            let pokerImg = document.createElement("img");
                            dizhupai.appendChild(pokerImg);
                            pokerImg.src = pokers[i].path;
                            pokerImg.style.left = (i * 20) + "px";
                        }
                    }
                    flag = false;
                }
                k++;
        },200);
        // for (let k = 0; k < players[i].length; k++) {
        //     let newImg = document.createElement("img");
        //     nowPlay.appendChild(newImg);
        //     newImg.src = players[i][k].path;
        //     if (i == 0) {
        //         newImg.style.left = (k * 20) + "px"
        //     } else if (i == 1 || i == 2) {
        //         newImg.style.top = (k * 27) + "px"
        //     }
        // }
    }
 
}

function run(){
    let pokers = creatPoker()
    shufflePoker(pokers);
    let players = [[],[],[]];
    dealPoker(pokers,...players)
    orderPoker(...players)
    renderPocker(pokers,...players)
}

let rePlaybtn = document.getElementById("rePlayBtn");
rePlaybtn.addEventListener("click", () => {
    run();
});






免責聲明!

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



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM