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

html简易实现推箱子小游戏原理（易上手）

article 2026/1/25 6:38:05

实现效果

使用方向键移动，将橙色箱子推到绿色目标区域（黑色块为墙，白色块为可通过区域，蓝球为小人）

实现过程

<!DOCTYPE html>
<html>
<head><title>推箱子小游戏</title><style>.game-container {display: grid;grid-template-columns: repeat(8, 50px);gap: 2px;background: #333;padding: 10px;}.cell {width: 50px;height: 50px;background: #eee;display: flex;align-items: center;justify-content: center;font-size: 24px;}.wall {background: #444;}.box {background: #ff9900;border-radius: 5px;}.player {background: #2196F3;border-radius: 50%;width: 35px;height: 35px;}.target {background: #4CAF50;}.box-on-target {background: #8BC34A;}</style>
</head>
<body><div class="game-container" id="game"></div><p>使用方向键移动，将橙色箱子推到绿色目标区域（黑色块为墙，白色块为可通过区域，蓝球为小人）</p><script>// 关卡配置const level = [[1, 1, 1, 1, 1, 1, 1, 1],[1, 0, 0, 0, 0, 0, 0, 1],[1, 0, 2, 3, 0, 2, 0, 1],[1, 0, 1, 3, 4, 1, 0, 1],[1, 0, 2, 0, 3, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 1],[1, 1, 1, 1, 1, 1, 1, 1]];let playerPosition = { x: 4, y: 3 };let boxes = [];const gameContainer = document.getElementById('game');// 初始化游戏function initGame() {gameContainer.innerHTML = '';boxes = [];level.forEach((row, y) => {row.forEach((cell, x) => {const cellElement = document.createElement('div');cellElement.className = 'cell';switch(cell) {case 1: cellElement.classList.add('wall');break;case 2:cellElement.classList.add('target');break;case 3:boxes.push({ x, y });cellElement.classList.add('box');break;case 4:playerPosition = { x, y };break;}gameContainer.appendChild(cellElement);});});updatePlayerPosition();}// 更新玩家位置function updatePlayerPosition() {document.querySelectorAll('.cell').forEach(cell => {cell.classList.remove('player');});const index = playerPosition.y * 8 + playerPosition.x;gameContainer.children[index].classList.add('player');}// 移动检测function canMove(dx, dy) {const newX = playerPosition.x + dx;const newY = playerPosition.y + dy;// 边界检测if (newX < 0 || newX >= 8 || newY < 0 || newY >= 7) return false;// 获取目标位置的单元格const targetCell = level[newY][newX];const targetIndex = newY * 8 + newX;const targetElement = gameContainer.children[targetIndex];// 如果是墙if (targetCell === 1) return false;// 检查是否有箱子const boxIndex = boxes.findIndex(b => b.x === newX && b.y === newY);if (boxIndex > -1) {// 检查箱子后面的位置const boxNewX = newX + dx;const boxNewY = newY + dy;if (boxNewX < 0 || boxNewX >= 8 || boxNewY < 0 || boxNewY >= 7) return false;const nextCell = level[boxNewY][boxNewX];const nextIndex = boxNewY * 8 + boxNewX;const nextElement = gameContainer.children[nextIndex];// 检查箱子后面的位置是否可移动if (nextCell === 1 || boxes.some(b => b.x === boxNewX && b.y === boxNewY)) {return false;}// 移动箱子boxes[boxIndex].x = boxNewX;boxes[boxIndex].y = boxNewY;// 更新箱子显示targetElement.classList.remove('box');nextElement.classList.toggle('box', true);nextElement.classList.toggle('box-on-target', nextElement.classList.contains('target'));}return true;}// 处理键盘事件document.addEventListener('keydown', (e) => {let dx = 0, dy = 0;switch(e.key) {case 'ArrowUp': dy = -1; break;case 'ArrowDown': dy = 1; break;case 'ArrowLeft': dx = -1; break;case 'ArrowRight': dx = 1; break;default: return;}if (canMove(dx, dy)) {playerPosition.x += dx;playerPosition.y += dy;updatePlayerPosition();checkWin();}});// 胜利检测function checkWin() {const allBoxesOnTarget = boxes.every(box => {const index = box.y * 8 + box.x;return gameContainer.children[index].classList.contains('target');});if (allBoxesOnTarget) {setTimeout(() => alert('恭喜过关！'), 100);}}// 启动游戏initGame();</script>
</body>
</html>

html简易实现推箱子小游戏原理（易上手）

实现效果使用方向键移动，将橙色箱子推到绿色目标区域（黑色块为墙，白色块为可通过区域，蓝球为小人） 实现过程 <!DOCTYPE html> <html> <head><title>推箱子小游戏</title><style&g…...

编程日记 2026/1/18 2:09:11

搭建一个Spring Boot聚合项目

1. 创建父项目打开IntelliJ IDEA，选择 New Project。在创建向导中选择 Maven，确保选中 Create from archetype，选择 org.apache.maven.archetypes:maven-archetype-quickstart。填写项目信息： GroupId：com.exampl…...

编程日记 2025/12/24 6:50:38

字符串与栈和队列-算法小结

字符串双指针反转字符串(双指针) 力扣题目链接 void reverseString(vector<char>& s) {for (int i 0, j s.size() - 1; i < s.size()/2; i, j--) {swap(s[i],s[j]);} }反转字符串II 力扣题目链接遍历字符串的过程中，只要让 i (2 * k)&#…...

编程日记 2026/1/15 0:17:40

类似东郊到家的上门按摩预约服务系统小程序APP源码全开源

🔥 为什么上门按摩正在席卷全国？ 万亿蓝海市场爆发 2024年中国按摩市场规模突破8000亿，上门服务增速达65% 90后成消费主力，**72%**白领每月至少使用1次上门按摩（数据来源：艾媒咨询） 传统痛点…...

编程日记 2025/12/24 2:00:11

Python | 在Pandas中按照中值对箱形图排序

箱形图是可视化数据分布的强大工具，因为它们提供了对数据集内的散布、四分位数和离群值的洞察。然而，当处理多个组或类别时，通过特定的测量（如中位数）对箱形图进行排序可以提高清晰度并有助于揭示模式。在本文中&#…...

编程日记 2025/12/30 7:07:54

[实战] 二分查找与哈希表查找：原理、对比与C语言实现（附完整C代码）

二分查找与哈希表查找：原理、对比与C语言实现一、引言在计算机科学中，高效的数据查找是核心问题之一。本文深入解析两种经典查找算法：二分查找与哈希表查找，从算法原理、时间复杂度、适用场景到完整C语言实现，提供…...

编程日记 2026/1/13 19:08:11

游戏引擎学习第215天

总结并为今天做铺垫今天的工作内容是解决调试系统中的一个小问题。昨天我们已经完成了大部分的调试系统工作，但还有一个小部分没有完全处理，那就是关于如何层次化组织数据的问题。我们遇到的一个问题是，演示代码中仍有一个尚未解决的部分&a…...

编程日记 2026/1/19 4:54:01

【Redis】redis事物与管道

Redis 事务（Transaction） 事务概念事务：是一组操作的集合，是不可分割的工作单元。Redis 事务特点： 一个事务可以一次执行多个命令。所有命令都被顺序化，形成一个队列。所有命令在执行 EXEC 时一次性、顺…...

编程日记 2025/12/27 4:30:15

Django信号使用完全指南示例

推荐超级课程：本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 **引言：****先决条件：****目录：****1. 什么是Django信号？****2：设置你的Django项目****2.1. 安装Django**2.2. 创建一个Django项…...

编程日记 2025/12/27 8:28:33

DeepSeek BLEU和ROUGE（Recall）的计算

以下是 BLEU Score (Bilingual Evaluation Understudy)和 ROUGE Score(Recall-Oriented Understudy for Gisting Evaluation) 的原生Python实现（不依赖第三方库），通过分步计算逻辑和示例详细说明。一、BLEU Score 实现核心逻辑…...

编程日记 2026/1/16 6:21:00

vulkanscenegraph显示倾斜模型(5.9)-vsg中vulkan资源的编译

前言上一章深入剖析了GPU资源内存及其管理，vsg中为了提高设备内存的利用率，同时减少内存(GPU)碎片，采用GPU资源内存池机制(vsg::MemoryBufferPools)管理逻辑缓存(VkBuffer)与物理内存(VkDeviceMemory)。本章将深入vsg中vulkan资源的编译(包含…...

编程日记 2025/12/27 18:24:14

今日行情明日机会——20250409

今日行情还需要考虑关税对抗~ 2025年4月8日涨停的主要行业方向分析 1. 军工（19家涨停） 细分领域：国防装备、航空航天、军民融合。催化因素：国家安全战略升级、国防预算增加、重大军工项目落地预期。 2. 免税（15家涨…...

编程日记 2026/1/23 16:58:30

XHR、FetchAxios详解网络相关大片文件上传下载

以下是 XHR（XMLHttpRequest）与 Fetch API 的全面对比分析，涵盖语法、功能、兼容性等核心差异：一、语法与代码风格 XHR（基于事件驱动）需要手动管理请求状态（如 onreadystatechange 事件）和错误处理，代码冗长且易出现回调地狱。 const xhr = new XMLHttpRequest(); x…...

编程日记 2025/11/29 19:16:12

Python基础总结(四)之元组

文章目录一、元组格式二、元组操作2.1 转换元组与列表一样，元组也是序列，唯一的区别在于元组是不能修改的，与字符串一样。一、元组格式元组的创建方式很简单，秩序用逗号将元素隔开就能自动创建一个元组示例： …...

编程日记 2025/12/14 3:29:39

系统分析师（六）-- 计算机网络

概述 TCP/IP 协议族 DNS DHCP 网络规划与设计逻辑网络设计物理网络设计题目层次化网络设计网络冗余设计综合布线系统 IP地址网络接入技术其他网络技术应用物联网...

编程日记 2025/12/30 0:10:46

【前端】【React】useCallback的作用与使用场景总结

一、useCallback 的作用与使用场景总结 useCallback 是 React 提供的一个 Hook，用于缓存函数的引用，避免因为组件重新渲染而导致函数地址发生变化。它返回一个记忆（memoized）后的回调函数，只有当依赖项发生变化时才会…...

编程日记 2025/12/23 18:25:42

Qwen2.5-VL Technical Report 论文翻译和理解

一、TL；DR Qwen2.5-VL是QwenVL的最新模型，在视觉识别、精准目标定位、稳健文档解析以及长视频理解等方面实现了重大突破引入了动态分辨率处理和绝对时间编码，使其能够处理不同尺寸的图像以及长达数小时的视频，并实现秒级事件定位…...

编程日记 2025/12/27 18:23:46

Foxmail邮件客户端跨站脚本攻击漏洞（CNVD-2025-06036）技术分析

Foxmail邮件客户端跨站脚本攻击漏洞（CNVD-2025-06036）技术分析漏洞背景 ‌漏洞编号‌：CNVD-2025-06036 ‌CVE编号‌：待分配 ‌厂商‌：腾讯Foxmail ‌影响版本‌：Foxmail < 7.2.25 ‌漏洞类型‌&#x…...

编程日记 2025/12/27 22:26:11

使用下面的代码buf dprt("data: 0x%02x 0x%02x 0x%02x 0x%02x 0x%02x 0x%02x", buf[0], buf[1], buf[2], buf[3], buf[4], buf[5]); 明明是一个字节一个字节的打，打出来的数据有些却是4个字节 0xffffffff 0xffffffff 0xffffffff 0x7f 0xffffffff 0x7f0…...

编程日记 2025/12/11 5:10:52

高并发内存池（三）：PageCache（页缓存）的实现

前言： 在前两期内容中，我们深入探讨了内存管理机制中在 ThreadCache 和 CentralCache两个层级进行内存申请的具体实现。这两层缓存作为高效的内存分配策略，能够快速响应线程的内存需求，减少锁竞争，提升程序性能。本期…...

编程日记 2026/1/16 4:15:08

pycharm已有python3.7，如何新增Run Configurations中的Python interpreter为python 3.9

在 PyCharm 中，如果你已经安装了 Python 3.9，并且希望在 Run Configurations 中新增一个 Python 3.9 的解释器，可以按照以下步骤操作： 步骤 1：打开 PyCharm 设置点击 PyCharm 左上角的 File 菜单。选择 Settings&am…...

编程日记 2025/11/27 9:39:43

Linux驱动开发-网络设备驱动

Linux驱动开发-网络设备驱动一，网络设备总体结构1.1 总体架构1.2 NAPI数据处理机制二，RMII和MDIO2.1 RMII接口2.2 MDIO接口三，MAC和PHY模块3.1 MAC模块3.2 PHY模块四，网络模型4.1 网络的OSI和TCP/IP分层模型4.1.1 传输层&…...

编程日记 2025/12/27 13:26:34

学习笔记083——Java Stream API

文章目录 1、过滤数据 filter()2、转换元素 map()3、排序 sorted()3.1、自定义排序规则 4、去重 distinct()5、限制元素数量 limit()6、收集结果 collect()6.1、收集为List6.2、收集为Set6.3、转为Map6.4、基本用法（注意键冲突会抛异常）6.5、处理键冲突&…...

编程日记 2025/11/27 1:27:10