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

【HTML】纯前端网页小游戏-戳破彩泡

article 2026/2/5 4:09:23

分享一个简单有趣的网页小游戏 - 彩色泡泡爆破。玩家需要点击屏幕上随机出现的彩色泡泡来得分。 

<!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>

游戏特点

  1. 彩色泡泡：随机大小、颜色和位置出现的泡泡

  2. 点击得分：点击泡泡得分，有爆破动画效果

  3. 时间限制：60秒倒计时挑战

  4. 音效反馈：点击泡泡时有爆破音效

  5. 响应式设计：适应不同屏幕大小

如何扩展这个游戏

  1. 添加不同分数的特殊泡泡（如金色泡泡得5分）

  2. 增加难度级别（泡泡出现速度随时间加快）

  3. 添加连击系统（快速连续点击泡泡获得额外分数）

  4. 添加本地存储功能保存最高分

  5. 增加更多动画效果和音效

相关文章：

【HTML】纯前端网页小游戏-戳破彩泡

分享一个简单有趣的网页小游戏 - 彩色泡泡爆破。玩家需要点击屏幕上随机出现的彩色泡泡来得分。 <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-wi…...

编程日记 2026/1/27 15:36:02

【MATLAB定位例程】TDOA（到达时间差）的chan-tylor，三维环境，附完整代码

该代码实现了基于三维空间的动态目标TDOA定位，结合了Chan算法（解析解）与Taylor级数展开法（迭代优化）的双重优势。 文章目录 运行结果MATLAB代码代码讲解代码功能概述核心算法原理代码结构解析可视化与结果分析运行结果 定位示意图： 三轴状态曲线： 三轴误差曲线： MA…...

编程日记 2026/2/4 15:43:11

数字化转型中的开源AI智能客服与S2B2C商城小程序的融合创新

摘要 数字经济时代&#xff0c;企业需通过技术重构用户交互与供应链体系。本文以“开源AI智能客服”“AI智能名片”及“S2B2C商城小程序”为核心&#xff0c;研究三者如何通过技术协同与场景化应用实现企业营销、客户服务与供应链管理的智能化升级。通过案例分析、技术架构设…...

编程日记 2026/2/4 1:27:29

重生之我是去噪高手——diffusion model

diffusion model是如何运作的&#xff1f; 想象一下&#xff0c;你有一张清晰的图片。扩散模型的核心思想分为两个过程&#xff1a; 前向过程&#xff08;Forward Process / Diffusion Process&#xff09;&#xff1a;逐步加噪反向过程&#xff08;Reverse Process / Denois…...

编程日记 2026/2/2 4:05:15

【C#】.net core 6.0 依赖注入常见问题之一，在构造函数使用的类，都需要注入到容器里，否则会提示如下报错，让DeepSeek找找原因，看看效果

&#x1f339;欢迎来到《小5讲堂》&#x1f339; &#x1f339;这是《C#》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。&#x1f339; &#x1f339;温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01;&#…...

编程日记 2026/2/1 22:50:49

论文阅读笔记——RDT-1B: A DIFFUSION FOUNDATION MODEL FOR BIMANUAL MANIPULATION

RDT-1B 论文 模型表达与泛化能力&#xff1a;由于双臂操作中动作空间维度是单臂空间的两倍&#xff0c;传统方法难以建模其多模态分布。 数据&#xff1a;双臂数据少且不同机器人的物理结构和动作空间差异&#xff08;如关节数、运动范围&#xff09;导致数据分布不一致&#x…...

编程日记 2026/2/4 17:40:11

Vue中将pdf文件转为图片

平时开发中，我们经常遇到的场景应该是调用后端接口返回给前端pdf格式的文件流，然后我们可以通过URL.createObjectURL的方式转为object url临时路径然后可以通过window.open的方式来打开一个新的浏览器页签来进行预览，效果如下图： 但有时候这样满足不了的需求，它不想这样预…...

编程日记 2026/2/3 0:09:05

day39——输入操作：多值输入

数组输入&#xff1a; int main() {//***** 1、多值输入&#xff08;C&#xff09;/*输入&#xff1a;3 --> 3个值5 4 9*/int n;cin >> n; //输入个数const int MAX_SIZE 0xFFFF;//限定最大个数int a[MAX_SIZE];for (int i 0; i < n; i) {//用 n 作控制输入…...

编程日记 2026/2/4 21:27:08

微软的 Copilot 现在可以浏览网页并为您执行操作

在庆祝其 50 岁生日之际&#xff0c;微软正在向其人工智能驱动的 Copilot 聊天机器人传授一些新技巧。 从 BASIC 到 AI&#xff0c;改变世界的公司&#xff1a;微软 微软表示&#xff0c;Copilot 现在可以在“大多数网站”上采取行动&#xff0c;使其能够预订门票、预订餐厅等…...

