如何修复“未捕获的类型错误：player[0]未定义”？

问题描述 投票：0回答：2

我正在开发一个纸牌游戏战争项目，但我遇到了变量与数组组合的问题。它说

Uncaught TypeError: player[0] is undefined
。 我尝试将
player[0][0]
变成
player[0,0]
，但无济于事，因为它只是说
Uncaught DOMException: Node.appendChild: The new child is an ancestor of the parent
，所以老实说我不知道。 如果这只是一个拼写错误或无法复制，我很抱歉浪费您的时间。

这是我以前的代码：

var player = [];
var computer = [];
var playedCards = [];
var cards = [];
var $player = $("#player");
var $playerNumber = $("#playerNumber");
var $playerSuit = $("#playerSuit");
var $computer = $("#computer");
var $computerNumber = $("#computernumber");
var $computerSuit = $("#computerSuit");
var $draw = $("#draw");
var $winner = $("#winner");
var $playerCards = $("#playerCards");
var $computerCards = $("#computerCards");
var number1;
var number2; 
var suit1;
var suit2;
var numberImg1;
var numberImg2;

for (i=1; i<14; i++){
    for (k=1; k<5; k++) {
        var j = [i,k];
    playedCards.push(j);
    }
}

cards.shuffle = function() {
    console.log("shuffle");
    var input = this
    for (var i = cards.length-1; i >=0; i--) {
        var randomIndex = Math.floor(Math.random()*(i+1));
        var itemAtIndex = cards[randomIndex][0];
        var itemAtSecond = cards[randomIndex][1];
        input[randomIndex][0] = input[i][0];
        input[randomIndex][1] = input[i][1];
        input[i][0] = itemAtIndex;
        input[i][1] = itemAtSecond;
  }
    return input
}

cards.shuffle();

function assign(){
    if(player.length == 0 || computer.length == 0){
        endgame();
    }
    $playerSuit.empty();
    $computerSuit.empty();
    var number1=player[0][0]; //This line has the error
    var number2=computer[0][0]; //If that one ^ does, then this one likely will too
    $playerNumber.html(number1);
    $computernumber.html(number2);
    suit1 = player[0][1]; //That also applies to this...
    suit2 = computer[0][1]; //...and this
    if (suit1 == 1) {
        suit1 = "<img src='resources/images/heart.png"
    }
    if (suit1 == 2) {
        suit1 = "<img src='resources/images/club.png"
    }
    if (suit1 == 3) {
        suit1 = "<img src='resources/images/diamond.png"
    }
    if (suit1 == 4) {
        suit1 = "<img src='resources/images/spade.png"
    }
    if (suit2 == 1) {
        suit2 = "<img src='resources/images/heart.png"
    }
    if (suit2 == 2) {
        suit2 = "<img src='resources/images/club.png"
    }
    if (suit2 == 3) {
        suit2 = "<img src='resources/images/diamond.png"
    }
    if (suit2 == 4) {
        suit2 = "<img src='resources/images/spade.png"
    } 

    if (number1<11){

        for (i=0; i<number1; i++) {
        
        $firstPlayerSuit.append(suit1);
        
        };
        
        } else {
        
        if (number1 == 11) {
        numberImg1 = "<img src='resources/images/jack.png'/>";
        $firstPlayerSuit.append(suit1);
        $firstPlayerNumber.html(numberImg1);
        }
        
        if (number1 == 12) {
        numberImg1 = "<img src='resources/images/queen.png'/>";
        $firstPlayerSuit.append(suit1);
        $firstPlayerNumber.html(numberImg1);    
        }
    
        if (number1 == 13) {
        numberImg1 = "<img src='resources/images/king.png'/>";
        $firstPlayerSuit.append(suit1);
        $firstPlayerNumber.html(numberImg1);
        }
        }
        if (number2<11){

            for (i=0; i<number2; i++) {
            
            $firstPlayerSuit.append(suit1);
            
            };
            
            } else {
            
            if (number2 == 11) {
            numberImg2 = "<img src='resources/images/jack.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg2);
            }
            
            if (number2 == 12) {
            numberImg2 = "<img src='resources/images/queen.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg2);    
            }
        
            if (number2 == 13) {
            numberImg2 = "<img src='resources/images/king.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg2);
            }
            }
    for (i=0; i<number1; i++) {
        $playerSuit.append(suit1);
    };
    for (i=0; i<number2; i++) {
        $computerSuit.append(suit2);
    }

    playedCards.push(player[0]);
    playedCards.push(computer[0]);

    player.splice(0,1);
    computer.splice(0,1);

    console.log("call greater");
    greater();
}

