文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
MCP广场
返回腾讯云官网
社区首页 >问答首页 >产生卡面值有困难

问产生卡面值有困难
EN

Stack Overflow用户
提问于 2021-07-21 10:50:50
回答 1查看 42关注 0票数 1

我试图编辑一个初学者的JS/css/html卡游戏，我之前做的。

当用户卡在网页上被点击时，将显示两张卡的值。然后对这些值进行比较，并通知胜利者。胜利者的记分计数器然后增加1。

我最终试图根据数字值键生成正确的脸卡，并将其输出到html中。

只是想澄清一下，我需要Ace，King，Queen和Jack的卡面

​

代码语言：javascript
运行
复制
function randomizer(x) {
  var y = x * Math.random();
  var randnum = Math.round(y);
  return randnum;


}

function getcard(whosecard) {
  var suit = randomizer(3);
  var suitval;

  switch (suit) {
    case 0:
      suitval = "♠";
      document.getElementById(whosecard).style.color = "#000000";
      break;
    case 1:
      suitval = "♣";
      document.getElementById(whosecard).style.color = "#000000";
      break;
    case 2:
      suitval = "♥";
      document.getElementById(whosecard).style.color = "#e11b1b";
      break;
    case 3:
      suitval = "♦";
      document.getElementById(whosecard).style.color = "#e11b1b";
      break;
  }
  for (i = 0; i < 1; i++) {
    document.getElementById(whosecard).innerHTML = suitval;
    var card = randomizer(13) + 1;
    while (card == 1) {
      card = randomizer(13) + 1;
    }
  }
  var fullcard;
  switch (card) {
    case 11:
      cardval = "&#9822; J";
      break;
    case 12:
      cardval = "&#9819; Q";
      break;
    case 13:
      cardval = "&#9818; K";
      break;
    case 14:
      cardval = "&#65;";
      break;
    default:
      cardval = card;
      break;
  }
  //document.getElementById(whoseval).innerHTML = cardval;
  fullcard = suitval + " " + card;

  document.getElementById(whosecard).innerHTML = fullcard;

  return fullcard;

}

function startgame() {
  document.getElementById("startbutton").innerHTML = "";
  document.getElementById("yourcard").innerHTML = getcard("yourcard");
  document.getElementById("computercard").innerHTML = getcard("computercard");
  comparecard();
}

function comparecard() {
  var usercard = computercard = document.getElementById("yourcard").innerHTML;
  var computercard = document.getElementById("computercard").innerHTML;
  var winnermessage;
  var usernum = Number(usercard.substr(2));
  var computernum = Number(computercard.substr(2));



  if (usernum > computernum) {
    winnermessage = "You Win!";

  } else if (usernum < computernum) {
    winnermessage = "The Computer Wins!";


  } else {
    winnermessage = "It's a Tie!";



  }
  document.getElementById("winner").innerHTML = winnermessage;
  calcscore(winnermessage);

}

function calcscore(winner) {
  var compscore = Number(document.getElementById("computerscore").innerHTML);
  var yourscore = Number(document.getElementById("yourscore").innerHTML);

  switch (winner) {
    case "You Win!":
      yourscore++;
      document.getElementById("yourscore").innerHTML = yourscore;
      break;
    case "The Computer Wins!":
      compscore++;
      document.getElementById("computerscore").innerHTML = compscore;
      break;
    default:
      yourscore++;
      compscore++;
      document.getElementById("yourscore").innerHTML = yourscore;
      document.getElementById("computerscore").innerHTML = compscore;
      break;
  }
}
代码语言：javascript
运行
复制
body {
  font-family: Helvetica, Arial, sans-serif;
}

.cardcontain,
.keycontain,
.headcontain,
.scorecontain {
  display: flex;
  width: 800px;
  margin: auto;
}

.cardcontain>div {
  height: 225px;
  width: 135px;
  font-size: 2em;
  border: 2px solid #000000;
  border-radius: 5px;
  margin: 10px;
  padding: 20px;
  /*width:22%;*/
}

