如何在JavaScript纸牌游戏中比较2张纸牌 [英] How to compare 2 cards in a JavaScript card game
问题描述
我想用JavaScript创建一个游戏，该游戏随机选择52张随机纸牌(没有小丑)，并一次比较一张纸牌，同时根据纸牌比最后一张被选择的纸牌低来比较这些纸牌.
I want to create a game with JavaScript that randomly selects 52 random cards (no jokers) and displays the cards one at a time while comparing the cards depending on the card being lower than the last card that was selected.
所以，这是一场高低纸牌游戏.
So, it's a high and low card game.
这是我的代码:
CSS
body {
border: 2px solid #f45f;
}
div {
background:red;
}
#card {
font-size:40px;
background:red;
}
JavaScript
var cards = [
["♠","♣", "♦", "♥","♠","♣", "♦", "♥","♠","♣", "♦", "♥","♠","♣", "♦", "♥",
"♠","♣", "♦", "♥","♠","♣", "♦", "♥","♠","♣", "♦", "♥","♠","♣", "♦", "♥",
"♠","♣", "♦", "♥","♠","♣", "♦", "♥","♠","♣", "♦", "♥","♠","♣", "♦", "♥",
"♠","♣", "♦", "♥"],
[1,1,1,1,2,2,2,2,3,3,3,3,4,4,4,4,5,5,5,5,6,6,6,6,7,7,7,7,8,8,8,8,9,9,9,9,10,10,10,10,11,11,11,11,12,12,12,12,13,13,13,13]
];
var x=0;
var newCard=[],[];
function Start(){
document.getElementById("welcome").innerHTML ="<br>Welcome to the high and low card game ! :)";
document.getElementById("test").style.display = 'block';
document.getElementById("test2").style.display = 'block';
document.getElementById("test1").style.display = 'none';
}
function highOrLow(answer){
var answer=answer;
var rand=Math.floor(Math.random() * 50) + 1;
document.getElementById("res1").innerHTML =rand;
document.getElementById("res").innerHTML =x;
document.getElementById("question").innerHTML = "Is The next card higher or lower ?";
document.getElementById("name").innerHTML = answer;
document.getElementById("card").innerHTML = cards[1][rand]+cards[0][rand];
if (x < 51) {
return x++;
}
else if (x = 51) {
document.getElementById("welcome").innerHTML ="";
document.getElementById("res1").innerHTML ="";
document.getElementById("res").innerHTML ="";
document.getElementById("card").innerHTML ="";
document.getElementById("question").innerHTML = "";
document.getElementById("test").style.display = 'none';
document.getElementById("test2").style.display = 'none';
document.getElementById("test").style.display = 'none';
document.getElementById("test2").style.display = 'none';
document.getElementById("test1").style.display = 'block';
document.getElementById("name").innerHTML = "the game is over";
return x = 0;
}
}
function clbutton() {
document.getElementById("test").style.display = 'none';
document.getElementById("test2").style.display = 'none';
}
HTML
<body onload="clbutton()">
<div id="top">
<center><h1>High Low Card Game</h1></center>
</div>
<br>
<p>the rules are simple chose if the next card is high or is the card low and try to beat your own score !
♠
♣
♦
♥
</p>
<br>
<button id="test1" type="button"
onclick="setTimeout( Start(), 1000000 )">
Start Game</button>
<span id="welcome"></span>
<p id="name"></p>
<p id="res"></p>
<br>
<p id="res1"></p>
<br>
<span id="card"></span>
<br>
<span id="question"></span>
<button id="test" type="button"
onclick="highOrLow('high')" >
Higher</button>
<br>
<button id="test2" type="button"
onclick="highOrLow('low')">
Lower</button>
<br>
<span id="high"></span>
</body>
推荐答案
首先，摆脱var newCard = [], [];.这会在您的代码中导致语法错误，因此您还是不会使用它.
First off, get rid of var newCard = [], [];. It is causing a syntax error in your code and you don't use it anyway.
接下来，在CSS中为#test和#test2按钮设置display: none，这样就不必在body加载时调用函数来完成此操作.
Next, set display: none in your css for your #test and #test2 buttons, that way you don't have to call a function to do it in the onload of your body.
您结束游戏的else if语句应从x = 51更改为x === 51.
Your else if statement to end the game should be changed from x = 51 to x === 51.
要比较卡片，您需要将最后一张卡片的值存储在变量中.在下面的示例中，我将其称为lastCard.使用var val = cards[1][rand]获取实际的卡值，而不是数组中的索引.然后，您可以将其与lastCard值进行比较.比较之后，您设置lastCard = val，以便下一轮的本轮卡为lastCard.在下面的示例中，我还实现了score，以向您显示比较有效.
For comparing the cards, you need to store the last card's value in a variable. In the example below, I have called this lastCard. Use var val = cards[1][rand] to get the actual card value rather than the index in the array. Then you can compare it to the lastCard value. After you do the comparison, you then set lastCard = val, so that this round's card will be lastCard for the next round. I have also implemented a score in the example below to show you that the comparison is working.
这是比较逻辑:
var val = cards[1][rand];
if (answer === 'high' && val > lastCard) {
document.getElementById("score").innerHTML = "Score: " + (++score);
} else if (answer === 'low' && val < lastCard) {
document.getElementById("score").innerHTML = "Score: " + (++score);
}
lastCard = val;
我还添加了一个displayVal变量.如果卡的实际数值是1，11，12或13，则用于将显示的值更改为A，J，Q或K.它存储在此单独的变量中，因此不会影响数值比较.
I also added a displayVal variable. This is used to change the displayed value to A, J, Q or K if the actual numeric value of the card is 1, 11, 12 or 13. It is stored in this separate variable so that it will not affect the numerical comparison.
这应该使您朝正确的方向前进.
This should get you going in the right direction.
var cards = [
["♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥",
"♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥",
"♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥", "♠", "♣", "♦", "♥",
"♠", "♣", "♦", "♥"
],
[1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 6, 6, 6, 6, 7, 7, 7, 7, 8, 8, 8, 8, 9, 9, 9, 9, 10, 10, 10, 10, 11, 11, 11, 11, 12, 12, 12, 12, 13, 13, 13, 13]
];
var x = 0;
var lastCard = 0;
var score = 0;
function Start() {
score = 0;
document.getElementById("score").innerHTML = "Score: " + score;
document.getElementById("welcome").innerHTML = "<br>Welcome to the high and low card game ! :)";
document.getElementById("test").style.display = 'block';
document.getElementById("test2").style.display = 'block';
document.getElementById("test1").style.display = 'none';
document.getElementById("score").style.display = 'block';
document.getElementById("question").innerHTML = "Is The next card higher or lower ?";
highOrLow(null);
}
function highOrLow(answer) {
var rand = Math.floor(Math.random() * 50) + 1;
var val = cards[1][rand];
var suit = cards[0][rand];
var displayVal = val;
switch (displayVal) {
case 1:
displayVal = 'A';
break;
case 11:
displayVal = 'J';
break;
case 12:
displayVal = 'Q';
break;
case 13:
displayVal = 'K';
break;
}
document.getElementById("card").innerHTML = displayVal + suit;
if (answer === 'high' && val > lastCard) {
document.getElementById("score").innerHTML = "Score: " + (++score);
} else if (answer === 'low' && val < lastCard) {
document.getElementById("score").innerHTML = "Score: " + (++score);
}
lastCard = val;
if (x < 51) {
x++;
} else if (x === 51) {
document.getElementById("welcome").innerHTML = "";
document.getElementById("card").innerHTML = "";
document.getElementById("question").innerHTML = "";
document.getElementById("test").style.display = 'none';
document.getElementById("test2").style.display = 'none';
document.getElementById("test1").style.display = 'block';
document.getElementById("name").innerHTML = "the game is over";
x = 0;
}
}
body {
border: 2px solid #f45f;
}
div {
background: red;
}
#card {
font-size: 40px;
background: red;
}
#test,
#test2,
#score {
display: none;
}
<body>
<div id="top">
<center>
<h1>High Low Card Game</h1>
</center>
</div>
<br>
<p>the rules are simple chose if the next card is high or is the card low and try to beat your own score ! ♠ ♣ ♦ ♥
</p>
<br>
<button id="test1" type="button" onclick="setTimeout( Start(), 1000000 )">
Start Game</button>
<span id="welcome"></span>
<p id="name"></p>
<br>
<span id="card"></span>
<br>
<span id="question"></span>
<br>
<span id="score"></span>
<button id="test" type="button" onclick="highOrLow('high')">
Higher</button>
<br>
<button id="test2" type="button" onclick="highOrLow('low')">
Lower</button>
<br>
<span id="high"></span>
</body>
这篇关于如何在JavaScript纸牌游戏中比较2张纸牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