function war(){
    $winner.html("Time for a war!")
    console.log("war");
        for (i=0; i<3; i++){
            playedCards.push(player[0]);
            playedCards.push(computer[0]);
            player.splice(0,1);
            computer.splice(0,1);
        }
        $playerSuit.css("display", "none");
        $computerSuit.css("display", "none");
        numberImg1 = "<img style='height:14rem;' src='resources/images/card.png'/>";
        numberImg2 = "<img style='height:14rem;' src='resources/images/card.png'/>";
        console.log("call greater");
        greater();
}

function greater(){
    console.log("greater");
    console.log("in greater how many played ", playedCards.length);
    if (number1 > number2) {
        $winner.html("Player Wins");
        for (i=0; i<playedCards.length; i++) {
            player.push(playedCards[i])
        }
    } else if (number1 < number2) {
        $winner.html("Computer Wins");
        for (i=0; i<playedCards.length; i++) {
            computer.push(playedCards[i])
        }
    } else if (number1 == number2) {
        console.log("call war");
        war();
        }
    playedCards = [];
    $playerCards.html(player.length);
    $computerCards.html(computer.length);
}

$draw.on("click", function() {
    assign();
})

function endgame(){
if(player.length == 0){
    $winner.html("Game over </br> You have no more cards </br> You lose");
    $computerNumber.html("Win");
    $playerNumber.html("Lose");
}
if(computer.length == 0){
    $winner.html("Game over </br> Computer has no more cards </br> You win");
    $computerNumber.html("Lose");
    $playerNumber.html("Win");
}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="gameboard" class="flex">
<div class="flexColumn">
<h1>War</h1>
<h2 id="winner">Winner</h2>
<h3>Player has <span id="playerCards"></span> cards.</h3>
<h3>Computer has <span id="computerCards"></span> cards.</h3>
</div>
<div class="flex">
    <div id="player" class="flexColumn player">
        <h2>Player</h2>
        <div id="playerNumber" class="number">
        </div>
        <div id="playerSuit" class="suit">
        </div>
    </div>
<h2 id="draw">Draw</h2>
<div id="computer" class="flexColumn player">
    <h2>Computer</h2>
    <div id="computerNumber" class="number">
    </div>
    <div id="computerSuit" class="suit">
    </div>
   </div>
  </div>
 </div>
</div>

还有一个屏幕截图，以便您自己查看（无关，但这次我没有使用此类光栅颜色） 我的项目的屏幕截图，包括错误消息

javascript playing-cards
2个回答
0
投票

在您的 JavaScript 中，您在调用 

endgame()
后似乎缺少 return 语句。由于缺少 return 语句，您为确保玩家和计算机 2D 数组不为空而进行的检查无法停止要求 2 个数组至少有一个条目的代码的执行。下面的代码应该可以解决您的问题。

var player = [];
var computer = [];
var playedCards = [];
var cards = [];
var $player = $("#player");
var $playerNumber = $("#playerNumber");
var $playerSuit = $("#playerSuit");
var $computer = $("#computer");
var $computerNumber = $("#computernumber");
var $computerSuit = $("#computerSuit");
var $draw = $("#draw");
var $winner = $("#winner");
var $playerCards = $("#playerCards");
var $computerCards = $("#computerCards");
var number1;
var number2;
var suit1;
var suit2;
var numberImg1;
var numberImg2;

for (i = 1; i < 14; i++) {
    for (k = 1; k < 5; k++) {
        var j = [i, k];
        playedCards.push(j);
    }
}

cards.shuffle = function () {
    console.log("shuffle");
    var input = this
    for (var i = cards.length - 1; i >= 0; i--) {
        var randomIndex = Math.floor(Math.random() * (i + 1));
        var itemAtIndex = cards[randomIndex][0];
        var itemAtSecond = cards[randomIndex][1];
        input[randomIndex][0] = input[i][0];
        input[randomIndex][1] = input[i][1];
        input[i][0] = itemAtIndex;
        input[i][1] = itemAtSecond;
    }
    return input
}

cards.shuffle();

function assign() {
    if (player.length == 0 || computer.length == 0) {
        endgame();
        return;
    }
    $playerSuit.empty();
    $computerSuit.empty();
    var number1 = player[0][0]; //This line has the error
    var number2 = computer[0][0]; //If that one ^ does, then this one likely will too
    $playerNumber.html(number1);
    $computernumber.html(number2);
    suit1 = player[0][1]; //That also applies to this...
    suit2 = computer[0][1]; //...and this
    if (suit1 == 1) {
        suit1 = "<img src='resources/images/heart.png"
    }
    if (suit1 == 2) {
        suit1 = "<img src='resources/images/club.png"
    }
    if (suit1 == 3) {
        suit1 = "<img src='resources/images/diamond.png"
    }
    if (suit1 == 4) {
        suit1 = "<img src='resources/images/spade.png"
    }
    if (suit2 == 1) {
        suit2 = "<img src='resources/images/heart.png"
    }
    if (suit2 == 2) {
        suit2 = "<img src='resources/images/club.png"
    }
    if (suit2 == 3) {
        suit2 = "<img src='resources/images/diamond.png"
    }
    if (suit2 == 4) {
        suit2 = "<img src='resources/images/spade.png"
    }

    if (number1 < 11) {

        for (i = 0; i < number1; i++) {

            $firstPlayerSuit.append(suit1);

        };

    } else {

        if (number1 == 11) {
            numberImg1 = "<img src='resources/images/jack.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg1);
        }

        if (number1 == 12) {
            numberImg1 = "<img src='resources/images/queen.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg1);
        }

        if (number1 == 13) {
            numberImg1 = "<img src='resources/images/king.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg1);
        }
    }
    if (number2 < 11) {

        for (i = 0; i < number2; i++) {

            $firstPlayerSuit.append(suit1);

        };

    } else {

        if (number2 == 11) {
            numberImg2 = "<img src='resources/images/jack.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg2);
        }

        if (number2 == 12) {
            numberImg2 = "<img src='resources/images/queen.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg2);
        }

        if (number2 == 13) {
            numberImg2 = "<img src='resources/images/king.png'/>";
            $firstPlayerSuit.append(suit1);
            $firstPlayerNumber.html(numberImg2);
        }
    }
    for (i = 0; i < number1; i++) {
        $playerSuit.append(suit1);
    };
    for (i = 0; i < number2; i++) {
        $computerSuit.append(suit2);
    }

    playedCards.push(player[0]);
    playedCards.push(computer[0]);

    player.splice(0, 1);
    computer.splice(0, 1);

    console.log("call greater");
    greater();
}

function war() {
    $winner.html("Time for a war!")
    console.log("war");
    for (i = 0; i < 3; i++) {
        playedCards.push(player[0]);
        playedCards.push(computer[0]);
        player.splice(0, 1);
        computer.splice(0, 1);
    }
    $playerSuit.css("display", "none");
    $computerSuit.css("display", "none");
    numberImg1 = "<img style='height:14rem;' src='resources/images/card.png'/>";
    numberImg2 = "<img style='height:14rem;' src='resources/images/card.png'/>";
    console.log("call greater");
    greater();
}

function greater() {
    console.log("greater");
    console.log("in greater how many played ", playedCards.length);
    if (number1 > number2) {
        $winner.html("Player Wins");
        for (i = 0; i < playedCards.length; i++) {
            player.push(playedCards[i])
        }
    } else if (number1 < number2) {
        $winner.html("Computer Wins");
        for (i = 0; i < playedCards.length; i++) {
            computer.push(playedCards[i])
        }
    } else if (number1 == number2) {
        console.log("call war");
        war();
    }
    playedCards = [];
    $playerCards.html(player.length);
    $computerCards.html(computer.length);
}

$draw.on("click", function () {
    assign();
})

function endgame() {
    if (player.length == 0) {
        $winner.html("Game over </br> You have no more cards </br> You lose");
        $computerNumber.html("Win");
        $playerNumber.html("Lose");
    }
    if (computer.length == 0) {
        $winner.html("Game over </br> Computer has no more cards </br> You win");
        $computerNumber.html("Lose");
        $playerNumber.html("Win");
    }
}
-2
投票

我认为问题出在初始化上。我不明白你想实现什么，但是 

var player = [];
的声明意味着玩家是一个数组，因此它是一维的，并且只能通过 
player[i]
来访问它的元素，而不是 
player[i][j]

来完成

如果您希望能够访问 

var player = [[]]
，请尝试声明 
player[i][j]
。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.