我正在制作一个玩家和电脑之间的战争游戏。当我点击交易按钮时，每个玩家都会洗牌。当单击播放按钮时，纸牌阵列将在div中显示为图像。我遇到的问题是这些卡片正在重复，我需要帮助如何使它们不重复。这是我的JS:
$(document).ready(function() {
document.getElementById('play').disabled = true;
function card(name, suit, value, trump) {
this.name = name;
this.suit = suit;
this.value = value;
this.trump = trump;
}
var deck = [
new card('Ace', 'Hearts', 11, 142),
new card('Two', 'Hearts', 2, 22),
new card('Three', 'Hearts', 3, 32),
new card('Four', 'Hearts', 4, 42),
new card('Five', 'Hearts', 5, 52),
new card('Six', 'Hearts', 6, 62),
new card('Seven', 'Hearts', 7, 72),
new card('Eight', 'Hearts', 8, 82),
new card('Nine', 'Hearts', 9, 92),
new card('Ten', 'Hearts', 10, 102),
new card('Jack', 'Hearts', 10, 112),
new card('Queen', 'Hearts', 10, 122),
new card('King', 'Hearts', 10, 132),
new card('Ace', 'Diamonds', 11, 141),
new card('Two', 'Diamonds', 2, 21),
new card('Three', 'Diamonds', 3, 31),
new card('Four', 'Diamonds', 4, 41),
new card('Five', 'Diamonds', 5, 51),
new card('Six', 'Diamonds', 6, 61),
new card('Seven', 'Diamonds', 7, 71),
new card('Eight', 'Diamonds', 8, 81),
new card('Nine', 'Diamonds', 9, 91),
new card('Ten', 'Diamonds', 10, 101),
new card('Jack', 'Diamonds', 10, 111),
new card('Queen', 'Diamonds', 10, 121),
new card('King', 'Diamonds', 10, 131),
new card('Ace', 'Clubs', 11, 143),
new card('Two', 'Clubs', 2, 23),
new card('Three', 'Clubs', 3, 33),
new card('Four', 'Clubs', 4, 43),
new card('Five', 'Clubs', 5, 53),
new card('Six', 'Clubs', 6, 63),
new card('Seven', 'Clubs', 7, 73),
new card('Eight', 'Clubs', 8, 83),
new card('Nine', 'Clubs', 9, 93),
new card('Ten', 'Clubs', 10, 103),
new card('Jack', 'Clubs', 10, 113),
new card('Queen', 'Clubs', 10, 123),
new card('King', 'Clubs', 10, 133),
new card('Ace', 'Spades', 11, 144),
new card('Two', 'Spades', 2, 24),
new card('Three', 'Spades', 3, 34),
new card('Four', 'Spades', 4, 44),
new card('Five', 'Spades', 5, 54),
new card('Six', 'Spades', 6, 64),
new card('Seven', 'Spades', 7, 74),
new card('Eight', 'Spades', 8, 84),
new card('Nine', 'Spades', 9, 94),
new card('Ten', 'Spades', 10, 104),
new card('Jack', 'Spades', 10, 114),
new card('Queen', 'Spades', 10, 124),
new card('King', 'Spades', 10, 134)
];
// var test = '!$.inArray(index, used_cards) > -1';
// console.log('test ' + test);
var used_cards = new Array();
// var pTotal = 0;
// pTotal = pTotal + deck[num1].value + deck[num2].value;
function getRandom(num) {
var my_num = Math.floor(Math.random() *num);
return my_num;
}
function playerHit() {
var good_player_card = false;
do{
var index = getRandom(52);
if ( !$.inArray(index, used_cards) > -1) {
good_player_card = true;
var c = deck[index];
used_cards[used_cards.length] = index;
$("<img>")
.attr('src', 'images/' + c.suit + '/' + c.name + '.jpg')
.appendTo('#pHand')
.fadeIn('1000');
}
}while (!good_player_card);
good_player_card = false;
}
function slickHit() {
var good_slick_card = false;
do{
var index = getRandom(52);
if ( !$.inArray(index, used_cards) > -1) {
good_slick_card = true;
var c = deck[index];
used_cards[used_cards.length] = index;
$("<img>")
.attr('src', 'images/' + c.suit + '/' + c.name + '.jpg')
.appendTo('#cHand')
.fadeIn('1500');
}
}while (!good_slick_card);
good_slick_card = false;
}
/* function slickHit() {
var index = getRandom)(52)
$.inArray(index)
} */
$('#deal').one('click', function(){
var player = prompt("Please enter your name.")
if (player != null) {
document.getElementsByClassName("pName")[0].innerHTML = player;
document.getElementsByClassName("pName")[1].innerHTML = player;
}
document.getElementById('play').disabled = false;
let card_count = 26;
$('#cardCount').innerHTML = card_count;
});
$('#play').click(function(){
$('img').remove();
playerHit();
slickHit();
});
$("#newPlayer").click(function(){
var newPlayer = prompt("Please enter your name.")
if (newPlayer != null) {
document.getElementsByClassName("pName")[0].innerHTML = newPlayer;
document.getElementsByClassName("pName")[1].innerHTML = newPlayer;
}
playerHit();
slickHit();
$('img').remove();
});
});
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Card Game</title>
<link href="styles/normalilze.css" rel="stylesheet">
<link href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<div id="main">
<h1> Card Game </h1>
<div id="left">
<div id="pHand">
<br />
<!-- Using JavaScript replace the word 'Player' with the name of
the person playing the game-->
<h2 class="pName">Player</h2>
</div>
<div id="cHand">
<h2>Slick</h2>
</div>
<div id="but">
<button id="newPlayer">New player</button>
<button id="deal">Deal</button>
<button id="play">Play</button>
</div>
</div>
<div id='right'>
<h2>Card Count:</h2>
<!-- Using JavaSCript enter the number of remaining cards in the 'Players' hand
in the p tag below-->
<p id="cardCount"></p>
<br />
<!-- Using JavaSCript replace the word 'Player' with the name of
the person playing the game-->
<h2 class="pName">Player</h2>
<h2 id="pName2">:</h2>
<!-- Using jQuery insert the current 'Player' score in the p tag
below -->
<p id="pScore"></p>
<br />
<h2 id="cName">Slick:</h2>
<!-- Using jQuery insert the current 'Slick' score in the p tag
below -->
<p id="cScore"></p>
<!-- add and style winning message in the
following div -->
<div id="win"> </div>
</div>
</div>
<script src="scripts/jquery-3.2.1.min.js"></script>
<script src="scripts/jQ-War.js"></script>
</body>
</html>
感谢您的帮助！
"use strict";
window.addEventListener('load', onLoaded, false);
function onLoaded(evt)
{
method1();
console.log('----------');
method2();
}
class cardT
{
constructor(name, suit, value, trump)
{
this.name = name;
this.suit = suit;
this.value = value;
this.trump = trump;
}
}
function method1()
{
// Method 1, yours
var cards = [
new cardT('Ace', 'Hearts', 11, 142),
new cardT('Two', 'Hearts', 2, 22),
new cardT('Three', 'Hearts', 3, 32),
new cardT('Four', 'Hearts', 4, 42),
new cardT('Five', 'Hearts', 5, 52),
new cardT('Six', 'Hearts', 6, 62),
new cardT('Seven', 'Hearts', 7, 72),
new cardT('Eight', 'Hearts', 8, 82),
new cardT('Nine', 'Hearts', 9, 92),
new cardT('Ten', 'Hearts', 10, 102),
];
// keep record of the randomly chosen indices
var indices = [];
for (var i=0; i<cards.length; i++)
{
let curIndex = Math.floor(Math.random()*cards.length);
indices.push(curIndex);
console.log( cards[curIndex].name, cards[curIndex].suit );
}
console.log(indices);
}
function method2()
{
var cards = [
new cardT('Ace', 'Hearts', 11, 142),
new cardT('Two', 'Hearts', 2, 22),
new cardT('Three', 'Hearts', 3, 32),
new cardT('Four', 'Hearts', 4, 42),
new cardT('Five', 'Hearts', 5, 52),
new cardT('Six', 'Hearts', 6, 62),
new cardT('Seven', 'Hearts', 7, 72),
new cardT('Eight', 'Hearts', 8, 82),
new cardT('Nine', 'Hearts', 9, 92),
new cardT('Ten', 'Hearts', 10, 102),
];
for (var index=0; index<cards.length; index++)
{
// pick a position at random
var randIndex = Math.floor(Math.random()*cards.length);
// swap the current card with the randomly chosen one
var tmp = cards[index];
cards[index] = cards[randIndex];
cards[randIndex] = tmp;
}
// display them all
for (var i=0; i<cards.length; i++)
{
console.log(cards[i].name, cards[i].suit);
}
}