当前位置： 首页 > article >正文

html+css+js趣味小游戏~Cookie Clicker放置休闲（附源码）

article 2025/6/8 8:31:19

下面是一个简单的记忆卡片配对游戏的完整代码，使用HTML、CSS和JavaScript实现：

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Cookie Clicker 简化版</title>
</head>
<body><h1>Cookie Clicker</h1><img id="cookie" src="https://img.icons8.com/color/480/cookie.png" alt="Cookie"><div id="counter">饼干数量: 0</div><div id="upgrades"><div class="upgrade" data-upgrade="cursor" data-cost="15" data-multiplier="1"><h3>鼠标 (15)</h3><p>每秒生产 1 饼干</p></div><div class="upgrade" data-upgrade="grandma" data-cost="100" data-multiplier="5"><h3>奶奶 (100)</h3><p>每秒生产 5 饼干</p></div><div class="upgrade" data-upgrade="farm" data-cost="500" data-multiplier="20"><h3>农场 (500)</h3><p>每秒生产 20 饼干</p></div></div></body>
</html>

css

body {margin: 0;display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;background-color: #FFE4B5;font-family: Arial, sans-serif;
}
#cookie {width: 200px;height: 200px;cursor: pointer;transition: transform 0.1s;
}

JavaScript

let cookies = 0;
let cookiesPerSecond = 0;
const cookieElement = document.getElementById('cookie');
const counterElement = document.getElementById('counter');
const upgrades = document.querySelectorAll('.upgrade');// 点击饼干增加数量
cookieElement.addEventListener('click', () => {cookies++;updateCounter();
});// 更新饼干计数显示
function updateCounter() {counterElement.textContent = `饼干数量: ${cookies}`;
}// 检查是否可以购买升级项
function checkUpgrades() {upgrades.forEach(upgrade => {const cost = parseInt(upgrade.getAttribute('data-cost'));if (cookies >= cost) {upgrade.classList.remove('locked');} else {upgrade.classList.add('locked');}});
}

展示效果

Cookie Clicker

游戏说明

  1. 游戏目标：点击饼干积累数量，解锁升级建筑。数值膨胀机制带来长期成就感。
  2. 技术亮点：纯前端逻辑，依赖定时器更新数值，数据存储在本地Storage中。

如何扩展

  1. 增加难度级别（不同大小的网格）
  2. 添加计时功能
  3. 增加更多卡片符号或使用图片
  4. 添加音效（翻转、匹配成功等）
  5. 添加动画效果
  6. 实现高分记录系统

这个游戏适合所有年龄段的人玩，可以锻炼记忆力和反应能力。代码结构清晰，适合初学者学习JavaScript事件处理和DOM操作。

相关文章：

html+css+js趣味小游戏~Cookie Clicker放置休闲（附源码）

下面是一个简单的记忆卡片配对游戏的完整代码&#xff0c;使用HTML、CSS和JavaScript实现&#xff1a; html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"wid…...

编程日记 2025/6/8 8:31:19

宝塔面板安装nodejs后，通过node -v获取不到版本号，报错node: command not found

如果在 宝塔面板 安装了 Node.js&#xff0c;但运行 node -v 或 npm -v 时提示 command not found&#xff0c;通常是因为 Node.js 的路径未正确添加到系统环境变量。以下是解决方法&#xff1a; 1. 确认 Node.js 是否安装成功 &#xff08;1&#xff09;检查宝塔面板的 Node.…...

编程日记 2025/6/8 8:30:11

SDC命令详解：使用set_propagated_clock命令进行约束

相关阅读 SDC命令详解https://blog.csdn.net/weixin_45791458/category_12931432.html?spm1001.2014.3001.5482 目录 指定端口列表/集合 简单使用 注意事项 传播时钟是在进行了时钟树综合后&#xff0c;使用set_propagated_clock命令可以将一个理想时钟转换为传播时钟&#x…...

编程日记 2025/6/8 8:29:04

win32相关（消息Hook）