编程日记 2026/2/3 2:36:53

elasticsearch 7.17 索引模板

文章目录 概要 概要 模板 import cn.hutool.core.util.ObjectUtil; import cn.hutool.core.util.StrUtil; import cn.introns.framework.es.builder.OperationsBuilder; import java.util.HashMap; import java.util.Map;abstract class AbstractBuilder<T extends Abstrac…...

编程日记 2025/6/6 5:00:44

深入理解Python元组：从基础到高级应用

1. 元组基础认知 1.1 什么是元组 不可变序列&#xff1a;元组(tuple)是Python内置的不可变序列类型异构容器&#xff1a;可以存储不同类型的数据&#xff08;与列表类似&#xff09;语法特征&#xff1a;使用圆括号()定义&#xff0c;元素间用逗号分隔 # 基本示例 t1 (1, 2…...

编程日记 2026/2/4 8:05:08

【零基础入门unity游戏开发——动画篇】unity旧动画系统Animation组件的使用

考虑到每个人基础可能不一样&#xff0c;且并不是所有人都有同时做2D、3D开发的需求&#xff0c;所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】&#xff1a;主要讲解C#的基础语法&#xff0c;包括变量、数据类型、运算符、…...

编程日记 2026/2/4 4:44:40

Python+AI提示词用贝叶斯样条回归拟合BSF方法分析樱花花期数据模型构建迹图、森林图可视化

原文链接&#xff1a;https://tecdat.cn/?p41308 在数据科学的领域中&#xff0c;我们常常会遇到需要处理复杂关系的数据。在众多的数据分析方法中&#xff0c;样条拟合是一种非常有效的处理数据非线性关系的手段。本专题合集围绕如何使用PyMC软件&#xff0c;对樱花花期数据进…...

编程日记 2026/2/4 1:55:14

记一个.NET AOT交叉编译时的坑

记一个.NET AOT交叉编译时的坑 背景&#xff1a; 使用.NET9开发的Avalonia项目需要部署到Linux-arm64 踩坑&#xff1a; 根据官方AOT交叉编译文档配置后执行打包 dotnet publish -r linux-arm64提示error : The PrivateSdkAssemblies ItemGroup is required for _ComputeA…...

编程日记 2025/12/1 14:46:30

消息中间件对比与选型指南：Kafka、ActiveMQ、RabbitMQ与RocketMQ

目录 引言 消息中间件的定义与作用 消息中间件在分布式系统中的重要性 对比分析的四种主流消息中间件概述 消息中间件核心特性对比 消息传递模型 Kafka&#xff1a;专注于发布-订阅模型 ActiveMQ&#xff1a;支持点对点和发布-订阅两种模型 RabbitMQ&#xff1a;支持点…...

编程日记 2025/11/21 5:18:05

实战打靶集锦-38-inclusiveness

文章目录 1. 主机发现2. 端口扫描&服务枚举3. 服务探查4.系统提权 靶机地址&#xff1a;https://download.vulnhub.com/inclusiveness/Inclusiveness.ova 1. 主机发现 目前只知道目标靶机在192.168.56.xx网段&#xff0c;通过如下的命令&#xff0c;看看这个网段上在线的主…...

编程日记 2026/2/2 16:31:53

JVM 学习计划表（2025 版）

JVM 学习计划表&#xff08;2025 版&#xff09; &#x1f4da; 基础阶段&#xff08;2 周&#xff09; 1. JVM 核心概念 ​JVM 作用与体系结构 理解 JVM 在 Java 跨平台运行中的核心作用&#xff0c;掌握类加载子系统、运行时数据区、执行引擎的交互流程​内存结构与数据存…...

编程日记 2025/11/24 12:42:34

Unhandled exception: org.apache.poi.openxml4j.exceptions.InvalidFormatException

代码在main方法里面没有报错&#xff0c;在Controller里面就报错了。 原来Controller类里面少了行代码 import org.apache.poi.openxml4j.exceptions.InvalidFormatException; 加上去就解决了。...

编程日记 2026/2/4 3:52:28

Java的Selenium元素定位-xpath

xpath其实就是一个path(路径)&#xff0c;一个描述页面元素位置信息的路径&#xff0c;相当于元素的坐标xpath基于XML文档树状结构&#xff0c;是XML路径语言&#xff0c;用来查询xml文档中的节点。 绝对定位 从根开始找--/(根目录)/html/body/div[2]/div/form/div[5]/button缺…...

编程日记 2025/11/28 7:36:42

【QT】Qt5 QtWebEngine使用教程