.cardback {
  background-color: hsl(34, 53%, 82%);
  background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px);
}

.startmessage {
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
  text-shadow: 5px 6px 2px #3c3b3b;
  cursor: pointer;
}

.keycontain>div {
  text-align: left;
  color: #888888;
  width: 50%;
}

.headcontain>div {
  text-align: center;
  color: #008800;
  width: 50%;
}

.scorecontain>p {
  text-align: center;
  width: 50%;
  color: #d0732d;
  font-size: 3em;
}

.cardgrid2 {
  display: block;
  vertical-align: top;
  color: #651e1e;
}

.cardgrid3 {}

button {
  background-color: #57ac75;
}


/*
            .winner::before {
                display:block;
                content:" ";
                height:400px;
    
            }
            */

.winner {
  font-size: 24px;
  font-weight: bolder;
  color: #3f7a3b;
  text-align: center;
}
代码语言：javascript
运行
复制
<div class="headcontain">
  <div>
    <h2 class="cardgrid">Computer</h2>
  </div>
  <div>
    <h2 class="cardgrid">You</h2>
  </div>
</div>
<div class="cardcontain">
  <div class="cardback"></div>
  <div id="computercard"></div>
  <div id="yourcard"></div>
  <div class="cardback startmessage" onclick="startgame()">
    <p id="startbutton">Click here to play!</p>
  </div>
</div>
<div class="scorecontain">
  <p id="computerscore">0</p>
  <p id="yourscore">0</p>
</div>
<p class="winner" id="winner"></p>
<div class="keycontain">
  <div>
    <h3>Key: first digit</h3>
    <ul>
      <li>0 = Spade</li>
      <li>1 = Club</li>
      <li>2 = Heart</li>
      <li>3 = Diamond</li>
    </ul>
  </div>
  <div>
    <h3>Key: second digit</h3>
    <ul>
      <li>11 = Jack</li>
      <li>12 = Queen</li>
      <li>13 = King</li>
      <li>14 = Ace</li>
    </ul>
  </div>
</div>

​

javascript
html
css
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-07-21 11:54:14

你用来生成卡片价值的逻辑是.很奇怪。为什么需要一个while循环呢？把那个扔了

实际上，switch语句中有正确的逻辑，其中设置了一个名为cardval的变量，但却忘记使用它。

代码语言：javascript
运行
复制
fullcard = suitval + " " + card; // should be cardval

工作片段

​

代码语言：javascript
运行
复制
function randomizer(x) {
  var y = x * Math.random();
  var randnum = Math.round(y);
  return randnum;


}

function getcard(whosecard) {
  var suit = randomizer(3);
  var suitval;

  switch (suit) {
    case 0:
      suitval = "&spades;";
      document.getElementById(whosecard).style.color = "#000000";
      break;
    case 1:
      suitval = "&clubs;";
      document.getElementById(whosecard).style.color = "#000000";
      break;
    case 2:
      suitval = "&hearts;";
      document.getElementById(whosecard).style.color = "#e11b1b";
      break;
    case 3:
      suitval = "&diams;";
      document.getElementById(whosecard).style.color = "#e11b1b";
      break;
  }
  var card = randomizer(13)
  var fullcard;
  switch (card) {
    case 11:
      cardval = "&#9822; J";
      break;
    case 12:
      cardval = "&#9819; Q";
      break;
    case 13:
      cardval = "&#9818; K";
      break;
    case 14:
      cardval = "&#65;";
      break;
    default:
      cardval = card;
      break;
  }
  fullcard = suitval + " " + cardval;

  document.getElementById(whosecard).innerHTML = fullcard;

  return fullcard;

}

function startgame() {
  document.getElementById("startbutton").innerHTML = "";
  document.getElementById("yourcard").innerHTML = getcard("yourcard");
  document.getElementById("computercard").innerHTML = getcard("computercard");
  comparecard();
}

