JavaScript_Pig Game切换当前玩家

这篇具有很好参考价值的文章主要介绍了JavaScript_Pig Game切换当前玩家。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

const current0El = document.getElementById('current--0');
const current1El = document.getElementById('current--1');
if (dice !== 1) {
    currentScore += dice;
    current0El.textContent = currentScore;
  } else {
  }
});

这是我们上个文章写的代码,这个代码明显是有问题的,当用户不等于1 ,当然分数累计的都是第一个用户,这个用户的累加应该是动态,当我们切换用户的时候,这个条件判断仍然有效

let activePlayer =0;

我们定义这样的一个变量,作用是什么呢?意思是如果为0的话,表示他就是当前的活跃用户

  if (dice !== 1) {
    currentScore += dice;
    document.getElementById( `current--${activePlayer}`).textContent = currentScore;
    current0El.textContent = currentScore;
  } else {
    player0El.classList.toggle('player--active');
    player1El.classList.toggle('player--active');
  }
});

这个代码就是,获取当前为0的用户,将他的当前分数赋值

● 然后如果是掷色子是1的话,我们要去判断如果活跃用户是0的话,就返回真的,返回真就会返回1,如果用户是1的话,就返回假的,将他置于0

activePlayer = activePlayer === 0 ? 1 : 0;

解释一下这个表达式的含义:
● 条件部分:activePlayer === 0,判断 activePlayer 是否等于 0。
● 如果条件为真(即 activePlayer 等于 0),则表达式返回 expression1,也就是 1。
● 如果条件为假(即 activePlayer 不等于 0),则表达式返回 expression2,也就是 0。
这样就巧妙的设置了activePlayer(活跃用户)的值了;也可以动态的给用户计算分数了
JavaScript_Pig Game切换当前玩家,JavaScript,javascript,开发语言,ecmascript

● 切换成功,但是我们还没有把活跃用户的当前分数置为0

  if (dice !== 1) {
    currentScore += dice;
    document.getElementById(`current--${activePlayer}`).textContent =
      currentScore;
  } else {
    activePlayer = activePlayer === 0 ? 1 : 0;
    currentScore = 0;
  }
});

● 但是真正的游戏规则是,当切换用户的话,当前的分数就为0了

  if (dice !== 1) {
    currentScore += dice;
    document.getElementById(`current--${activePlayer}`).textContent =
      currentScore;
  } else {
    document.getElementById(`current--${activePlayer}`).textContent = 0;
    currentScore = 0;
    activePlayer = activePlayer === 0 ? 1 : 0;
  }
});

JavaScript_Pig Game切换当前玩家,JavaScript,javascript,开发语言,ecmascript

当切换用户的时候,编程0
● 接着我们就来切换底色了,谁是活跃用户,谁的底色就是白色

const player0El = document.querySelector('.player--0');
const player1El = document.querySelector('.player--1');
  if (dice !== 1) {
    currentScore += dice;
    document.getElementById(`current--${activePlayer}`).textContent =
      currentScore;
  } else {
    document.getElementById(`current--${activePlayer}`).textContent = 0;
    currentScore = 0;
    activePlayer = activePlayer === 0 ? 1 : 0;
    player0El.classList.toggle('player--active');
    player1El.classList.toggle('player--active');
  }
});

JavaScript_Pig Game切换当前玩家,JavaScript,javascript,开发语言,ecmascript

当切换用户的时候,player2变成白色
注意:toggle是如果存在类就删除它,如果不存在就加上它,我们不需要去通过container去判断了

现在就查保持分数了,当玩家选择保持分数的时候,当前分数会被保存再上面大的总分当中!下个文章我们来展现它!文章来源地址https://www.toymoban.com/news/detail-714267.html

