Javascript Cookie Clicker下载 - Javascript Cookie Clicker源代码下载

Javascript Cookie Clicker

JAVA源码

1.0.0

下载

Javascript - Cookie Clicker

作业来源：https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md

链接到实时版本：https://teo-cozma.github.io/Javascript/

团队成员

Brigita Sabutyte（Javascript 和 HTML）
大卫·蒂雷尔 (Javascript)
Teodora Cozma（HTML 和 CSS）

语言

超文本标记语言
CSS
JavaScript

工具

Visual Studio Code（文本编辑器）
Discord、Google Meet、Github、Replit（通信）
Adobe XD（原型设计）
W3C 标记验证服务（HTML 检查）
W3C CSS 验证服务（CSS 检查）
Google Lighthouse（性能检查）

图像

饼干点击器

资源

什么是 Cookie Clicker？

http://orteil.dashnet.org/cookieclicker/
https://en.wikipedia.org/wiki/Cookie_Clicker
https://cookie-clicker2.com/
https://article-clicker.web.cern.ch/
https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s

我们项目的教程：

https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkCSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit

验证服务：

https://validator.w3.org/#validate_by_input
http://jigsaw.w3.org/css-validator/

项目日志

第一天 (25/10)

说明书审查

什么：Cookie Clicker。
为什么：巩固项目（主要是Javascript技能）。
时间：从今天开始，为期 4 天的团队工作，直到 28/10。
方式：三人一组，协作并使用各自的代码语言。
主演：Teodora Cozma、Brigita Sabutyte、David Tirel。
- 哪些角色？有前端、后端和项目管理。所有角色都可以互换，并且代码无论如何都是共享的，但总的来说，一个人可以更多地专注于某一特定角色。
  - 后端（Javascript）：大卫。
  - 后端（Javascript）+前端（HTML 结构）：Brigita。
  - 前端（CSS + 也许是 Sass）+ 项目经理：Teodora。

头脑风暴

3 个部分：

Cookie 部分：Cookie 计数器的标头 1。 H1为点击量。
- 交互式 cookie + 其标题 + cookie 计数器 = 第 1 部分。
- “在 HTML 中，放置一个单击按钮，该按钮将增加计数器和初始化为 0 的标签以显示所述计数器。”
分数部分：
- 分数部分：分数计数。
- 1 cookie ：cookie 是它自己的按钮。

（饼干+分数=左半部分）

商店部分：
- 成就和升级？
- 商店部分 = 按钮升级答题器 + 积分计数器 = 第二部分：
  - 做一个乘数（双倍或三倍点）-->这一步进行审查
  - 乘数价格（已购买）
  - 分数更新
  - 乘数内的计数器
  - 成本增加（更高乘数的成本）
    - 还有专用显示屏（下面有一个按钮？）
  - 步骤12：必要的元素，某些按钮被停用。例如：低于 20 点，玩家无法访问某些功能。

（右半部分）

示例（参考）：http://orteil.dashnet.org/cookieclicker/。

今天的任务

今天早上（10:30 - 12:30）

项目研究（作业说明）。
- 查看与当前强制步骤相对应的内容（暂时保留奖金）。
深入查看原始 cookie Clicker 的代码。

(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s)游戏描述（及其存在品质！）

1 次点击 = 1 个 cookie。
15 次点击 = 15 个 cookie = 1 个光标（已购买）。
10 个游标 = 1 个 cookie/秒 (CpS)。
100 块饼干 = 奶奶生产并销售你的饼干。
Cookie 是一种货币，可以让你购买农场、矿山、工厂等。 = 渗透且势不可挡的 Cookie 经济。这扩展成最终的cookieverse。
超越存在=提升并重新开始。
金色饼干随机生成。
为祖母担心什么：潜在的叛乱和启示录。用经济收益拯救每个人，或者利用他们来创造更多财富。
控制台中的小“代码黑客”：Game.Earn(x)。

（http://orteil.dashnet.org/cookieclicker/）

信息日志/版本历史

