HTML5+JavaScript实现消消乐游戏
HTML5+JavaScript实现消消乐游戏
点击两个相邻的方块来交换它们位置。
如果交换后形成三个或更多相同图案的方块连成一线，这些方块会被消除。
消除后，上方的方块会下落填补空缺，顶部会生成新的方块。
每消除一个方块得10分。例如，如果一次消除了4个方块，玩家将得到40分。
运行效果如下图：
源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>基础消消乐游戏 - Emoji版</title><style>body {display: flex;flex-direction: column;justify-content: center;align-items: center;height: 100vh;margin: 0;background-color: #f0f0f0;font-family: Arial, sans-serif;}#gameContainer {display: flex;flex-direction: column;align-items: center;}canvas {border: 2px solid #000;margin-bottom: 10px;}#scoreDisplay {font-size: 24px;margin-bottom: 10px;}</style>
</head>
<body><div id="gameContainer"><div id="scoreDisplay">分数: 0</div><canvas id="gameCanvas" width="400" height="400"></canvas></div><script>const canvas = document.getElementById('gameCanvas');const ctx = canvas.getContext('2d');const scoreDisplay = document.getElementById('scoreDisplay');const GRID_SIZE = 8;const CELL_SIZE = canvas.width / GRID_SIZE;const EMOJIS = ['☮', '⚜', '♾ ', '☯', '⚛', '✳'];let grid = [];let selectedCell = null;let score = 0;function initGrid() {for (let i = 0; i < GRID_SIZE; i++) {grid[i] = [];for (let j = 0; j < GRID_SIZE; j++) {grid[i][j] = EMOJIS[Math.floor(Math.random() * EMOJIS.length)];}}}function drawGrid() {ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.font = `${CELL_SIZE * 0.8}px Arial`;ctx.textAlign = 'center';ctx.textBaseline = 'middle';for (let i = 0; i < GRID_SIZE; i++) {for (let j = 0; j < GRID_SIZE; j++) {ctx.fillText(grid[i][j], i * CELL_SIZE + CELL_SIZE / 2, j * CELL_SIZE + CELL_SIZE / 2);}}if (selectedCell) {ctx.strokeStyle = 'black';ctx.lineWidth = 2;ctx.strokeRect(selectedCell.x * CELL_SIZE, selectedCell.y * CELL_SIZE, CELL_SIZE, CELL_SIZE);}}function checkMatches() {let matched = [];// 检查水平匹配for (let j = 0; j < GRID_SIZE; j++) {let streak = 1;for (let i = 1; i < GRID_SIZE; i++) {if (grid[i][j] === grid[i-1][j]) {streak++;} else {if (streak >= 3) {for (let k = i - streak; k < i; k++) {matched.push({x: k, y: j});}}streak = 1;}}if (streak >= 3) {for (let k = GRID_SIZE - streak; k < GRID_SIZE; k++) {matched.push({x: k, y: j});}}}// 检查垂直匹配for (let i = 0; i < GRID_SIZE; i++) {let streak = 1;for (let j = 1; j < GRID_SIZE; j++) {if (grid[i][j] === grid[i][j-1]) {streak++;} else {if (streak >= 3) {for (let k = j - streak; k < j; k++) {matched.push({x: i, y: k});}}streak = 1;}}if (streak >= 3) {for (let k = GRID_SIZE - streak; k < GRID_SIZE; k++) {matched.push({x: i, y: k});}}}return matched;}function removeMatches(matches) {matches.forEach(cell => {grid[cell.x][cell.y] = null;});//updateScore(matches.length);}function updateScore(matchCount) {score += matchCount * 10;scoreDisplay.textContent = `分数: ${score}`;}function fillBlanks() {for (let i = 0; i < GRID_SIZE; i++) {let blanks = 0;for (let j = GRID_SIZE - 1; j >= 0; j--) {if (!grid[i][j]) {blanks++;} else if (blanks > 0) {grid[i][j + blanks] = grid[i][j];grid[i][j] = null;}}for (let j = 0; j < blanks; j++) {grid[i][j] = EMOJIS[Math.floor(Math.random() * EMOJIS.length)];}}}function swapCells(cell1, cell2) {const temp = grid[cell1.x][cell1.y];grid[cell1.x][cell1.y] = grid[cell2.x][cell2.y];grid[cell2.x][cell2.y] = temp;}canvas.addEventListener('click', (event) => {const rect = canvas.getBoundingClientRect();const x = Math.floor((event.clientX - rect.left) / CELL_SIZE);const y = Math.floor((event.clientY - rect.top) / CELL_SIZE);if (selectedCell) {if ((Math.abs(selectedCell.x - x) === 1 && selectedCell.y === y) ||(Math.abs(selectedCell.y - y) === 1 && selectedCell.x === x)) {swapCells(selectedCell, {x, y});let matches = checkMatches();if (matches.length === 0) {swapCells(selectedCell, {x, y});} else {let totalMatches = 0;while (matches.length > 0) {totalMatches += matches.length;removeMatches(matches);fillBlanks();matches = checkMatches();}updateScore(totalMatches); // 在所有匹配处理完后更新分数}}selectedCell = null;} else {selectedCell = {x, y};}drawGrid();});function gameLoop() {drawGrid();requestAnimationFrame(gameLoop);}initGrid();gameLoop();</script>
</body>
</html>
相关文章：
HTML5+JavaScript实现消消乐游戏
HTML5JavaScript实现消消乐游戏 点击两个相邻的方块来交换它们位置。 如果交换后形成三个或更多相同图案的方块连成一线，这些方块会被消除。 消除后，上方的方块会下落填补空缺，顶部会生成新的方块。 每消除一个方块得10分。例如࿰…...
sin函数拟合
目录 一、 目的... 1 二、 模型设计... 1 2.1 输入与输出.... 1 2.2 隐藏层设计.... 1 2.3 优化算法与损失函数.... 1 2.4 神经网络结构.... 1 三、 训练... 1 3.1 数据生成.... 2 3.2 训练过程.... 2 3.3 训练参数与设置.... 2 四、 测试与分析... 2 4.1 选取不同激活函数....…...
设置Mysql5.6允许外网访问
设置mysql用户支持外网访问步骤： 需要使用root权限登录mysql，更新mysql.user表，设置指定用户的Host字段为%，默认一般为127.0.0.1或者localhost。 1.登录数据库 1 mysql -u root -p 输入密码 1 mysql> use mysql; 2.查询hos…...
【随笔】一次JS和python中的MD5加密的记录
// 使用CryptoJS进行MD5加密和Base64编码 const sign CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(CryptoJS.MD5(sign2encrypt).toString()));上面这段JS和下面这个python等价 def hash_and_encode(input_string):sign2encrypt input_string# 使用 hashlib 进行 …...
力扣 二叉树的中序遍历
用了递归遍历，关于树的经典例题。 题目 递归 常规做法即递归了，不会写也得背下来。递归可以大致理解方法调用自身，先写中序遍历递归的方法，递归一定要有递归出口，当遍历到节点为空时返回，即已经找到了。…...
uniapp学习（010-3 实现H5和安卓打包上线）
零基础入门uniapp Vue3组合式API版本到咸虾米壁纸项目实战，开发打包微信小程序、抖音小程序、H5、安卓APP客户端等 总时长 23:40:00 共116P 此文章包含第114p-116p的内容 文章目录 H5配置文件设置开始打包上传代码 安卓设置模拟器启动设置基础配置设置图标启动界面…...
基于DHCP，ACL的通信
该问题为华为的学习资料 1.首先把所有的PC机全部设置为DHCP 2.配置地址 3.ospf 4.dhcp 5.acl AR1 dhcp en interface GigabitEthernet0/0/0ip address 192.168.1.254 255.255.255.0 dhcp select global interface GigabitEthernet0/0/1ip address 10.1.12.1 255.255.255.…...
金融租赁系统助力企业升级与风险管理的新篇章
内容概要 在当今的商业环境中，“金融租赁系统”可谓是企业成功的秘密武器。简单来说，这个系统就像一位聪明的财务顾问，帮助企业在资金和资源的运用上达到最优化。从设备采购到项目融资，它提供了一种灵活的方式，让企业…...
linux安装部署mysql资料
安装虚拟机 等待检查完成 选择中文 软件选择 网络和主机名 开始安装 设置root密码 ADH-password 创建用户 等待安装完成 重启 接受许可证 Centos 7 64安装完成 安装mysql开始 Putty连接指定服务器 在 opt目录下新建download目录 将mysql文件传到该目录下 查看linux服务器的…...
深入理解 MongoDB：一款灵活高效的 NoSQL 数据库
在现代应用程序开发中，数据存储技术已经从传统的关系型数据库（RDBMS）扩展到多样化的 NoSQL 数据库。MongoDB 作为一款广泛使用的文档型数据库，以其灵活性、高性能和易用性成为开发者的首选之一。本篇博文将从 MongoDB 的核心概念、…...
爆改老旧笔记本---将笔记本改造为家用linux服务器
爆改老旧笔记本---将笔记本改造为家用linux服务器 linux启动盘制作镜像文件分区类型:MBR分区和GPT分区的定义MBR分区（Master Boot Record）GPT分区（GUID Partition Table）应用场景和优势MBR的应用场景和优势GPT的应用场景和优势 Li…...
RocketMQ MQTT Windows10 环境启动
RocketMQ MQTT Windows10 环境启动 参考环境和软件版本下载资源启动RocketMQ启动RocketMQ MQTT 参考 https://blog.csdn.net/weixin_43114058/article/details/140043257 https://blog.csdn.net/yangxiaovip/article/details/138355443 环境和软件版本 操作系统：…...
sd webui整合包怎么安装comfyui
环境： sd webui整合包 comfyui 问题描述： sd webui整合包怎么安装comfyui 扩展安装不成功 解决方案： 1.直接下载 ，解压到SD文件夹里（或者git拉一下） 2.ComfyUI模型共享：如果本机部署过Webui，那么ComfyUI可以与WebUI公用一套模型，防止复制大量模型浪费空间 将…...
Edify 3D: Scalable High-Quality 3D Asset Generation
Deep Imagination Research | NVIDIA 目录 一、Abstract 二、核心内容 1、多视图扩散模型 3、重建模型： 4、数据处理模块： 三、结果 1、文本到 3D 生成结果 2、图像到 3D 生成结果 3、四边形网格拓扑结构 一、Abstract NVIDIA 开发的用于高质量…...
鸿蒙HarmonyOS学习笔记（6）
定义扩展组件样式：Extend装饰器 在前文的示例中，可以使用Styles用于样式的重用，在Styles的基础上，我们提供了Extend，用于扩展原生组件样式。 说明 从API version 9开始，该装饰器支持在ArkTS卡片中使用。 从…...
蓝桥杯备赛笔记（一）
这里的笔记是关于蓝桥杯关键知识点的记录，有别于基础语法，很多内容只要求会用就行，无需深入掌握。 文章目录 前言一、编程基础1.1 C基础格式和版本选择1.2 输入输出cin和cout： 1.3 string以下是字符串的一些简介：字符串…...
在Java中使用Apache POI导入导出Excel（二）
本文将继续介绍POI的使用，上接在Java中使用Apache POI导入导出Excel（一） 使用Apache POI组件操作Excel（二） 14、读取和重写工作簿 try (InputStream inp new FileInputStream("workbook.xls")) { //Inpu…...
linux 中后端jar包启动不起来怎么回事 -bash: java: 未找到命令
一、用以下命令检查jdk版本 输入：java -version，如果JDK 环境变量没有配置，你会看到如下提示 二、配置jdk环境 1.先找到/etc/profile文件，然后在该文件最后面加上以下配置 export JAVA_HOME/usr/local/jdk-21.0.1 export PATH$…...
六大排序算法：插入排序、希尔排序、选择排序、冒泡排序、堆排序、快速排序
本章讲述数据结构中的六大排序算法 欢迎大佬们踊跃讨论，感谢大家支持！ 我的博客主页链接 六大排序算法 一.插入排序1.1 直接插入排序1.2 希尔排序 二.选择排序2.1 单向选择排序2.2双向选择排序2.3 堆排序 三.交换排序3.1 冒泡排序3.2 快速排序3.2.1 Hoa…...
快速排序（C++实现）
基本思想 任取一个元素为中心，所有比它小的元素一律前放，比他大的元素一律后放，形成左右两个子表；对各子表重新选择中心元素并依此规则调整，直到每个子表的元素只剩一个。 通过一趟排序，将待排序记录分割成…...
Z-Image-Turbo_Sugar脸部Lora模型服务运维指南：监控、日志与故障排查
Z-Image-Turbo_Sugar脸部Lora模型服务运维指南：监控、日志与故障排查 最近在帮一个做创意设计的朋友维护他们的AI图像生成服务，他们用的就是Z-Image-Turbo_Sugar这个专门生成特定风格人脸的Lora模型。朋友跟我吐槽，说服务时不时就“抽风”&a…...
AsrTools终极指南：三步实现免费语音转文本，效率提升300%的完整方案
AsrTools终极指南：三步实现免费语音转文本，效率提升300%的完整方案 【免费下载链接】AsrTools ✨ AsrTools: Smart Voice-to-Text Tool | Efficient Batch Processing | User-Friendly Interface | No GPU Required | Supports SRT/TXT Output | Turn yo…...
颠覆原神体验：Snap Hutao智能助手如何重构你的游戏效率
颠覆原神体验：Snap Hutao智能助手如何重构你的游戏效率 【免费下载链接】Snap.Hutao 实用的开源多功能原神工具箱 🧰 / Multifunctional Open-Source Genshin Impact Toolkit 🧰 项目地址: https://gitcode.com/GitHub_Trending/sn/Snap.Hu…...
手把手教你用FUTURE POLICE：会议录音秒变带时间轴字幕
手把手教你用FUTURE POLICE：会议录音秒变带时间轴字幕 1. 为什么需要高精度字幕对齐？ 在日常工作中，我们经常遇到这样的场景：重要会议录音需要整理成文字稿，但人工听写耗时耗力；视频剪辑时需要添加字幕&a…...
Blender 3MF插件终极指南：从零开始掌握3D打印文件格式
Blender 3MF插件终极指南：从零开始掌握3D打印文件格式 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 3MF（3D Manufacturing Format）格…...
springboot+vue基于web的在线学习资源推荐的设计与实现
目录功能模块分析推荐系统功能交互功能设计后台管理功能技术实现要点项目技术支持源码获取详细视频演示 ：文章底部获取博主联系方式！同行可合作功能模块分析 用户管理模块 用户注册与登录：支持邮箱/手机号注册，提供密码找回功能…...
QT6.5串口编程第一步：用CMakeLists.txt引入SerialPort模块的避坑指南
QT6.5串口编程避坑指南：CMakeLists.txt配置全解析 当你满怀期待地在QT6.5项目中引入串口通信功能，却在编译时遭遇"找不到QtSerialPort"的红色错误提示，这种挫败感我深有体会。作为一位经历过无数次类似"战斗"的开发者&am…...
弦音墨影保姆级教程：解决‘视频加载失败’‘墨迹不跟随目标’等10类高频问题
弦音墨影保姆级教程：解决‘视频加载失败’‘墨迹不跟随目标’等10类高频问题 1. 系统简介与核心价值 「弦音墨影」是一款将人工智能技术与传统美学完美融合的视频分析工具。它采用水墨丹青的视觉风格，通过先进的Qwen2.5-VL多模态技术，让视频…...
终极指南：5分钟掌握Piper鼠标地图组件与SVG渲染核心技术
终极指南：5分钟掌握Piper鼠标地图组件与SVG渲染核心技术 【免费下载链接】piper GTK application to configure gaming devices 项目地址: https://gitcode.com/gh_mirrors/pip/piper Piper是一款功能强大的GTK应用程序，专为配置游戏设备而设计。…...
利用COMSOL软件对变压器局部放电超声波传播特性进行了有限元声学仿真，首先建立包括变压器油、...
利用COMSOL软件对变压器局部放电超声波传播特性进行了有限元声学仿真，首先建立包括变压器油、铁芯、绕组和基座的变压器几何模型，选取符合声压波动方程的压力声学物理场，建立了局放超声波声源模型，可用于研究固定声源的声压时间和…...