消息Hook 要想实现消息Hook需要使用到三个相关的Api SetWindowsHookEx // 设置钩子CallNextHookEx // 将钩子信息传递到当前钩子链中的下一个子程序UnhookWindowsHookEx // 卸载钩子 我们编写的消息钩子需要将设置钩子的函数写到dll里面&#xff0c;当钩住一个线程后&#xff…...

编程日记 2025/6/8 8:28:01

vue3单独封装表单校验函数

1.在页面中建一个.ts文件 import { useI18n } from /hooks/web/useI18n import { FormItemRule } from element-plusconst { t } useI18n()interface LengthRange {min: numbermax: numbermessage?: string } //必输项校验 export const useValidator () > {const requi…...

编程日记 2025/6/8 8:26:59

mysql 页的理解和实际分析

目录 页&#xff08;Page&#xff09;是 Innodb 存储引擎用于管理数据的最小磁盘单位B树的一般高度记录在页中的存储 innodb ibd文件innodb 页类型分析ibd文件查看数据表的行格式查看ibd文件 分析 ibd的第4个页&#xff1a;B-tree Node类型先分析File Header(38字节-描述页信息…...

编程日记 2025/6/8 8:25:57

分享一道力扣

刚刚笔试遇到的。好像很简单&#xff0c;但又不容易写的 611 有效三角形 def triangleNumber(self, nums):count 0nums.sort()for i in range(len(nums) - 2):k i 2for j in range(i 1, len(nums) - 1):if nums[i] 0:breakwhile k < len(nums) and nums[i] nums[j] &g…...

编程日记 2025/6/8 8:24:55

青少年编程与数学 01-011 系统软件简介 06 Android操作系统

青少年编程与数学 01-011 系统软件简介 06 Android操作系统 一、历史发展二、核心架构1. Linux 内核层 (Linux Kernel)2. 硬件抽象层 (Hardware Abstraction Layer - HAL)3. Native 层 (Native Libraries & Android Runtime)4. Java API 框架层 (Java Framework Layer)5. 应…...

编程日记 2025/6/8 8:23:54

构建 MCP 服务器：第 2 部分 — 使用资源模板扩展资源

该图像是使用 AI 图像创建程序创建的。 这个故事是在多位人工智能助手的帮助下写成的。 这是构建MCP 服务器教程&#xff08;共四部分&#xff09;的第二部分。在第一部分中&#xff0c;我们使用基本资源创建了第一个 MCP 服务器。现在&#xff0c;我们将使用资源模板扩展服务…...

编程日记 2025/6/8 8:22:52

【算法设计与分析】实验——汽车加油问题， 删数问题（算法实现：代码，测试用例，结果分析，算法思路分析，总结）

说明&#xff1a;博主是大学生&#xff0c;有一门课是算法设计与分析&#xff0c;这是博主记录课程实验报告的内容&#xff0c;题目是老师给的&#xff0c;其他内容和代码均为原创&#xff0c;可以参考学习&#xff0c;转载和搬运需评论吱声并注明出处哦。 4-1算法实现题 汽车…...

编程日记 2025/6/8 8:21:51

Ubuntu2404 下搭建 Zephyr 开发环境

1. 系统要求 操作系统&#xff1a;Ubuntu2404&#xff08;64位&#xff09;磁盘空间&#xff1a;至少 8GB 可用空间&#xff08;Zephyr 及其工具链较大&#xff09; 2. 安装必要工具 Tool Min. Version CMake 3.20.5 Python 3.10 Devicetree compiler 1.4.6 2.1 安装系…...

编程日记 2025/6/8 8:20:48

现代C++特性（一）：基本数据类型扩展

文章目录 基础数据类型long long (C 11)numeric_limits()获取当前数据类型的最值warning C4309: “”: 截断常量值新字符类型char16_t和char32_tWindows编程常用字符类型wchar_tchar8_t (C 20) 基础数据类型 C中的基本类型是构建其他数据类型的基础&#xff0c;常见的基础类型…...

编程日记 2025/6/8 8:19:46

【C++进阶篇】C++11新特性（下篇）