安全保存
光标显示样式
导入/导出功能：从onld版本检索保存的游戏（一周后禁用）
卖出按钮
随机金色饼干（如何确定其频率）
点击统计
点击提升
奶奶的不满和启示——>产生了消耗饼干的生物
用于升级和成就的统计菜单部分
- 奶味成就-_-
选项菜单：
- 一般：保存+自动保存、导出/导入、擦除保存；
- 设置：音量、精美的图形、声音......这些都是奖励。

代码背后（与检查员一起调查）

HTML 结构（我们可能为了外观而保留的内容）：
- Head ：所有样式和脚本的链接（标题闪烁......）
- 身体：
  - 没有横幅包装
  - 顶栏：版权和社交媒体链接（类似于页脚，但位于页面顶部）。今年，我们肯定需要在我们的名字中包含版权内容，并链接到我们的登陆页面（？）。
  - Div id:"game" ：游戏的实际部分。
    - 这些部分位于标签“section”下，并根据其位置（左、右、中）+分隔符拥有自己的名称。
    - 主播：他们属于自己的阶级类型吗？查一下。
    - Cookie 锚点 = 可点击的 cookie ！！！
      - 画布标签
    - 我们是否添加一个虚构的后台名称？
    - 饼干计数器：x 饼干；每秒：s。
  - 我们是否创建一个包含选项、统计数据、信息...的菜单？
    - 另外，每个菜单项的小节？
  - （技术问题：页面不断刷新以更新数据，很难在闪烁之前停留在某一部分上查看代码）
  - “b”标签：它有什么用？
  - 有些div被隐藏了？
  - 商店部分：
    - 买入/卖出：这些应该链接到 Javascript 事件，因为它们的值会随着每次点击而改变。
    - 产品（地雷、祖母）：当游戏第一次开始时，这些应该被隐藏/遮挡。 （另一个有趣的参考：https://article-clicker.web.cern.ch/）

今天下午（13:30 - 17:00）

收集想法、研究并汇集资源。
未来可能面临哪些技术困难/挑战？
- 乘法器如何工作？
- 显示部分及其按钮的布局（尽管这并不是特别令人担心）。
- 了解如何应用 Javascript。
  - 收集有关如何为每个按钮编写代码的资源和信息。

我们的团队合作方法是什么？

我们每个人是如何工作的？
- 独自的
- 研究重点
- 专注于编码
- 我们是否进行“实时编码会议”，即我们共享屏幕并键入代码，并且每个人都当场给出自己的输入？
我们怎样才能让这个最后期限对我们有利呢？
我们如何拆分编码工作？我们如何确定以下任务并委派它们？如果我们每个人都按照自己的时间工作，我们如何达成一致并巩固最终的代码？
决定如何沟通和共享信息：
- 在 Discord 上，房间 4（聊天 + 通话）。
- ...（其他协作工具）。
- 当然是 Github，存储库将被共享。
决定下一步：
- 今天完成研究吗？
- 开始规划（+ 编写？）HTML 结构？ JavaScript 结构？
- 我们是否严格遵循每一步？
  - 已经决定，至少将包括强制性步骤（具有最重要功能的所有输入和按钮），并且奖金暂时已保留（但如果可能的话可能会包括在内。）
  - 这些步骤是一个接一个地执行，还是同时执行？
    - 这是一个需要提出的重要问题，因为角色是共享的：2 个人在后端协作，2 个人在前端协作。
    - 因此，在Javascript中，这些步骤会被分发吗？
- 在实际构建项目时，我们从原始项目中借鉴了多少，又将多少变成了我们自己的？
日常工作方法：
- 我们每个人一开始都是自己工作，在一天结束时，通过 Discord 共享我们的代码，然后在 Replit 上“提交”所有内容。

提前思考 - 评估部分

定期评估进度并确保包含必备功能。
定期更新自述文件。
在最后（在最后一天，甚至在编码过程中），使用验证和性能工具（请参阅 Lighthouse 和 W3C 验证工具）；也许在星期四。

