我想创建一个带有JavaScript的游戏，随机选择52张随机卡片（没有笑话者）并一次显示一张卡片，同时比较卡片，具体取决于卡片低于最后选择的卡片。
所以，它是一款高低牌纸牌游戏。
这是我的代码：
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>
答案 0 :(得分：-2)
首先，摆脱var newCard = [], [];。它导致代码中出现语法错误，无论如何都不会使用它。
接下来，在您的display: none和#test按钮的css中设置#test2，这样您就不必调用函数来执行body on { 1}}。
结束游戏的else if语句应从x = 51更改为x === 51。
为了比较卡片，您需要将最后一张卡片的值存储在变量中。在下面的示例中，我调用了此lastCard。使用var val = cards[1][rand]获取实际卡值而不是数组中的索引。然后，您可以将其与lastCard值进行比较。在进行比较后，然后设置lastCard = val，以便下一轮的这一轮卡片为lastCard。我还在下面的示例中实现了score，以向您展示比较是否有效。
以下是比较逻辑：
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变量。如果卡片的实际数值为A，则{{1}用于将显示的值更改为J，Q，K或1 }，11或12。它存储在这个单独的变量中，因此不会影响数值比较。
这应该让你朝着正确的方向前进。
13var 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;
}