C函数式编程黑魔法&#xff1a;Lambda与包装器实战全解析 一. lambda表达式1.1 仿函数使用1.2 lambda表达式的语法1.3 lambda表达式使用1.3.1 传值和传引用捕捉1.3.2 隐式捕捉1.3.3 混合捕捉 1.4 lambda表达式原理1.5 lambda优点及建议 二. 包装器2.1 function2.2 bind绑定 三.…...

编程日记 2025/6/8 8:18:43

全生命周期的智慧城市管理

前言 全生命周期的智慧城市管理。未来&#xff0c;城市将在 实现从基础设施建设、日常运营到数据管理的 全生命周期统筹。这将避免过去智慧城市建设 中出现的“碎片化”问题&#xff0c;实现资源的高效配 置和项目的协调发展。城市管理者将运用先进 的信息技术&#xff0c;如物…...

编程日记 2025/6/8 8:17:40

echarts柱状图实现动态展示时报错

echarts柱状图实现动态展示时报错 1、问题&#xff1a; 在使用Echarts柱状图时&#xff0c;当数据量过多&#xff0c;x轴展示不下的时候&#xff0c;可以使用dataZoom实现动态展示。如下图所示&#xff1a; 但是当鼠标放在图上面滚动滚轮时或拖动滚动条时会报错&#xff0c;…...

编程日记 2025/6/8 8:16:39

Redis故障转移

概述 本文主要讲述了Redis故障转移的原理及过程&#xff0c;可与「Redis高可用架构」文章一同阅读&#xff0c;可更好理解相关内容&#xff0c;及整个Redis高可用架构的实现原理。 Leader 选举 哨兵首先进入 WATI_START 状态进行准备&#xff0c;等待哨兵成为哨兵集群的 Leade…...

编程日记 2025/6/8 8:15:36

STM32学习笔记：定时器(TIM)原理与应用（详解篇)

前言 定时器是STM32微控制器中最重要且最常用的外设之一&#xff0c;它不仅能提供精确的定时功能&#xff0c;还能实现PWM输出、输入捕获、编码器接口等多种功能。本文将全面介绍STM32的通用定时器&#xff0c;包括其工作原理、配置方法和典型应用。 一、STM32定时器概述 定…...

编程日记 2025/6/8 8:14:34

JAVA获取ES连接并查询所有数据

我们的项目要获取es连接&#xff0c;新版本和旧版本有不小的区别&#xff0c;在8.17.0版本使用的是 ElasticsearchClient <dependency><groupId>co.elastic.clients</groupId><artifactId>elasticsearch-java</artifactId><version>8.17…...

编程日记 2025/6/8 8:13:33

408第一季 - 数据结构 - 线性表

只能用C/C&#xff01; 顺序表 闲聊 线性表的逻辑顺序和物理顺序相同 都是1234 顺序表的优点&#xff1a; 随机访问&#xff0c;随机访问的意思是访问的时间 和位置没有关系&#xff0c;访问下标1和100一样的&#xff0c;更深层就是直接计算 a100 * 数组大小&#xff0c;随便…...

编程日记 2025/6/8 8:12:27

第23讲、Odoo18 邮件系统整体架构

目录 Odoo 邮件系统整体架构邮件发送方式邮件模板配置SMTP 邮件服务器配置邮件发送过程开发中常见邮件发送需求常见问题排查提示与最佳实践完整示例&#xff1a;审批通过自动发邮件门户表单自动邮件通知案例邮件队列与异步发送邮件添加附件邮件日志与调试多语言邮件模板邮件安…...

编程日记 2025/6/8 8:10:17

【QT面试题】（三）

文章目录 Qt信号槽的优点及缺点Qt中的文件流和数据流区别&#xff1f;Qt中show和exec区别QT多线程使用的方法 (4种)QString与基本数据类型如何转换&#xff1f;QT保证多线程安全事件与信号的区别connect函数的连接方式&#xff1f;信号与槽的多种用法Qt的事件过滤器有哪些同步和…...

编程日记 2025/6/8 8:09:15

