【HTML】纯前端网页小游戏-戳破彩泡
分享一个简单有趣的网页小游戏 - 彩色泡泡爆破。玩家需要点击屏幕上随机出现的彩色泡泡来得分。
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彩色泡泡爆破</title><style>body {font-family: 'Arial', sans-serif;text-align: center;background-color: #f0f8ff;margin: 0;padding: 20px;overflow: hidden;user-select: none;}#game-container {position: relative;width: 100%;height: 70vh;border: 2px dashed #ccc;border-radius: 10px;margin: 20px auto;background-color: white;}.bubble {position: absolute;border-radius: 50%;cursor: pointer;transition: transform 0.1s;box-shadow: 0 0 10px rgba(0,0,0,0.2);}.bubble:hover {transform: scale(1.05);}#score-display {font-size: 24px;margin: 10px;color: #333;}#timer {font-size: 20px;margin: 10px;color: #e74c3c;}#start-btn {padding: 10px 20px;font-size: 18px;background-color: #2ecc71;color: white;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;}#start-btn:hover {background-color: #27ae60;}#game-over {display: none;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: rgba(255, 255, 255, 0.9);padding: 20px;border-radius: 10px;box-shadow: 0 0 20px rgba(0,0,0,0.3);}</style>
</head>
<body><h1>彩色泡泡爆破</h1><p>点击出现的泡泡得分!60秒内看你能得多少分!</p><div id="score-display">得分: 0</div><div id="timer">剩余时间: 60秒</div><button id="start-btn">开始游戏</button><div id="game-container"><div id="game-over"><h2>游戏结束!</h2><p id="final-score">你的得分: 0</p><button id="restart-btn">再玩一次</button></div></div><script>const gameContainer = document.getElementById('game-container');const scoreDisplay = document.getElementById('score-display');const timerDisplay = document.getElementById('timer');const startBtn = document.getElementById('start-btn');const gameOverDiv = document.getElementById('game-over');const finalScoreDisplay = document.getElementById('final-score');const restartBtn = document.getElementById('restart-btn');let score = 0;let timeLeft = 60;let gameInterval;let timerInterval;let isGameRunning = false;// 泡泡颜色数组const bubbleColors = ['#FF5252', '#FF4081', '#E040FB', '#7C4DFF', '#536DFE', '#448AFF', '#40C4FF', '#18FFFF', '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41', '#FFFF00', '#FFD740', '#FFAB40', '#FF6E40'];// 创建泡泡function createBubble() {if (!isGameRunning) return;const bubble = document.createElement('div');bubble.className = 'bubble';// 随机大小 (30-80px)const size = Math.floor(Math.random() * 50) + 30;bubble.style.width = `${size}px`;bubble.style.height = `${size}px`;// 随机位置const maxX = gameContainer.clientWidth - size;const maxY = gameContainer.clientHeight - size;const posX = Math.floor(Math.random() * maxX);const posY = Math.floor(Math.random() * maxY);bubble.style.left = `${posX}px`;bubble.style.top = `${posY}px`;// 随机颜色const colorIndex = Math.floor(Math.random() * bubbleColors.length);bubble.style.backgroundColor = bubbleColors[colorIndex];// 点击事件bubble.addEventListener('click', () => {if (!isGameRunning) return;// 播放爆破音效playPopSound();// 增加分数score++;scoreDisplay.textContent = `得分: ${score}`;// 爆破动画bubble.style.transform = 'scale(1.2)';bubble.style.opacity = '0';// 移除泡泡setTimeout(() => {bubble.remove();}, 200);});gameContainer.appendChild(bubble);// 泡泡自动消失 (3-6秒)setTimeout(() => {if (bubble.parentNode) {bubble.style.opacity = '0';setTimeout(() => bubble.remove(), 300);}}, Math.random() * 3000 + 3000);}// 播放爆破音效function playPopSound() {const popSound = new Audio();popSound.src = 'https://assets.mixkit.co/sfx/preview/mixkit-arcade-game-jump-coin-216.mp3';popSound.play().catch(e => console.log('无法播放音效:', e));}// 开始游戏function startGame() {if (isGameRunning) return;// 重置游戏状态score = 0;timeLeft = 60;isGameRunning = true;scoreDisplay.textContent = `得分: ${score}`;timerDisplay.textContent = `剩余时间: ${timeLeft}秒`;gameOverDiv.style.display = 'none';// 清除所有现有泡泡document.querySelectorAll('.bubble').forEach(bubble => bubble.remove());// 开始生成泡泡gameInterval = setInterval(createBubble, 800);// 开始倒计时timerInterval = setInterval(() => {timeLeft--;timerDisplay.textContent = `剩余时间: ${timeLeft}秒`;if (timeLeft <= 0) {endGame();}}, 1000);}// 结束游戏function endGame() {isGameRunning = false;clearInterval(gameInterval);clearInterval(timerInterval);// 显示游戏结束界面finalScoreDisplay.textContent = `你的得分: ${score}`;gameOverDiv.style.display = 'block';}// 事件监听startBtn.addEventListener('click', startGame);restartBtn.addEventListener('click', startGame);</script>
</body>
</html>
游戏特点
-
彩色泡泡:随机大小、颜色和位置出现的泡泡
-
点击得分:点击泡泡得分,有爆破动画效果
-
时间限制:60秒倒计时挑战
-
音效反馈:点击泡泡时有爆破音效
-
响应式设计:适应不同屏幕大小
如何扩展这个游戏
-
添加不同分数的特殊泡泡(如金色泡泡得5分)
-
增加难度级别(泡泡出现速度随时间加快)
-
添加连击系统(快速连续点击泡泡获得额外分数)
-
添加本地存储功能保存最高分
-
增加更多动画效果和音效
相关文章:
【HTML】纯前端网页小游戏-戳破彩泡
分享一个简单有趣的网页小游戏 - 彩色泡泡爆破。玩家需要点击屏幕上随机出现的彩色泡泡来得分。 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…...
【Python使用】嘿马云课堂web完整实战项目第3篇:增加数据,修改数据【附代码文档】
教程总体简介:项目概述 项目背景 项目的功能构架 项目的技术架构 CMS 什么是CMS CMS需求分析与工程搭建 静态门户工程搭建 SSI服务端包含技术 页面预览开发 4 添加“页面预览”链接 页面发布 需求分析 技术方案 测试 环境搭建 数据字典 服务端 前端 数据模型 页面原…...
数据结构【栈和队列附顺序表应用算法】
栈和队列和顺序表应用算法练习 1.栈1.1概念与结构1.2栈的实现 2.队列2.1概念与结构2.2队列的实现 3.附(顺序表应用算法)3.1移除元素3.2删除有序数组中的重复项3.3合并两个有序数组 1.栈 1.1概念与结构 栈:⼀种特殊的线性表,其只…...
Redis数据结构之String
目录 1.概述2.常见操作2.1 SET/GET2.2 MSET/MGET/MSETNX2.3 GETRANGE/SETRANGE2.4 INCR(BY)/DECR(BY)2.5 STRLEN2.6 APPEND2.7 GETSET 3.小结 1.概述 String是最常用的数据类型,一个key对应一个value。String是二进制安全的,可以包含任何数据࿰…...
Maven 远程仓库推送方法
步骤 1:配置 pom.xml 中的远程仓库地址 在项目的 pom.xml 文件中添加 distributionManagement 配置,指定远程仓库的 URL。 xml 复制 <project>...<distributionManagement><!-- 快照版本仓库 --><snapshotRepository><id…...
uname
在 C 语言中,uname 函数用于获取当前操作系统的相关信息。 它是 POSIX 标准的一部分,定义在 <sys/utsname.h> 头文件中。 通过调用 uname 函数,可以获取系统名称、节点名称(主机名)、操作系统版本、机器硬件架构…...
【无标题】object,wait,notifyAll
在 Java 中,Object类提供了wait()方法,用于线程间的协作和同步。wait()方法使得当前线程暂停执行,并释放当前对象的锁,直到其他线程调用该对象的notify()或notifyAll()方法将其唤醒。这是实现线程间通信和同步的重要机制之一。 w…...
【Vue】 核心特性实战解析:computed、watch、条件渲染与列表渲染
目录 一、计算属性(computed) ✅ 示例: 计算属性-methods实现:在插值模块里,实现函数的调用功能 计算属性-computed的实现: 计算属性-简写: ✅ 特点: ⚠️ 与 methods 的区别…...
精品可编辑PPT | 基于湖仓一体构建数据中台架构大数据湖数据仓库一体化中台解决方案
本文介绍了基于湖仓一体构建数据中台架构的技术创新与实践。它详细阐述了数据湖、数据仓库和数据中台的概念,分析了三者的区别与协作关系,指出数据湖可存储大规模结构化和非结构化数据,数据仓库用于高效存储和快速查询以支持决策,…...
基于Python网络爬虫的智能音乐可视化系统(源码+lw+部署文档+讲解),源码可白嫖!
摘要 时代在飞速进步,每个行业都在努力发展现在先进技术,通过这些先进的技术来提高自己的水平和优势,智能音乐可视化系统当然不能排除在外。我本次开发的基于网络爬虫的智能音乐可视化系统是在实际应用和软件工程的开发原理之上,…...
基于STM32与应变片的协作机械臂力反馈控制系统设计与实现----2.2 机械臂控制系统硬件架构设计
2.2 机械臂控制系统硬件架构设计 一、总体架构拓扑 1.1 典型三级硬件架构 #mermaid-svg-MWmxD3zX6bu4iFCv {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MWmxD3zX6bu4iFCv .error-icon{fill:#552222;}#mermaid-s…...
在线记事本——支持Markdown
项目地址 https://github.com/Anyuersuper/CloudNotebook 百度网盘 通过网盘分享的文件:CloudNotebook-master.zip 链接: https://pan.baidu.com/s/1kd2qNvm0eXc6_7oYDR769A?pwdyuer 提取码: yuer 📝 云笔记 (Cloud Notebook) 云笔记是一个简洁、安全…...
DDPM 做了什么
本博客主要侧重点在于HOW也就是DDPM怎么做的而不是WHY为什么要这样做 那么第一个问题DDPM做了一件什么事:这个算法通过逐渐向原图像添加噪声来破坏图像,然后再学习如何从噪声成恢复图像。 第二件事如何做到的:通过训练一个网络,…...
Redis数据结构之List
目录 1.概述2.常见操作2.1 LPUSH/RPUSH/LRANGE2.2 LPOP/RPOP2.3 LINDEX2.4 LLEN2.5 LREM2.6 LTRIM2.7 RPOPLPUSH2.8 LSET2.9 LINSERT 1.概述 List是简单的字符串列表,单key多个value,按照插入顺序排序。 支持添加一个元素到列表的头部(左边)或者尾部(右…...
L2-023 图着色问题 #DFS C++邻接矩阵存图
文章目录 题目解读输入格式输出格式 思路Ac CODE 参考 题目解读 给定一个无向图V,询问是否可以用K种颜色为V中每一个顶点分配一种颜色,使得不会有两个相邻顶点具有同一种颜色 输入格式 第一行给出V,E,K, 分别代表无向图的顶点,…...
架构下的按钮效果设置
以下是一个完整的跨QML/Qt Widgets的主题方案实现,包含对按钮阴影的统一管理: 一、项目结构 Project/ ├── core/ │ ├── thememanager.h │ └── thememanager.cpp ├── widgets/ │ ├── mainwindow.h │ ├── mainwindow.cpp …...
Unhandled exception: org.apache.poi.openxml4j.exceptions.InvalidFormatException
代码在main方法里面没有报错,在Controller里面就报错了。 原来Controller类里面少了行代码 import org.apache.poi.openxml4j.exceptions.InvalidFormatException; 加上去就解决了。...
Vue2_Vue.js教程
目录 一、Vue.js安装 1、独立版本 2、CDN 方法 3、npm 方法 二、Vue Al编程助手 三、Vue.js目录结构 目录解析 四、Vue.js 起步 1.如何定义数据对象和方法并渲染进页面 五、Vue.js 模板语法 插值 文本_{{}} Html_v-html 指令 属性_v-bind (数据传输工具)指令 表…...
2025/4/2 心得
第一题 题目描述 给定1001个范围在[1,1000]的数字,保证只有1个数字重复出现2次,其余数字只出现1次。试用O(n)时间复杂度来求出出现2次的这个数字。 不允许用数组 输入格式 第一行:一个整数1001; 第二行:1001个用…...
Deep Reinforcement Learning for Robotics翻译解读
a. 机器人能力 1 单机器人能力(Single-robot competencies) 运动能力(Mobility) 行走(Locomotion)导航(Navigation) 操作能力(Manipulation) 静态操作&…...
【Linux】日志模块实现详解
📢博客主页:https://blog.csdn.net/2301_779549673 📢博客仓库:https://gitee.com/JohnKingW/linux_test/tree/master/lesson 📢欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正! &…...
AT_abc212_d [ABC212D] Querying Multiset
链接:AT_abc212_d [ABC212D] Querying Multiset - 洛谷 题目描述 高橋君は何も書かれていないたくさんのボールと 1 つの袋を持っています。 最初、袋は空で、高橋君は Q 回の操作を行います。 それぞれの操作は以下の 3 種類のうちのいずれかです。 操作 1 : ま…...
Android使用OpenGL和MediaCodec录制
目录 一,什么是opengl 二,什么是Android OpenGL ES 三, OpenGL 绘制流程 四, OpenGL坐标系 五, OpenGL 着色器 六, GLSL编程语言 七,使用MediaCodec录制在Opengl中渲染架构 八,代码实现 8.1 自定义渲染view继承GLSurfaceView 8.2 自定义渲染器TigerRender 8.3 创建编…...
Java 实现插入排序:[通俗易懂的排序算法系列之三]
引言 大家好!欢迎继续关注我的排序算法系列。今天,我们要学习的是另一种非常基础且重要的排序算法——插入排序 (Insertion Sort)。 插入排序的思路非常贴近我们日常整理扑克牌的方式,理解起来相对自然。虽然它在最坏情况下的效率不高&…...
HarmonyOS:WebView 控制及 H5 原生交互实现
一、效果展示 二、技术栈 技术栈: 编程语言:使用 TypeScript 进行开发,借助其类型系统提升代码的可读性与稳定性。 框架与库:基于鸿蒙系统相关框架(如kit.ArkWeb、hadss/hmrouter)…...
250405-VSCode编辑launch.json实现Debug调试Open-WebUI
A. 最终效果 根据__init__.py配置launch.json 根据中utils/chat.py中form_data的messages [{role: user, content: 唐老鸭}],可以找到用户输入,进而通过关键词或模型调用的方式,对敏感问题进行特殊处理。 B. 文件配置 launch.json // { // /…...
SQL Server 数据库实验报告
1.1 实验题目:索引和数据完整性的使用 1.2 实验目的: (1)掌握SQL Server的资源管理器界面应用; (2)掌握索引的使用; (3)掌握数据完整性的…...
【寻找Linux的奥秘】第三章:基础开发工具(上)
请君浏览 前言1. 软件包管理器1.1 linux中安装软件1.2 yum的具体操作1.2.1 查找软件包1.2.2 安装软件1.2.3 卸载软件 1.3 小结 2. 编辑器vim2.1 vim的基本概念和操作2.2 命令模式的命令集光标定位其他命令模式切换(常用的) 2.3 末⾏模式的命令集2.4 小结…...
Photoshop 2025 Mac中文Ps图像编辑
Photoshop 2025 Mac中文Ps图像编辑 文章目录 Photoshop 2025 Mac中文Ps图像编辑一、介绍二、效果三、下载 一、介绍 Adobe Photoshop 2025 Mac版集成了多种强大的图像编辑、处理和创作功能。①强化了Adobe Sensei AI的应用,通过智能抠图、自动修复、图像生成等功能…...
#SVA语法滴水穿石# (004)关于 ended 和 triggered 用法
在 SystemVerilog 断言(SVA, SystemVerilog Assertions)中,ended 是一个用于 序列(sequence) 的关键字,它表示某个序列(sequence)在特定时间点已经成功匹配(即“结束”)。 ended 主要用于 同步不同序列的时间关系,尤其是在多序列组合或属性(property)中需要对齐时…...
16.1Linux自带的LED灯驱动实验(知识)_csdn
前面我们都是自己编写 LED 灯驱动,其实像 LED 灯这样非常基础的设备驱动, Linux 内核已经集成了。 Linux 内核的 LED 灯驱动采用 platform 框架,因此我们只需要按照要求在设备树文件中添加相应的 LED 节点即可,本章我们就来学习如…...
普通类、抽象类和接口的区别
1. 普通类 (Concrete Class) 定义:完整的类,可以直接实例化 特点: 可以包含属性、普通方法(有具体实现)和构造方法 可以被直接实例化创建对象 可以被继承(除非用final修饰) 示例࿱…...
使用 Elastic 实现端到端的大语言模型(LLM)可观测性:洞察生成式 AI 应用这个不透明的世界
作者:来自 Elastic Daniela Tzvetkova 及 Bahubali Shetti 在快速发展的人工智能领域,大语言模型(Large Language Models - LLMs)已成为创新的灯塔,为各行各业带来了前所未有的能力。从生成类人文本、翻译语言到提供个…...
15.2linux设备树下的platform驱动编写(程序)_csdn
我尽量讲的更详细,为了关注我的粉丝!!! 修改设备树文件: 这个我们在上一章已经写过了,但是还是带着大家来重写一遍! 1.打开pinctrl-stm32.c 这个文件: strict 成员变量默认为 true&…...
Java的Selenium的特殊元素操作与定位之window切换
当你要操作另外一个窗口页面的元素时,一定要注意先切换窗口 切换方式:传入要操作窗口的name或者句柄handle driver.switchTo.window(nameOrHandle); 如何获取到窗口的句柄 driver.getWindowHandle();//获取当前操作窗口的句柄driver.getWindowHandles();//获取测…...
【Rust学习】Rust环境搭建和Rust基础语法
本文专栏:Rust学习 目录 一,Rust环境搭建 1,C环境安装 2,Rust下载 3,Rust安装 4,Rust环境检测 二,创建Rust项目 1,rustc 2,cargo 三,输出到命令行 …...
在windows环境下通过docker-compose脚本自动创建mysql和redis
一、环境版本 在windows环境下通过docker容器运行各种服务,使用的软件版本如下: docker desktop :V4.39.0 【docker的安装环境设置略】 mysql:9.2 redis:7.4.2 二、各配置文件 1.已经解决了字符集和排序规则问题造成…...
【玩泰山派】2、制作buildroot镜像,并烧录
文章目录 前言制作buildroot镜像过程搭建环境(docker版)下载泰山派开发的sdk利用制作的镜像和下载的sdk去启动开发docker容器编译buildroot镜像 参考 前言 泰山派官方提供了不少现成的镜像 但是都买了泰山派了,肯定是想自己编译折腾下&…...
实验二 VLAN 的配置与应用
一、实验目的 1. 熟悉 VLAN 和 PORT VLAN 的原理; 2. 熟悉华为网络模拟器的使用; 3. 掌握网络拓扑图的绘制; 4. 掌握单交换机内 VLAN 的配置。 二、实验设备 PC、华为模拟器 ENSP。 三、实验步骤 知识准备:VLAN 和 PORT V…...
【C/C++算法】蓝桥杯之递归算法(如何编写想出递归写法)
绪论:冲击蓝桥杯一起加油!! 每日激励:“不设限和自我肯定的心态:I can do all things。 — Stephen Curry” 绪论: ———————— 早关注不迷路,话不多说安全带系好,发车啦&am…...
coding ability 展开第九幕(位运算——进阶篇)超详细!!!!
文章目录 前言丢失的数字两整数之和只出现一次的数字II消失的两个数字总结 前言 上一篇博客,我们已经把位运算的基础知识,以及基本运算都掌握啦 上次的习题还是让人意犹未尽,今天我们来尝试一下难一点的题目 位运算熟练起来真的让人觉得做题是…...
Python实现NOA星雀优化算法优化随机森林回归模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 在现代数据科学领域,回归分析是解决预测问题的核心工具之一。然而,在面对复…...
蓝桥云客--浓缩咖啡液
4.浓缩咖啡液【算法赛】 - 蓝桥云课 问题描述 蓝桥杯备赛选手小蓝最近刷题刷到犯困,决定靠咖啡续命。他手上有 N 种浓缩咖啡液,浓度分别是 A1%, A2%, …, AN%,每种存货都是无限的。为了提神又不炸脑,小蓝需要按比例混合这…...
异常【C++】
文章目录 异常异常的概念和基本语法异常的三个关键字: 异常抛出和被接收的过程异常的再次抛出再次抛出被非catch(...)捕捉到的异常再次抛出被catch(...)捕捉到的异常 异常规范异常安全异常的优缺点优点缺点总结&#x…...
关于图片分类任务的猜想 | 撰写论文 paper
关于图片分类任务的猜想 | 撰写论文 paper 背景Yolo 是一次巨大的飞跃过滤无关的特征Yolo 的问题 背景 在计算视觉领域,有几个关键的演变。 1)CNN 卷积的出现,这是一个大的创新; 2)从卷积到 AlexNet ,是更…...
路由器和交换机
路由器和交换机分别位于OSI模型和TCP/IP模型的不同网络层次,具体对比如下: 1. 路由器(Router) 所属层级: OSI模型:网络层(第3层)TCP/IP模型:网络互联层(Int…...
jEasyUI 表单验证
jEasyUI 表单验证 引言 jEasyUI 是一款流行的 jQuery UI 扩展库,它提供了丰富的 UI 组件和交互效果,极大地方便了前端开发工作。在 jEasyUI 中,表单验证是一个非常重要的功能,它可以帮助开发者确保用户输入的数据符合预期的格式和规则。本文将详细介绍 jEasyUI 表单验证的…...
PIKE 助力知识库进阶:多模型协作下的精准信息 “捕手”
PIKE(通常指的是字节跳动提出的一种技术)增强检索知识库是一种结合了先进的信息检索技术和知识库管理的系统。它旨在提高知识检索的准确性、效率和召回率,以更好地满足用户对知识的需求。 特点和工作原理 数据增强 :对知识库中…...
使用Ubuntu18恢复群晖nas硬盘数据外接usb
使用Ubuntu18恢复群晖nas硬盘数据外接usb 1. 接入硬盘2.使用Ubuntu183.查看nas硬盘信息3. 挂载nas3.1 挂载损坏nas硬盘(USB)3.2 挂载当前运行的nas 4. 拷贝数据分批传输 5. 新旧数据对比 Synology NAS 出现故障,DS DiskStation损坏,则可以使用计算机和 U…...
Dify票据识别遇到的分支判断不准确问题
已测试这篇文章中 https://zhuanlan.zhihu.com/p/5465385787 使用多分支条件判断使用不同的大模型识别图片内容 发现了细节问题。在使用时若不注意,分支会出现走向不准的问题。 需要关注部分 下方红框处。1,2后不能跟点。否则会出问。除此之外࿰…...