如何在制作简单的纸牌游戏(Javascript）时给卡牌一个数值

How to give a card a numerical value when making a simple card game (Javascript)

本文关键字：一个 Javascript 简单 纸牌游戏      更新时间：2023-09-26

如果这听起来完全愚蠢，请道歉，但在编码方面我是一个彻头彻尾的笨蛋！我正在尝试使用一副牌制作更高或更低的猜谜游戏（即玩家猜测下一张牌会高于还是低于显示的一张），但我真的不明白如何给每张牌一个值。

例如，我想给 Ace 卡一个值"1"，这样人们就可以猜测下一张牌是高于还是低于 1。

我知道涉及数组和类，但我似乎找不到用简单的英语解释它的教程。这是我到目前为止的代码（是的，我知道这很可怕！

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled</title>
<script language="javascript" type="text/javascript">

var ask=window.confirm("Do you understand the rules of Higher or Lower?")
if (ask)
window.alert("Lets go!")
else
window.alert("Guess if the next card shown will be higher or lower than the current card.")
function rollDice()
{
var diceArray = ["card0.jpg","card1.jpg","card2.jpg","card3.jpg","card4.jpg","card5.jpg"];
var pickCard = diceArray[Math.floor(Math.random() * diceArray.length)];
document.getElementById("cards").src = pickCard;
}

</script>
<link rel="stylesheet" href="teststyle.css" type="text/css">
</head>
<body style="text-align: center;">
<br>
<big style="font-weight: bold; font-family: Helvetica,Arial,sans-serif;"><big><big>HIGHER
OR LOWER?</big></big></big><br>
<h3>Use your knowledge of probability to guess if the next card will be
higher or lower!</h3>
<br>
<br>
<img src="card5.jpg" onload="pickCard()" id="cards"><br>
<br>
<span
style="font-weight: bold; font-family: Helvetica,Arial,sans-serif;">VALUES</span><span
style="font-family: Helvetica,Arial,sans-serif;">: ACE, TWO, THREE,
FOUR, FIVE, SIX, SEVEN, EIGHT, NINE, TEN, JACK, QUEEN, KING</span><br>
<br>
<br>
</body>
</html>

我想你可能会发现将每张卡表示为一个对象很有用：

{
    imagePath: "card0.jpg",
    value: 1,
    name: "Ace"
}

您可以将这些放在阵列中：

var diceArray = [
    {
        imagePath: "card0.jpg",
        value: 1,
        name: "Ace"
    },
    {
        imagePath: "card1.jpg",
        value: 2,
        name: "Two"
    },
    // and so on...
];
var pickCard = diceArray[Math.floor(Math.random() * diceArray.length)];
document.getElementById("cards").src = pickCard.imagePath;
var pickedValue = pickCard.value;

你可以看到，存储在pickCard中的结果现在是一个属性为 name 、 value 和 imagePath 的对象。您可以稍后根据需要添加其他属性（suit等）。

实际上取决于您的情况，但有几种方法可以做到这一点。我认为没有"正确"的方法。

您可以使用switch语句，但我认为更"javascript 方式"是映射您的值的对象文字，例如

  var cardValues = {
      "ace": 1,
      "king": 13,
      "queen": 12
  }
  //then you can get your card value from the 'name' very simply
  var value = cardValues["ace"] // => 1

我认为最简单的方法是使用对象数组，每个对象的位置对应于其值。像这样：

var diceArray = [
    {
        "card_name": "Ace",
        "value": 1,
        "card_image": "card0.jpg" // I'm guessing card0 is the ace, replace this with the correct card image if that is incorrect
    },
    {
        "card_name": "Two",
        "value": 2
        "card_image": "card1.jpg"
    }
    ... and so on
]

您的随机选择仍然以相同的方式工作：

var pickCard = diceArray[Math.floor(Math.random() * diceArray.length)];

由于现在您正在处理一个对象而不是一个简单的字符串，因此您可以像这样访问其数据：

var cardImage = pickCard.card_image;
var cardName = pickCard.card_name;

或

var cardImage = pickCard["card_image"];
var cardName = pickCard["card_name"];
相关文章：