function comparecard() {
  var usercard = computercard = document.getElementById("yourcard").innerHTML;
  var computercard = document.getElementById("computercard").innerHTML;
  var winnermessage;
  var usernum = Number(usercard.substr(2));
  var computernum = Number(computercard.substr(2));



  if (usernum > computernum) {
    winnermessage = "You Win!";

  } else if (usernum < computernum) {
    winnermessage = "The Computer Wins!";


  } else {
    winnermessage = "It's a Tie!";



  }
  document.getElementById("winner").innerHTML = winnermessage;
  calcscore(winnermessage);

}

function calcscore(winner) {
  var compscore = Number(document.getElementById("computerscore").innerHTML);
  var yourscore = Number(document.getElementById("yourscore").innerHTML);

  switch (winner) {
    case "You Win!":
      yourscore++;
      document.getElementById("yourscore").innerHTML = yourscore;
      break;
    case "The Computer Wins!":
      compscore++;
      document.getElementById("computerscore").innerHTML = compscore;
      break;
    default:
      yourscore++;
      compscore++;
      document.getElementById("yourscore").innerHTML = yourscore;
      document.getElementById("computerscore").innerHTML = compscore;
      break;
  }
}
代码语言：javascript
运行
复制
body {
  font-family: Helvetica, Arial, sans-serif;
}

.cardcontain,
.keycontain,
.headcontain,
.scorecontain {
  display: flex;
  width: 800px;
  margin: auto;
}

.cardcontain>div {
  height: 225px;
  width: 135px;
  font-size: 2em;
  border: 2px solid #000000;
  border-radius: 5px;
  margin: 10px;
  padding: 20px;
  /*width:22%;*/
}

.cardback {
  background-color: hsl(34, 53%, 82%);
  background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px), repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px, hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px, hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px, hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px, hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px);
}

.startmessage {
  text-align: center;
  vertical-align: middle;
  color: #ffffff;
  text-shadow: 5px 6px 2px #3c3b3b;
  cursor: pointer;
}

.keycontain>div {
  text-align: left;
  color: #888888;
  width: 50%;
}

.headcontain>div {
  text-align: center;
  color: #008800;
  width: 50%;
}

.scorecontain>p {
  text-align: center;
  width: 50%;
  color: #d0732d;
  font-size: 3em;
}

.cardgrid2 {
  display: block;
  vertical-align: top;
  color: #651e1e;
}

.cardgrid3 {}

button {
  background-color: #57ac75;
}


/*
            .winner::before {
                display:block;
                content:" ";
                height:400px;
    
            }
            */

.winner {
  font-size: 24px;
  font-weight: bolder;
  color: #3f7a3b;
  text-align: center;
}
代码语言：javascript
运行
复制
<div class="headcontain">
  <div>
    <h2 class="cardgrid">Computer</h2>
  </div>
  <div>
    <h2 class="cardgrid">You</h2>
  </div>
</div>
<div class="cardcontain">
  <div class="cardback"></div>
  <div id="computercard"></div>
  <div id="yourcard"></div>
  <div class="cardback startmessage" onclick="startgame()">
    <p id="startbutton">Click here to play!</p>
  </div>
</div>
<div class="scorecontain">
  <p id="computerscore">0</p>
  <p id="yourscore">0</p>
</div>
<p class="winner" id="winner"></p>
<div class="keycontain">
  <div>
    <h3>Key: first digit</h3>
    <ul>
      <li>0 = Spade</li>
      <li>1 = Club</li>
      <li>2 = Heart</li>
      <li>3 = Diamond</li>
    </ul>
  </div>
  <div>
    <h3>Key: second digit</h3>
    <ul>
      <li>11 = Jack</li>
      <li>12 = Queen</li>
      <li>13 = King</li>
      <li>14 = Ace</li>
    </ul>
  </div>
</div>

​

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/68468202

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档