DeepSeek09-open-webui使用

Open WebUI 完全指南&#xff1a;从安装到知识库搭建与异常处理 最后更新&#xff1a;2025年6月7日 | 适用版本&#xff1a;Open WebUI v0.6.x 一、安装部署 1.1 系统要求 **Python 3.12 **&#xff08;严格版本要求&#xff0c;更高版本3.13不兼容&#xff09;Node.js 20.x内…...

编程日记 2025/6/8 8:07:03

HarmonyOS：Counter计数器组件

一、概述 计数器组件&#xff0c;提供相应的增加或者减少的计数操作。 说明 该组件从API Version 7开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 二、属性 除支持通用属性外&#xff0c;还支持以下属性。 enableInc enableInc(value: b…...

编程日记 2025/6/8 8:05:57

数据类型 -- 字符

在C中&#xff0c;字符型&#xff08;char&#xff09;用于存储单个字符&#xff0c;如字母、数字、符号等。字符型是最基本的数据类型之一&#xff0c;常用于处理文本、字符数组&#xff08;字符串&#xff09;等场景。 1. 基本类型 • char&#xff1a;标准字符类型&#x…...

编程日记 2025/6/8 8:04:55

WordZero：让Markdown与Word文档自由转换的Golang利器

在日常工作中&#xff0c;我们经常需要在Markdown和Word文档之间进行转换。Markdown方便编写和版本控制&#xff0c;而Word文档更适合正式的商务环境。作为一名Golang开发者&#xff0c;我开发了WordZero这个库&#xff0c;专门解决这个痛点。 项目背景 GitHub仓库&#xff1…...

编程日记 2025/6/8 8:03:54

sqlsugar WhereIF条件的大于等于和等于查出来的坑

一、如下图所示&#xff0c;当我用 .WhereIF(input.Plancontroltype > 0, u > u.Plancontroltype (DnjqPlancontroltype)input.Plancontroltype) 这里面用等于的时候&#xff0c;返回结果一条数据都没有。 上图中生成的SQL如下&#xff1a; SELECT id AS Id ,code AS …...

编程日记 2025/6/8 8:02:51

Pandas 技术解析：从数据结构到应用场景的深度探索

序 我最早用Python做大数据项目时&#xff0c;接触最早的就是Pandas了。觉得对于IT技术人员而言&#xff0c;它是可以属于多场景的存在&#xff0c;因为它的本身就是数据驱动的技术生态中&#xff0c;对于软件工程师而言&#xff0c;它是快速构建数据处理管道的基石&#xff1…...

编程日记 2025/6/8 8:01:50

数据库系统概论（十七）超详细讲解数据库规范化与五大范式（从函数依赖到多值依赖，再到五大范式，附带例题，表格，知识图谱对比带你一步步掌握）

数据库系统概论&#xff08;十七&#xff09;超详细讲解数据库规范化与五大范式&#xff08;从函数依赖到多值依赖&#xff0c;再到五大范式&#xff0c;附带例题&#xff0c;表格&#xff0c;知识图谱对比带你一步步掌握&#xff09; 前言一、为什么需要规范化1. 我们先想一个…...

编程日记 2025/6/8 7:59:32

[c#]判定当前软件是否用管理员权限打开

有时一些软件的逻辑中需要使用管理员权限对某些文件进行修改时&#xff0c;那么该软件在执行或者打开的场合&#xff0c;就需要用使用管理员身份运行才能达到效果。那么在c#里&#xff0c;如何判定该软件是否是对管理员身份运的呢&#xff1f; 1.取得当前的windows用户。 2.取得…...

编程日记 2025/6/8 7:58:30

并发编程实战(生产者消费者模型)

在并发编程中使用生产者和消费者模式能够解决绝大多数的并发问题。该模式通过平衡生产线程和消费线程的工作能力来提高程序整体处理数据的速度。 生产者和消费者模式&#xff1a; 在线程的世界中生产者就是产生数据的线程&#xff0c;而消费者则是消费数据的线程。在多线程开…...

编程日记 2025/6/8 7:57:28