登录
当前位置： 首页 > 知识库问答 >
问题：

需要一个计时器或延迟功能的小纸牌游戏

卓星波
2023-03-14

我用JavaScript做了一个游戏，看起来运行得很好。 规则是:有2名选手轮流上场。 抽牌获得积分。 每回合可以抽多张牌。 直到你按下结束转弯按钮，你才会得到分数。 如果你抽到2，5或9，那么你将失去该回合的所有分数。

一切工作，然而，当你抽2，5，或9，回合改变，甚至在你看到牌。 所以如果你抽了那张牌你都不会知道。

  • 我想添加一个计时器或延迟函数，以便当您画出2，5或9时，它会显示该卡一两秒钟。
  • 我还想禁用任何单击操作，这样您就不会意外地单击下一个播放机。

以下是该页面的链接:https://tneilson08.github.io/cardgame/

null

js prettyprint-override">var scores, roundScore, activePlayer, gamePlaying;
gamePlaying = true;
init();

// Create the deck
const deck = ["2C", "2S", "2H", "2D", "3C", "3S", "3H", "3D", "4C", "4S", "4H", "4D", "5C", "5S", "5H", "5D", "6C", "6S", "6H", "6D", "7C", "7S", "7H", "7D", "8C", "8S", "8H", "8D", "9C", "9S", "9H", "9D", "10C", "10S", "10H", "10D", "JC", "JS", "JH", "JD", "QC", "QS", "QH", "QD", "KC", "KS", "KH", "KD", "AC", "AS", "AH", "AD"];
// const deck = ["two-club", "two-spade", "two-heart", "two-dia", "three-club", "three-spade", "three-heart", "three-dia"];
// Shuffle the deck
function shuffleArray(array) {
  for (var i = array.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = array[i];
    array[i] = array[j];
    array[j] = temp;
  }
}

shuffleArray(deck);

// Draw cards
function drawCard() {
  if (gamePlaying) {
    // 1. Draw from the deck and remove with shift()
    var card = deck.shift();

    // 2. Display the card
    var cardDOM = document.querySelector('.card');
    cardDOM.style.display = 'block'; // card becomes visible
    cardDOM.src = 'img/' + card + '.png'; // determines card drawn

    // 3. Determine card value
    if (card == "2C" || card == "2S" || card == "2H" || card == "2D") {
      card = 2;
    } else if (card == "3C" || card == "3S" || card == "3H" || card == "3D") {
      card = 3;
    } else if (card == "4C" || card == "4S" || card == "4H" || card == "4D") {
      card = 4;
    } else if (card == "5C" || card == "5S" || card == "5H" || card == "5D") {
      card = 5;
    } else if (card == "6C" || card == "6S" || card == "6H" || card == "6D") {
      card = 6;
    } else if (card == "7C" || card == "7S" || card == "7H" || card == "7D") {
      card = 7;
    } else if (card == "8C" || card == "8S" || card == "8H" || card == "8D") {
      card = 8;
    } else if (card == "9C" || card == "9C" || card == "9H" || card == "9D") {
      card = 9;
    } else {
      card = 10;
    }

    // 4. Update the round score IF the card drawn was NOT a 4 or a 9
    if (card !== 2 && card !== 5 && card !== 9) {
      // add score
      roundScore += card;
      document.querySelector('#current-' + activePlayer).textContent = roundScore;
    } else {
      // next player
      nextPlayer();
    }

    // if (card === 5) {
    //   // add score
    //   setTimeout(nextPlayer, 2000);
    // }
    //
    // if (card === 9) {
    //   // add score
    //   setTimeout(nextPlayer, 2000);
    // }

    // 5. If deck array runs out, replace all cards in deck ///MAYBE CHANGE THIS SO GAME ENDS AND PLAYER WITH HIGHEST DECK WINS
    if (deck.length === 0) {
      deck.push("2C", "2S", "2H", "2D", "3C", "3S", "3H", "3D", "4C", "4S", "4H", "4D", "5C", "5S", "5H", "5D", "6C", "6S", "6H", "6D", "7C", "7S", "7H", "7D", "8C", "8S", "8H", "8D", "9C", "9S", "9H", "9D", "10C", "10S", "10H", "10D", "JC", "JS", "JH", "JD", "QC", "QS", "QH", "QD", "KC", "KS", "KH", "KD", "AC", "AS", "AH", "AD");
      // deck.push("two-club", "two-spade", "two-heart", "two-dia", "three-club", "three-spade", "three-heart", "three-dia");
      shuffleArray(deck);
    }
  }
}

