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

● 切换成功,但是我们还没有把活跃用户的当前分数置为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.mzph.cn/news/121889.shtml

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

相关文章

Spring Boot进阶(93):体验式教程:手把手教你整合Spring Boot和Zipkin

📣前言 分布式系统开发中,服务治理是一个比较重要的问题。为了更好地实现服务治理,需要解决服务跟踪问题,即如何对分布式系统中的服务进行监控和追踪。本文将介绍如何使用Zipkin进行服务跟踪,并结合Spring Boot进行整合…

STM32F4X SDIO(一) SD卡介绍

STM32F4X SDIO(一) SD卡介绍 SD卡分类外观分类容量分类传输速度分类 在之前的章节中,讲过有关嵌入式的存储设备,有用I2C驱动的EEPROM、SPI驱动的FLASH和MCU内部的FLASH,这类存储设备的优点是操作简单,但是缺…

指针仪表读数YOLOV8NANO

指针仪表读数YOLOV8 NANO 采用YOLOV8 NANO训练,标记,然后判断角度,得出角度,可以通过角度,换算成数据

A星算法(A* A Star algorithm)原理以及代码实例,超详细,超简单,大白话谁都能看懂

本文以这篇博主的文章为基础【精选】A*算法(超级详细讲解,附有举例的详细手写步骤)-CSDN博客 这篇文章的博主做了一个UI界面,但我感觉,这样对新手关注算法和代码本身反而不利,会被界面的代码所干扰。所以笔…

C++多态(超级详细版)

目录 一、什么是多态 二、多态的定义及实现 1.多态构成条件 2.虚函数的重写和协变 虚函数重写的两个例外: 2.1协变 2.2析构函数的重写 (析构函数名统一处理成destructor) 3.重载、覆盖(重写)、隐藏(重定义)的对比 4.final 和 overr…

大模型在数据分析场景下的能力评测

“你们能对接国产大模型吗?” “开源的 LLaMA 能用吗,中文支持怎么样?” “私有化部署和在线服务哪个更合适?” 自 7 月 14 日发布 AI 数智助理 Kyligence Copilot 后,我们收到了很多类似上面的咨询,尤其…

编程实例:洗车店会员管理系统软件一卡多项目管理编程

编程实例:洗车店会员管理系统软件一卡多项目管理编程 编程系统化课程总目录及明细,点击进入了解详情。 https://blog.csdn.net/qq_29129627/article/details/134073098?spm1001.2014.3001.5502 1、会员可以直接用手机号,并可以绑定车牌号 2…

软考系统架构之案例篇(软件工程相关概念)

案例篇-软件工程相关概念 1. 流程图和数据流图之间的区别与联系2. 状态图和活动图的含义及其区别3. 活动图和流程图的区别4. 数据流图中所包含的基本元素及其作用5. 数据流图的平衡原则:6. 用例之间的关系7. 类之间的关系以及基本含义8. 对象模型、动态模型和功能模型的含义以及…

虚拟化 vs. 裸金属:K8s 部署环境架构与特性对比

伴随着 IT 云化转型的逐步推进,越来越多的用户加入应用容器化改造的行列,并使用 Kubernetes(K8s)进行容器部署管理。然而,令不少用户感到困惑的是,由于大部分应用此前都部署在虚拟化或超融合环境&#xff0…

JVM相关面试题(每日一练)

1. 什么是垃圾回收机制? 垃圾收集 Garbage Collection 通常被称为“GC”,它诞生于1960年 MIT 的 Lisp 语言,经过半个多世纪,目前已经十分成熟了。 jvm 中,程序计数器、虚拟机栈、本地方法栈都是随线程而生随线程而灭&a…

在本地模拟C/S,Socket套接字的使用

public class SocketTCP01Server {public static void main(String[] args) throws IOException {/**1.在本机的 9999 端口监听 ,等待连接细节: 要求在本机没有其他服务在监听999细节:这个ServerSocket 可以通过accept()返回多个Socket[多个客…

使用Jenkins触发gitlab的webhook

满足条件: 首先手动构建可以完成构建 例如: 打开项目点击配置 在“Build Triggers”栏勾选,Build when a change is pushed to GitLab. GitLab webhook ;如下 复制URL链接,我的链接是:http://192.168.44…

设计模式之门面模式

前言 什么是门面模式 门面模式是一种结构型设计模式,它提供了一个统一的接口,用来访问子系统中的一群接口。它定义了一个高层接口,让子系统更容易使用。这种模式常用于将一个复杂的子系统封装成一个简单的接口,使得客户端可以方…

Java 枚举类型与泛型-第13章

Java 枚举类型与泛型-第13章 1.枚举类型 枚举类型是一种特殊的数据类型,用于表示一组有限的命名常量。枚举类型可以帮助您更清晰地定义和管理相关常量,并提供类型安全性。 1.1使用枚举类型设置常量 枚举类型是一种非常方便的方式来设置常量。我们可以…

基于51单片机的温度测量报警系统的设计与制作

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、实习目的二、实习任务2.1 设计温度测量报警系统硬件电路2.2 温度测量报警系统软件编程、仿真与调试;2.3 完成温度测量报警系统的实物制作与调试…

从一线到联合,克唑替尼在ALK阳性NSCLC治疗新旅程【医游记】

(图片来源于网络) 一、克唑替尼简介 克唑替尼(Crizotinib),商品名赛可瑞,是一款口服服用的小分子酪氨酸激酶抑制剂。克唑替尼最早于2011年被美国FDA批准用于ALK阳性晚期NSCLC的治疗。其主要靶点为间变淋巴瘤激酶(ALK)和ROS1(ROS proto-oncogene 1)融合…

3.1、Linux的vim编辑器

个人主页:Lei宝啊 愿所有美好如期而遇 目录 前言: 插入模式 底行模式 命令模式 前言: 没有进行配置的vim编辑器在写代码时和记事本没什么两样,所以最开始我们可以先下载一个插件,在Linux下两行指令的问题&…

视频格式高效转换:MP4视频批量转MKV格式的方法

随着数字媒体技术的不断发展,视频格式转换已经成为了我们日常工作中不可或缺的一部分。不同的视频格式适用于不同的场景和设备,因此将视频从一种格式转换为另一种格式往往是我们必须完成的任务。在本文中,我们将重点介绍如何运用云炫AI智剪高…

Apollo安装全攻略

安装方式 概述快速安装安装基础软件安装 Ubuntu Linux安装 Docker Engine 安装 Apollo 环境管理工具获取 GPU 支持(可选)创建和进入 Apollo 环境容器 源码安装安装 Linux 系统(可选)安装 NVIDIA GPU 驱动安装 docker下载并编译 Ap…

【Linux】安装配置解决CentosMobaXterm的使用及Linux常用命令命令模式

目录 一、介绍 1. 背景 2. 讲述&功能 二、Centos安装配置&MobaXterm 1. 创建 2. 安装 3. 配置 4. MobaXterm使用 三、Linux常用命令&模式 1. 常用命令 2. 三种模式 3. 命令使用&换源 4. 拍照备份 一、介绍 1. 背景 CentOS的背景可以追溯到200…