#javascript #html #jquery
#javascript #HTML #jquery
Вопрос:
Я создаю игру в войну между игроком и компьютером. Когда я нажимаю кнопку раздачи, массив перетасовывается для каждого игрока. При нажатии кнопки воспроизведения массив карт отображается в 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>
Помощь приветствуется!
Комментарии:
1. Не создавайте 52 случайных индекса в своей колоде карт. Просто пройдите по массиву карт и поменяйте каждую из них на другую, выбранную случайным образом.
2. Как бы это выглядело? Я довольно новичок в массивах.
3. ваша
deckпеременная представляет собой массив. Я опубликую пример.
Ответ №1:
"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);
}
}