document.querySelector('.btn-draw').addEventListener('click', function() {
  drawCard();
});


function endTurn() {
  if (gamePlaying) {
    // Add CURRENT score to GLOBAL score
    scores[activePlayer] += roundScore;

    // Update the UI
    document.querySelector('#score-' + activePlayer).textContent = scores[activePlayer];
    // Check if player won the game
    if (scores[activePlayer] >= 200) {
      document.querySelector('#name-' + activePlayer).textContent = 'Winner!';
      document.querySelector('.card').style.display = 'none';
      document.querySelector('.player-' + activePlayer + '-panel').classList.add('winner');
      document.querySelector('.player-' + activePlayer + '-panel').classList.remove('active');
      gamePlaying = false;
    } else {
      // Next Player
      nextPlayer();
    }
  }
}


document.querySelector('.btn-endturn').addEventListener('click', function() {
  endTurn();
});


function nextPlayer() {
  activePlayer === 0 ? activePlayer = 1 : activePlayer = 0;
  roundScore = 0;

  document.getElementById('current-0').textContent = '0';
  document.getElementById('current-1').textContent = '0';

  document.querySelector('.player-0-panel').classList.toggle('active');
  document.querySelector('.player-1-panel').classList.toggle('active');

  document.querySelector('.card').style.display = 'none';
}

document.querySelector('.btn-new').addEventListener('click', init);

