JavaScript_Pig Game切换当前玩家

news2024/11/10 7:56:38
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(活跃用户)的值了;也可以动态的给用户计算分数了
在这里插入图片描述

● 切换成功,但是我们还没有把活跃用户的当前分数置为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;
  }
});

在这里插入图片描述

当切换用户的时候,编程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');
  }
});

在这里插入图片描述

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

现在就查保持分数了,当玩家选择保持分数的时候,当前分数会被保存再上面大的总分当中!下个文章我们来展现它!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1144972.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

图解Kafka高性能之谜(五)

高性能网络模型NIO 简单架构设计: 详细架构设计: 高性能的磁盘写技术 高性能的消息查找设计 索引文件定位使用跳表的设计 偏移量定位消息时使用稀疏索引: 高响应的磁盘拷贝技术 批处理设计 请求亲和性设计 内存池高效、安全设计 高性能…

Spring Boot进阶(91):从零开始,轻松打造Sofa+Spring Boot分布式开发环境

📣前言 Sofa是一款基于Java语言的分布式架构,它的核心理念是通过将可复用的业务逻辑和服务分离出来,从而提高系统的可维护性和可扩展性。Spring Boot是一款基于Spring框架快速构建应用程序的工具,它拥有丰富的自动化配置和快速开发…

Kibana功能栏中找不到Timelion功能模块的解决

天行健,君子以自强不息;地势坤,君子以厚德载物。 每个人都有惰性,但不断学习是好好生活的根本,共勉! 文章均为学习整理笔记,分享记录为主,如有错误请指正,共同学习进步。…

Maven入门与开箱即用

一、初识 Maven(了解) 1、项目遇到的问题 构建:编译代码,运行测试,打包,部署应用,运行服务器等;依赖:项目依赖大量的第三方包,第三方包又依赖另外的包&…

NewStarCTF2023week4-Nmap

题目要我们找出Nmap扫描得到所有的开放端口 Nmap通常用于直接扫描目标主机,而不是直接扫描pcap文件。 那么这里我们还是使用wireshark来分析,使用过滤器: tcp.flags.syn 1 and tcp.flags.ack 1 这个过滤条件可以筛选出TCP端口开放的数据…

使用设计模式基于easypoi优雅的设计通用excel导入功能

文章目录 概要整体架构流程代码设计配置类通用API分发器处理器业务逻辑处理service接口策略模型 小结 概要 基于java原生 easypoi结合适配器模式、策略模式、工厂模式设计一个通用的excel导入框架 整体架构流程 代码设计 由上到下,分别讲解代码 配置类 ExcelCon…

【IO面试题 三】、说说NIO的实现原理

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享? 踩过的坑没必要让别人在再踩,自己复盘也能加深记忆。利己利人、所谓双赢。 面试官:说说NIO的实现原理 参…

eclipse安装教程(2021版)

第一步:下载JDK (下载地址) Java SE - Downloads 第二步 根据自己电脑的系统,选择相应的版本x64代表64位,x86代表32位。点击相应的JDK进行下载 点击之后会出现一个对话框 同意之后下载。(记住下载到哪,打…

二叉树:什么样的二叉树适合用数组来存储?

文章来源于极客时间前google工程师−王争专栏。 前面我们讲的都是线性表结构,栈、队列等等。今天我们讲一种非线性表结构,树。树这种数据结构比线性表的数据结构要复杂得多,内容也比较多,所以我会分四节来讲解。 问题&#xff1…

【Javascript】弹出框

目录 警告框 确认框 提示框 警告框 alert(你好); 确认框 var isConfirm confirm(请确认) console.log( isConfirm); 提示框

基于非侵入式负荷检测与分解的电力数据挖掘

基于非侵入式负荷检测与分解的电力数据挖掘 在这里插入图片描述 **摘要:本案例将根据已收集到的电力数据,深度挖掘各电力设备的电流、电压和功率等情况,分析各电力设备的实际用电量,进而为电力公司制定电能能源策略提供一定的参…

电脑报错由于找不到vcruntime140.dll文件怎么修复

VCruntime140.dll是一个重要的动态链接库文件,它对于许多应用程序的运行起着关键作用。如果计算机中丢失了这个文件,可能会导致一些程序无法正常启动或运行,从而影响到用户的正常使用。在本文中,我们将详细介绍vcruntime140.dll文…

Cross Site Scripting (XSS)

攻击者会给网站发送可疑的脚本,可以获取浏览器保存的网站cookie, session tokens, 或者其他敏感的信息,甚至可以重写HTML页面的内容。 背景 XSS漏洞有不同类型,最开始发现的是存储型XSS和反射型XSS,2005,Am…

【JVM】字节码文件的组成部分

🐌个人主页: 🐌 叶落闲庭 💨我的专栏:💨 c语言 数据结构 javaEE 操作系统 Redis 石可破也,而不可夺坚;丹可磨也,而不可夺赤。 JVM 一、字节码文件的组成部分1.1 iconst_0…

LabVIEW开发TDS1000 和TDS2000 系列泰克示波器

LabVIEW开发TDS1000 和TDS2000 系列泰克示波器 泰克示波器是经常用到的工具,一般手动操作即可,但有时候也要集成到系统中,需要程控。这时候先要下载厂家提供的例子,了解LabVIEW的demo。根据不用的示波器型号,选择和计…

在职场上有多少人输在了不会用Python数据分析

在职场上有多少人输在了不会用Python数据分析 在职场上有多少人输在了不会用Python数据分析引言方向一:学了Python能做什么?方向二:Python的应用领域1. Web开发:2. 自动化和脚本编写:3. 数据科学和分析:4. …

锐捷RG-UAC账号密码信息泄露

第一种方法: 构造如下Payloads https://xxxxx/get_dkey.php?useradmin访问payload成功后,可以看到受影响系统的超级管理员权限账号、访客权限账号、审计权限账号的账户名和 MD5 加密的密码值,如下图所示: 下面可以使用上一步查…

【强化学习】10 —— DQN算法

文章目录 深度强化学习价值和策略近似RL与DL结合产生的问题深度强化学习的分类 Q-learning回顾深度Q网络(DQN)经验回放优先经验回放 目标网络算法流程 代码实践CartPole环境代码结果 参考 深度强化学习 价值和策略近似 我们可以利用深度神经网络建立这些…

缺少d3dx9_43.dll怎么解决 win系统如何运行dll文件?

大家好!今天我来给大家分享一下关于d3dx9_43.dll缺失的4种详细解决方案。 首先,让我们了解一下d3dx9_43.dll是什么文件。其实,d3dx9_43.dll是DirectX的一个组件,它主要负责处理游戏中的一些特效和动画效果。如果这个文件丢失了&a…

MacOS系统电脑怎么彻底清理系统垃圾注册表App Cleaner可以深度清理吗

App Cleaner & Uninstaller 是一款适用于 Mac 操作系统的软件应用程序,允许用户轻松卸载不需要的应用程序、删除剩余文件和文件夹以及管理启动项。该应用程序会分析与您要删除的应用程序关联的文件,并帮助识别其所有组件,以便您可以一次将…