今天下午的步数（14:30 - 16:30）

更多研究并规划明天的任务：
- Brigita：HTML 研究和写作。
- David：Javascript 研究。
- Teodora：视觉研究和原型设计。

第二天 (26/10)

上午 9:00 会议：

第 5 步完成。
共享代码。
技术问题：将 HTML 与 Javascript 连接起来，使功能正常工作。
此外，奖金是给玩家的，因此步骤 11 及后续步骤是强制性的。
Autoclicker 是由 David 开发的。
乘数由 Brigita 完成；也待定。
解决脚本中的问题。

今天早上（9:30 - 12:30）

继续指定的步骤。调查任何问题。 13.30 召开会议，讨论进展情况并解决任何问题。

今天下午（13:30 - 16:30） Teo：使网站具有响应能力。注意：乘数按钮还应该包括成本！ + 找到根据 cookie 数量禁用某些按钮的脚本。大卫：分享职能；加载功能已解决。 Brigita：共享代码和函数；语法问题已解决。

Scrum 会议（16:30 - 17:00）

做了什么？
- 乘数步数
出现了哪些问题并得到了解决？
- 乘数的问题。
下一步是什么？
问题：
- 弄清楚如何使元素居中！！！！！！（不得不再次刷新我的记忆）。
- 如何使用 Javascript 禁用按钮：编码困难。
- 保存和加载不适用于乘法器。
- 由于将问题编译到主 CSS 中，无法继续使用 Sass。回到使用普通 CSS 进行样式设计。
明天要解决哪些问题：
- 保存和加载按钮；
- 让乘数再次增加 2；
- 根据条件启用/禁用按钮（步骤 12）；
- 奖金：第11步。

第三天 (27/10)

早会（9:00）

昨天做了什么：
- 响应（待定）
- 保存/加载调查（待定）
- 乘数（已解决）
今天需要做什么：
- 致力于禁用按钮（步骤 12）。
- 检查步骤 8。
- 重做 JavaScript。
  - 解决乘法器的技术问题（加载和递增）；待办的。
- 比较 Javascript 代码（Brigita、David）。
- 比较并合并 HTML 文件并应用 CSS 样式。
- 外观方面：我们是否需要 cookie 和光标以及其他按钮的按钮标签？
  - 答：是的。只是不一定包含“a”标签。
- 对于响应式：使设置适合小移动屏幕。

晚会（16:45 - 17:00）

我们成功做到了：
- 启用/禁用按钮
- 使乘数起作用（仅适用于 AutoClicker）
- 开始研究助推器（奖励）
  - 倒计时有效！
- 响应式CSS
明天需要做什么：
- 完成所有 Javascript 步骤：
  - 让助推器发挥作用
  - 添加重置功能
- 使用正确的脚本更新“主”HTML 代码，并设置其样式。
- 部署页面并使用 LightHouse 检查可访问性、可用性、SEO 等。

第四天 (28/10)

早会（9:00 - 9:30）

今天需要做什么：

修复脚本中的技术问题。
- 让助推器发挥作用。
- 使点击独立工作。
- 防止脚本自行运行。
- 在没有 AutoClick 的情况下实现乘数功能。
使用正确的标签更新 HTML 和 CSS。
- 添加页脚！

下午工作（13:30 - 16:00）

W3C HTML 验证工具（问题）：
- “标签”元素不能有多个后代。
- “p”元素不能是标签的后代。
- 具有“for”属性的“label”的任何“button”元素后代都必须具有与该属性匹配的 ID 值。
  - 解决方案：所有标签都可以插入按钮内，但也必须插入段落内。
W3C CSS 验证工具：没有问题。
部署并运行站点，并使用 LightHouse 进行性能测试。结果=
- 性能=86；
- 可达性=95；
- 最佳实践=100；
- 搜索引擎优化 = 92 ；
修复测试中出现的问题。
- “消除渲染阻塞资源”（导入字体样式时出现问题）。
- “图像元素没有明确的宽度和高度。”