function init() {
  scores = [0, 0];
  roundScore = 0;
  activePlayer = 0;
  gamePlaying = true;

  document.querySelector('.card').style.display = 'none';

  document.getElementById('score-0').textContent = '0';
  document.getElementById('score-1').textContent = '0';
  document.getElementById('current-0').textContent = '0';
  document.getElementById('current-1').textContent = '0';
  document.getElementById('name-0').textContent = 'Player 1';
  document.getElementById('name-1').textContent = 'Player 2';
  document.querySelector('.player-0-panel').classList.remove('winner');
  document.querySelector('.player-1-panel').classList.remove('winner');
  document.querySelector('.player-0-panel').classList.remove('active');
  document.querySelector('.player-1-panel').classList.remove('active');
  document.querySelector('.player-0-panel').classList.add('active');
}
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300;700&display=swap');
.final-score {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 520px;
  color: #555;
  font-size: 18px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-align: center;
  padding: 10px;
  width: 160px;
  text-transform: uppercase;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

body {
  background-image: url("img/bg.gif");
  background-size: cover;
  background-position: center;
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 300;
  position: relative;
  height: 100vh;
  color: #161624;
}

.wrapper {
  width: 1000px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #400000;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 1);
  overflow: hidden;
  color: white;
}

.player-0-panel,
.player-1-panel {
  width: 50%;
  float: left;
  height: 600px;
  padding: 100px;
}


/**********************************************
*** PLAYERS
**********************************************/

.player-name {
  font-size: 40px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 100;
  margin-top: 20px;
  margin-bottom: 10px;
  position: relative;
}

.player-score {
  text-align: center;
  font-size: 80px;
  font-weight: 200;
  color: white;
  margin-bottom: 130px;
}

.active {
  background-color: rgb(255, 0, 0, .1);
}

.active .player-name {
  font-weight: 700;
}

.active .player-score {
  font-weight: 700;
}

.player-current-box {
  background-color: #EB4D4D;
  color: #fff;
  width: 40%;
  margin: 0 auto;
  padding: 12px;
  text-align: center;
}

.player-current-label {
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 20px;
  color: #fff;
}

.player-current-score {
  font-size: 40px;
}

button {
  position: absolute;
  width: 200px;
  left: 50%;
  transform: translateX(-50%);
  color: #555;
  background: none;
  border: none;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 30px;
  text-transform: uppercase;
  cursor: pointer;
  font-weight: 300;
  transition: background-color 0.3s, color 0.3s;
}

button:hover {
  font-weight: 600;
  border: 1px solid white;
}

button:focus {
  outline: none;
}


/* i {
    color: #EB4D4D;
    display: inline-block;
    margin-right: 15px;
    font-size: 32px;
    line-height: 1;
    vertical-align: text-top;
    margin-top: -4px;
    transition: margin 0.3s;
} */

.btn-new {
  top: 45px;
  color: white;
  border: 2px solid white;
  transition: 0.25s;
}

.btn-draw {
  top: 403px;
  color: white;
  border: 2px solid white;
  transition: 0.25s;
}

.btn-endturn {
  top: 467px;
  color: white;
  border: 2px solid white;
  transition: 0.25s;
}

.card {
  position: absolute;
  left: 50%;
  top: 178px;
  transform: translateX(-50%);
  height: 200px;
}

.back-card {
  position: absolute;
  left: 50%;
  top: 178px;
  transform: translateX(-50%);
  height: 200px;
}

.winner {
  background-color: #b00000;
}

.winner .player-name {
  font-weight: 700;
  color: #ff7878;
}

.winner .player-score {
  font-weight: 700;
  color: #ff7878;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="styles.css">
  <title>Card Game</title>
</head>

<body>
  <div class="wrapper clearfix">
    <div class="player-0-panel active">
      <div class="player-name" id="name-0">Player 1</div>
      <div class="player-score" id="score-0">43</div>
      <div class="player-current-box">
        <div class="player-current-label">Current</div>
        <div class="player-current-score" id="current-0">11</div>
      </div>
    </div>

    <div class="player-1-panel">
      <div class="player-name" id="name-1">Player 2</div>
      <div class="player-score" id="score-1">72</div>
      <div class="player-current-box">
        <div class="player-current-label">Current</div>
        <div class="player-current-score" id="current-1">0</div>
      </div>
    </div>

    <button class="btn-new"><i class="ion-ios-plus-outline"></i>New game</button>
    <button class="btn-draw"><i class="ion-ios-loop"></i>Draw Card</button>
    <button class="btn-endturn"><i class="ion-ios-download-outline"></i>End Turn</button>

    <img src="img/back-card.png" alt="Back of Card" class="back-card">
    <img src="card-5.png" alt="Card" class="card">
  </div>
  <script src="script.js"></script>
</body>

</html>

null

共有1个答案

柴星津
2023-03-14

我认为您已经使用settimeout获得了答案。 但在哪里呢？ 根据您的规则，我认为您应该在其他方面使用，如下所示:

// 4. Update the round score IF the card drawn was NOT a 4 or a 9
if (card !== 2 && card !== 5 && card !== 9) {
  // add score
  roundScore += card;
  document.querySelector('#current-' + activePlayer).textContent = roundScore;
} else {
  // next player
  setTimeout(() => {
    nextPlayer();
  }, 2000);
}

但在安排此设置超时之前，应冻结按钮。 因为用户将继续播放。

我会这样说:

 freezeButtons();
 // next player
  setTimeout(() => {
    nextPlayer();
  }, 2000);
 类似资料：
  • mvc纸牌游戏的设计

    我正在尝试创建一个MVC模式的回合制卡牌游戏。我对正确的设计有些怀疑。 我创建了一个由这些类组成的模型： 卡（使用套装） 套牌（40张牌，抽取牌法，剩余牌数） 表 套装(enum) 玩家（手牌，人名，手牌数，收藏牌我想） 游戏模型（引用了Deck、Table，并在构造函数中包含两个玩家） 我将在用户按下“新游戏”按钮时创建两个Player对象和GameModel（计算机和Player）。这样做对吗

  • Java纸牌游戏：需要甲板类帮助

    这是我关于堆栈溢出的第一个问题，所以如果我的问题中有一个新手错误，请原谅，请随时更正，因为我计划在未来几个月内更多地使用此网站。 不管怎样，我是高中12年级的学生，我被一个家庭作业问题卡住了。所以基本上我们被分配了一个创建战争游戏（纸牌游戏）的项目，我们被要求每天做一小部分。到目前为止，直到今天一切都很顺利，因此我向你们提出了这个问题。 以下是该项目的内容： 卡片 它有什么： 私有int值：卡的值

  • 快速延迟功能

    问题内容： 我没有代码示例或任何内容，因为我不知道该怎么做，但是有人可以告诉我如何在一定时间内迅速延迟功能吗？ 问题答案： 您可以使用GCD（在示例中，延迟10秒）： 迅捷2 Swift 3和Swift 4

  • C语言实现纸牌计算24点小游戏

    本文向大家介绍C语言实现纸牌计算24点小游戏，包括了C语言实现纸牌计算24点小游戏的使用技巧和注意事项，需要的朋友参考一下 利用系统时间设定随机种子生成4个随机数，并对4个数字之间的运算次序以及运算符号进行枚举，从而计算判断是否能得出24，以达到程序目的。程序主要功能已完成，目前还有部分细节未处理，待完成ing...对于代码中的错误，恳请批评指正。 游戏描述： 　　A-10：分别代表数字 1-10

  • OOP设计问题与纸牌游戏

    我对我的编程技能越来越有信心，所以我决定重新开始之前开始的纸牌游戏。这个程序的重点是现在我对程序流程、变量、条件等有了很好的掌握，我想加深我对OOP的理解 所以我需要一些关于面向对象设计的建议 我的纸牌游戏将有5个类： Main 卡 牌组（has-a-Card-ArrayList） 玩家（拥有-从牌组对象接收的卡对象的卡数组列表） 经销商 我想知道让Dealer类成为一个接口是否合适的OOP。所有

  • 我需要让i程序打印出一副洗牌的纸牌和一副分类的纸牌

    创建一个随机卡片数组。使用toString方法（未排序）在格式化的打印语句中输出此数组。使用选择排序对数组进行排序。从牌组中最高的牌到最低的牌排序。按字母顺序递增：梅花（最低），然后是钻石、红桃和黑桃（最高）。牌组中最高的牌是黑桃王牌，最低的牌是2个梅花。使用toString方法输出已排序的数组。同时打印出迭代次数 我是一个初学者，需要帮助，这里是一些我开始。

  • Buraco纸牌游戏中一个令人愉快的AI所需的建议

    我正在尝试为Buraco纸牌游戏（2人和4人）建立一个有效的AI。 我想避免启发式的方法：我不是游戏的专家，在我用这种方法开发的最后几个游戏中，我用这种方法获得了平庸的结果。 我知道montecarlo树搜索算法，我曾用它做过一个结果离散的跳棋游戏，但我真的被最近其他机器学习选项的成功搞糊涂了。 例如，我在stack overflow中找到了这个答案，这个答案真的让我很困惑，它说：“所以，再来一次

  • Java纸牌游戏"Skat"

    我试图用Java实现纸牌游戏“Skat” 规则： 有32张卡片。每张牌在游戏中只存在一次。 颜色有：梅花、黑桃、红心、钻石 价值观是：王牌，国王，王后，杰克，十，九，八，七 那些牌被洗牌了。有三名球员 第一轮：每位玩家有3张牌。然后将两张卡片放入Skat。 第二轮：每位玩家再获赠4张牌。 第三轮：每位玩家再获得3张牌。 期望输出：每个玩家的牌都被展示（每张牌都应该存在一次） 我的产量：钻石七（32

相关问答

Java纸牌游戏"Skat"硒C#代码工作，但需要等待或延迟Java纸牌游戏“滑冰”贪婪算法在纸牌游戏中的一个例子JavaHibernate验证器需要一个或另一个

相关文章

java实现24点纸牌游戏如何获得对延迟功能的引用？TypeError：Router.use（）需要中间件功能，但有一个ObjectSwing计时器的基本功能Python时间延迟

相关阅读

Python开发一个走迷宫小游戏用Python制作一个滑雪小游戏3.1 Verilog 延迟模型3.5 Verilog 延迟反标注叠纸游戏运营初面面经

相关工具

功能齐全的计算器纸小墨挂机放置类小游戏定位功能JAGS 游戏服务器

相关文档

React Bits 你需要了解的知识点DIY 一个实用的 miniLAPP 服务器每个程序员上辈纸都是法力无边的巫师皮卡智能 一键抠图神器 API 文档100个 gdb 小技巧
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.