到了这里,关于JavaScript_Pig Game切换当前玩家的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • javascript设置指定年月日,js动态显示当前时间

    大家好,本文将围绕js中如何动态显示日期时间展开说明,javascript设置指定年月日是一个很多人都想弄明白的事情,想搞清楚js动态显示当前时间需要先了解以下几个事情。 创建showTime()函数,利用JavaScript中的Date对象的属性及方法获取时间,利用Window对象的 setInterval() 方法按

    2024年02月03日
    浏览(152)
  • 如何在JavaScript中获取当前时间yyyymmddhhmmss? (六种实现方式)

    在编写JavaScript代码时,我们经常需要获取当前日期和时间。在本文中,我们将介绍几种获取当前时间并将其格式化为 yyyymmddhhmmss 的字符串的方法。 在JavaScript中,我们可以使用 Date 对象来获取当前日期和时间。下面是一个示例代码: 在上面的代码中,我们使用 getFullYear 、

    2024年02月11日
    浏览(48)
  • 使用JavaScript实现页面滑动切换效果

      使用JavaScript实现页面滑动切换效果 在现代Web页面设计中,页面滑动切换效果已经成为了一种常见的设计要求,能够提升用户体验,增加页面的交互性。本文将通过JavaScript来实现这一效果。 首先,我们需要在HTML中添加一些基础结构和样式。以下是一个简单的例子:   在

    2024年02月13日
    浏览(56)
  • JavaScript实现背景图像切换3D动画效果

    🐱 个人主页: 不叫猫先生 🙋‍♂️ 作者简介:2022年度博客之星前端领域TOP 2,前端领域优质作者、阿里云专家博主,专注于前端各领域技术,共同学习共同进步,一起加油呀! 💫优质专栏:vue3从入门到精通、TypeScript从入门到实践 📢 资料领取:前端进阶资料以及文中源

    2023年04月20日
    浏览(55)
  • JavaScript基础(27)_内联样式的获取和修改、获取元素当前显示的样式

    内联样式的获取和修改 获取元素的内联样式: 修改元素的内联样式: 注意: 1、如果CSS的样式名中含有-,这种名称在JS中是不合法的,会被认为是运算符-,因此,需要将这种样式名修改为 驼峰命名法 ,去掉-,然后将-后的字母 大写 。 2、内联样式有较高的优先级,所以通

    2024年01月18日
    浏览(50)
  • JavaScript编程实现tab选项卡切换的效果+1

    之前在“圳品”信息系统使用了tab选项卡来显示信息,详见: JavaScript编程实现tab选项卡切换的效果 在tab选项卡中使用其它div来显示信息就出现了问题,乱套了,比如下面的这段代码: 运行效果如下: 可以看到,第1张选项卡中的div id=\\\"div1\\\" class=\\\"blue\\\"选项卡1/div消失了,而第

    2024年02月03日
    浏览(49)
  • [JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换

    第一章 2D二维地图绘制、人物移动、障碍检测 第二章 跟随人物二维动态地图绘制、自动寻径、小地图显示(人物红点显示) 第三章 绘制冰宫宝藏地图、人物鼠标点击移动、障碍检测 第四章 绘制Q版地图、键盘上下左右地图场景切换 本章内容在第一章的基础上进行了升级,因此

    2024年02月12日
    浏览(43)
  • JavaScript游戏开发:绘制Q版地图、键盘上下左右地图场景切换

    [JavaScript游戏开发] 绘制Q版地图、键盘上下左右地图场景切换,前端小游戏,javascript,html小游戏,Q版地图

    2024年02月14日
    浏览(57)
  • 通过JavaScript、css、H5 实现简单的tab栏的切换和复用

    目录 一、效果展示 二、实现的大致原理 三、H5的布局 四、CSS样式 五、JS代码内容 六、完整代码 1.我们先通过css 和h5布局得到最基本的tab栏样式(有代码参考) 2.在获得样式,给我们所需要点击的目标设置监听事件,在获取节点,设置一个自定义的节点属性index,通过它在获取

    2023年04月09日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包