目录 1、QtWebEngine相比于QtWebKit的优势2、项目配置2.1 确认 Qt 版本2.2 在.pro 文件中添加依赖3、显示网页4、实现Qt和网页JavaScript之间的交互4.1 Qt执行网页的JavaScript代码4.2 JavaScript调用Qt对象的函数QtWebEngine 是 Qt 框架中用于在应用程序中嵌入 Web 内容的模块…...

编程日记 2025/11/17 5:53:50

python基础-13-处理excel电子表格

文章目录 【README】【13】处理Excel电子表格【13.1】Excel文档【13.2】安装openpyxl模块【13.3】读取Excel文档【13.3.1】使用openpyxl模块打开excel文档【13.3.2】从工作簿取得工作表【13.3.3】从工作表sheet获取单元格cell【13.3.5】从表中获取行和列【13.3.6】工作簿、工作…...

编程日记 2026/1/8 7:38:04

03.unity开发资源 获取

03.unity开发资源 获取 提示&#xff1a;帮帮志会陆续更新非常多的IT技术知识&#xff0c;希望分享的内容对您有用。本章分享的是Python基础语法。前后每一小节的内容是存在的有&#xff1a;学习and理解的关联性&#xff0c;希望对您有用~ unity简介-unity基础 第三节 &#xf…...

编程日记 2026/2/4 7:58:51

设计模式简述（四）模板方法模式

模板方法模式 描述基本定义使用 描述 当一系列业务的基本流程是相同的&#xff0c;对于不同的业务可以在各自子类实现 所谓模板方法指的就是父类中固定的那部分代码 其实这里的思想和前面设计原则中开闭原则的描述是一致的&#xff0c;父类中的模板代码就是稳定的部分&#x…...

编程日记 2025/12/14 5:46:34

OpenCV界面编程

《OpenCV计算机视觉开发实践&#xff1a;基于Python&#xff08;人工智能技术丛书&#xff09;》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 OpenCV的Python开发环境搭建(Windows)-CSDN博客 OpenCV也支持有限的界面编程&#xff0c;主要是针对窗口、控件和鼠标…...

编程日记 2026/2/4 8:42:29

【leetcode】记录与查找：哈希表的题型分析

前言 &#x1f31f;&#x1f31f;本期讲解关于力扣的几篇题解的详细介绍~~~ &#x1f308;感兴趣的小伙伴看一看小编主页&#xff1a;GGBondlctrl-CSDN博客 &#x1f525; 你的点赞就是小编不断更新的最大动力 &#x1f386;那么废话不…...

编程日记 2026/2/4 5:20:22

AntDesign下，Select内嵌Menu标签，做一个多选下拉框，既可以搜索，还可以选择下拉项

话不多说&#xff0c;直接上效果和代码 效果图一&#xff1a; 效果图二&#xff1a; renderAddStyleOption (item: any) > {const { value } this.props;const { currentSelectedOptionIds, currentStyleId } this.state;const styleSettings value?.styleSettings;c…...

编程日记 2026/2/2 2:30:57

css炫酷的3D水波纹文字效果实现详解

炫酷的3D水波纹文字效果实现详解 这里写目录标题 炫酷的3D水波纹文字效果实现详解项目概述技术栈核心实现1. 基础布局2. 渐变背景3. 文字效果实现3.1 基础样式3.2 文字漂浮动画 4. 水波纹效果4.1 模糊效果4.2 水波动画 5. 交互效果 技术要点项目难点与解决方案总结 项目概述 在…...

编程日记 2026/2/4 4:44:56

P1036 [NOIP 2002 普及组] 选数（DFS）

题目描述 已知 n 个整数 x1​,x2​,⋯,xn​&#xff0c;以及 1 个整数 k&#xff08;k<n&#xff09;。从 n 个整数中任选 k 个整数相加&#xff0c;可分别得到一系列的和。例如当 n4&#xff0c;k3&#xff0c;4 个整数分别为 3,7,12,19 时&#xff0c;可得全部的组合与它…...

编程日记 2026/2/4 6:08:34

PyTorch中.pth文件的解析及应用

文章目录 一、.pth文件简介二、如何保存.pth文件三、如何加载.pth文件跨硬件加载加载后操作 四、.pth文件的结构与内容解析.pth文件示例 五、.pth文件的优缺点优点缺点 六、常见应用场景七、模型文件体积优化技巧问题背景解决方案效果对比 八、总结九、参考 一、.pth文件简介 …...

编程日记 2026/1/25 6:39:00

【doris】在线事务处理

目录 1. 说明2. 特点3. 应用场景4. 技术实现5. OLTP 与 OLAP 的对比6. 挑战7. 发展趋势 1. 说明 1.OLTP&#xff08;Online Transaction Processing&#xff0c;在线事务处理&#xff09; 是一种用于处理大量日常事务操作的数据库系统类型。2.它主要面向实时性要求高、数据操作…...

编程日记 2026/1/26 0:00:36