Click here for free DL of the app version that can save data.

No:616

290

←

Prev Next

→

domino
Developer User3044｜Date and time 23/6/16 12:37:23
Build time 77.552 sec｜Game capacity 7.756KB｜

Script

ドミノ

Player1

Player2

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

Click here for free DL of the app version that can save data.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ドミノ</title>
<style>
    body {
        text-align: center;
        font-size: 30px;
    }
    .domino {
        display: inline-block;
        width: 80px;
        height: 160px;
        background-color: white;
        border: 1px solid black;
        margin: 10px;
        border-radius: 10px;
        position: relative;
    }
    .number {
        font-size: 60px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
    .horizontal {
        transform: rotate(90deg);
    }
    .selected {
        background-color: pink;
    }
    .player {
        margin: 20px 0;
    }
    #player1 {
        color: red;
    }
    #player2 {
        color: blue;
    }
    .button {
        font-size: 20px;
        padding: 10px 30px;
        margin: 10px;
        background-color: white;
        border: 1px solid black;
        border-radius: 10px;
    }
    #start {
        font-size: 40px;
        padding: 20px;
        transition: all 0.5s;
    }
    #start:hover {
        background-color: black;
        color: white;
    }
    .message {
        font-size: 20px;
        margin: 20px;
    }
</style>
</head>
<body>
    <h1>ドミノ</h1>
    <div id="board"></div>
    <div class="player" id="player1">Player1</div>
    <div id="player1Hand"></div>
    <div class="player" id="player2">Player2</div>
    <div id="player2Hand"></div>
    <div class="message"></div>
    <button id="start">START</button>

// 開始ボタンをクリックした時の処理
        document.getElementById("start").addEventListener("click", function() {
            if (!gameStarted) {
                // ゲームを開始
                gameStarted = true;
                document.getElementById("start").style.display = "none";
                startGame();
            }
        });
        
        // ゲーム開始
        function startGame() {
            // ドミノをシャッフル
            dominoSet.sort(function() {
                return Math.random()-0.5;
            });
            // ドミノを配る
            for (let i=0; i<7; i++) {
                player1Hand.push(dominoSet.pop());
                player2Hand.push(dominoSet.pop());
            }
            // プレイヤー1の手札を表示
            displayHand(player1Hand, "player1Hand");
            // プレイヤー2の手札を表示
            displayHand(player2Hand, "player2Hand");
            // 最初の駒を置く
            let firstDomino = dominoSet.pop();
            board.push(firstDomino);
            displayDomino(firstDomino, "board");
            // メッセージを表示
            showMessage("Player1 starts");
        }

// 手札を表示
        function displayHand(hand, elementId) {
            let handElement = document.getElementById(elementId);
            handElement.innerHTML = "";
            for (let i=0; i<hand.length; i++) {
                let dominoElement = createDomino(hand[i]);
                dominoElement.addEventListener("click", function() {
                    selectDomino(dominoElement, hand, i, elementId);
                });
                handElement.appendChild(dominoElement);
            }
        }

// ドミノを選択した時の処理
        function selectDomino(dominoElement, hand, index, elementId) {
            if (currentPlayer == 1 && elementId == "player1Hand" || currentPlayer == 2 && elementId == "player2Hand") {
                // 選択されたドミノを取り消す
                let selected = document.getElementsByClassName("selected");
                for (let i=selected.length-1; i>=0; i--) {
                    selected[i].classList.remove("selected");
                }
                // 選択されたドミノをプレイヤーの手札から取り出す
                let domino = hand.splice(index, 1)[0];
                // 選択されたドミノを表示
                dominoElement.classList.add("selected");
                // 選択されたドミノが置けるかどうかチェック
                let canPlace = checkDomino(domino);
                if (canPlace) {
                    // ドミノを置く
                    board.push(domino);
                    let boardElement = document.getElementById("board");
                    boardElement.innerHTML = "";
                    for (let i=0; i<board.length; i++) {
                        let dominoElement = createDomino(board[i]);
                        boardElement.appendChild(dominoElement);
                    }
                    // 手札を更新
                    displayHand(hand, elementId);
                    // 次のプレイヤーに交代
                    changePlayer();
                } else {
                    showMessage("You can't place this domino");
                }
            }
        }

// ドミノを作成
        function createDomino(domino) {
            let dominoElement = document.createElement("div");
            dominoElement.classList.add("domino");
            let number1Element = document.createElement("div");
            number1Element.classList.add("number");
            number1Element.textContent = getEmoji(domino[0]);
            dominoElement.appendChild(number1Element);
            if (domino[0] != domino[1]) {
                let number2Element = document.createElement("div");
                number2Element.classList.add("number");
                number2Element.classList.add("horizontal");
                number2Element.textContent = getEmoji(domino[1]);
                dominoElement.appendChild(number2Element);
            }
            return dominoElement;
        }

// 絵文字を取得
        function getEmoji(number) {
            let emojis = ["🀰", "🀱", "🀲", "🀳", "🀴", "🀵", "🀶"];
            return emojis[number];
        }

// ドミノが置けるかどうかチェック
        function checkDomino(domino) {
            if (board.length == 1) {
                return true;
            } else {
                if (domino[0] == board[0][0]) {
                    return true;
                } else if (domino[1] == board[0][0]) {
                    return true;
                } else if (domino[0] == board[board.length-1][1]) {
                    return true;
                } else if (domino[1] == board[board.length-1][1]) {
                    return true;
                } else {
                    return false;
                }
            }
        }

// 次のプレイヤーに交代
        function changePlayer() {
            if (currentPlayer == 1) {
                currentPlayer = 2;
                showMessage("Player2's turn");
            } else {
                currentPlayer = 1;
                showMessage("Player1's turn");
            }
        }

// メッセージを表示
        function showMessage(message) {
            let messageElement = document.getElementsByClassName("message")[0];
            messageElement.textContent = message;
        }
    </script>
</body>
</html>