基于JavaScript实现拼图游戏【100011927】资源-CSDN下载

共19个文件

jpg：10个

js：2个

svg：2个

版权申诉

JavaScript

课程设计

55 浏览量 2023-04-19 14:37:11 上传评论 1 收藏 3.94MB ZIP 举报

在本项目中，我们将探讨如何使用JavaScript来实现一个基本的拼图游戏。这个3x3的拼图游戏具有以下特点： 1. **游戏布局**：游戏界面由3行3列的单元格组成，其中一个单元格是空白的，其余8个单元格包含拼图的碎片。这些碎片可以与空白单元格相邻时进行交换，以达到正确拼合的目的。 2. **完整图片提示**：在游戏开始或任何时候，玩家应能看到完整的图片作为参考，以了解拼图应有的最终状态。这可以通过在游戏界面上显示一个不可交互的背景图片来实现。 3. **游戏状态**：游戏的状态包括当前的拼图布局和玩家的操作历史（如步数和时间）。步数记录了玩家移动拼图碎片的次数，而时间记录了从开始游戏到当前的总时长。 4. **随机打乱**：游戏开始时，拼图应该被随机打乱。这需要一个算法来生成不同的初始布局，保证每块拼图碎片的位置都是随机的，但仍然只有一个空白单元格。 5. **事件监听**：使用JavaScript的事件监听机制，我们可以捕捉用户的鼠标点击或触摸操作，然后根据选择的碎片和空白单元格的位置，执行相应的交换操作。 6. **DOM操作**：JavaScript需要与HTML DOM（文档对象模型）交互，更新界面以反映拼图的当前状态。这包括改变碎片的位置，更新步数和时间的显示。 7. **用户交互**：除了基本的游戏操作，还应考虑提供重置游戏、暂停/恢复游戏以及查看得分等功能。这需要创建相应的按钮，并为它们绑定合适的事件处理函数。 8. **性能优化**：考虑到可能频繁的DOM更新，使用`requestAnimationFrame`或者高效的批处理更新策略，可以确保游戏流畅运行，避免不必要的页面重绘。 9. **响应式设计**：为了使游戏在不同设备上都能良好运行，可以考虑采用响应式布局，让游戏适应不同屏幕尺寸和方向。 10. **代码结构**：良好的代码组织和模块化设计至关重要。可以将游戏逻辑、界面更新、事件处理等部分分别封装为独立的函数或类，提高代码的可读性和可维护性。 11. **测试与调试**：开发过程中，进行充分的单元测试和集成测试，确保所有功能正常工作，同时利用开发者工具进行性能分析和错误调试。通过以上步骤，我们可以逐步构建出一个功能完善的JavaScript拼图游戏。这个项目不仅可以锻炼JavaScript编程技能，还能提升对用户体验和游戏设计的理解。对于课程设计或个人项目来说，这是一个很好的实践机会。

资源推荐

资源详情

资源评论

收起资源包目录

100011927-基于JavaScript实现拼图游戏.zip （19个子文件）

puzzle

jquery-3.4.0.min.js 86KB

image

ok.svg 595B

2.jpg 27KB

6.jpg 39KB

1.jpg 24KB

no.svg 1KB

all.jpg 1.64MB

5.jpg 62KB

0.jpg 30KB

8.jpg 38KB

3.jpg 52KB

7.jpg 27KB

4.jpg 63KB

LICENSE 1KB

实验报告2.docx 1.98MB

index.html 2KB

index.js 7KB

README.md 23KB

index.css 2KB

# 一、实验目的本次实验目为练习 JavaScript 的程序编写，以实现 Web 页面的交互功能 # 二、实验内容制作一个拼图游戏（3*3） # 三、实验步骤 1.确定需求 - 一个拼图游戏要实现一个 3*3 的网格布局，其中一块为空白，剩余 8 块可以自由移动，当 8 块位置正确后，再添加剩余的一块，就可以完成拼图 - 要有完整图片的提示信息 - 记录游戏时间、步数 - 可以随机打乱拼图 2.设计页面原型根据需求，设计界面原型。 - 上方居中显示标题和 - 主题部分分为两大块：游戏区和提示区。游戏区为一个 3*3 网格，每个格中填充一张图片块，其中一个块为空白。点击上、下、左、右四个方向有空白块的图片可以向空白块移动该图片。提示区上方为完整图片，下面是计时和步数。在最下面有重新开始的按钮和添加最后一块（检查胜利）的按钮，如果在所有图片位置正确时点击，则会自动填充最后一块，结束计时，显示成功的对勾提示。否则会显示错误提示。 - 底端显示作者信息 - 设计响应式页面以适应所有宽度的设备 3.实现布局编写 index.html、index.css 关键技术： - 游戏区 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/8acdb5c666185e9bf10b7cb3c6f65881.writebug) 游戏区 game_block 中存在网格块 grid，其中包含九个子块 p0-p8，每个子块中有一张图片。样式使用 flex 布局，设置固定宽度使得每行显示三个块，且中间不保留空隙 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/2c3a195e0743b1531d4385568db28478.writebug) - 菜单区 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/7cb575485c39adb0f09a2a24a766d454.writebug) 样式不做过多赘述 - 伪类动作 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/5c0ccc6a37abb0e5fd3d4745ac09527e.writebug) 对图片、按钮，使用:hover {cursor: pointer}使的当鼠标悬停时，变为指针对拼图图片，使用:hover{transform.scale(1.1)}设置鼠标悬停在图片上方时，图片略微放大以指示该图片 - 响应式设计 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/b52ca997a3ea6806e4d88c070249ac71.writebug) ![](https://www.writebug.com/myres/static/uploads/2022/5/3/33c39644943cf790bc86c8e7604c3c2d.writebug) 使用了媒体查询，确保在页面宽度改变时拼图显示正常同时在<head>中设置 viewport 视窗，限制移动端的视窗长度 ```c++ <meta name="viewport" cotent="width=device-width"> ``` 4.实现交互编写 index.js，使用 jQuery 编写核心交互功能 - 初始化页面：声明变量，启动定时器，初始化拼图 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/d366a17b54b547d8d1fe5ece584e9417.writebug) Steps 记录步数，minute、second 为 HTML 页面上显示的时间，timer 是计时器，每 1 秒执行 updateTime 函数，更新页面上的时间：（判断秒数进位分钟，个位数的分、秒显示为两位） ![](https://www.writebug.com/myres/static/uploads/2022/5/3/56eaaeda4bd81f81bd624a063a18cac4.writebug) Random 为游戏中缺少的图片块（0-8）编号，empty 为游戏中网格当前为空白的块（0-8）编号，pictures 是一个数组，下标为图片块编号，值为图片块当前的位置编号，如果图片块缺少，值为-1 resetPicture 函数对拼图重新进行排序 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/016e4f81efbeb9bc69fec7b512c4cdd3.writebug) 首先先将 pictures 数组初始化为正确顺序，然后再调用 shuffle 函数按照随机交换方法打乱。之后，生成一个 0-8 的随机数，作为缺少的图片块的编号，并且更新 empty、pictures 的值之后，要检查当前生成的随机打乱是否有解，调用 checkPossible 函数 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/2a9a5b334d5a2e87b14f3d303c81ae94.writebug) 原理为，首先建立棋盘数组，存储网格中每个块放置的图片块编号。初始数组为正确顺序（缺少的块编号为-1），打乱数组为刚才打乱后的顺序。如果一个随机打乱有解，那么对于初始数组和打乱数组的逆序数，其奇偶性应该相同。如果不同，则将打乱数组倒数第 2、3 个元素对调，即可变为可行解。最后，根据打乱顺序设置图片 - 操作拼图首先判断点击块是否可以移动如果可以，获取目标位置，交换之，并记录步数 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/c44fdfd2e688673d5f82e320105dafef.writebug) - 获胜判断除去缺少块以外的其它块是否在正确位置上，如果在，添加缺少图片，显示对勾，停止计时器，补全 pictures 数组。否则，显示 x ![](https://www.writebug.com/myres/static/uploads/2022/5/3/63db5d821684e7341872f7be97568a1e.writebug) - 重置页面刷新布局，重设定时器和计步器 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/80da8b9fad8d6a416d25a344b7698ad6.writebug) # 四、实验结果界面效果 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/5f2feb6988c45b0f210f87e40f0c96d1.writebug) 获胜 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/f40c22b3ec1e6bdb3a7fb1b943736782.writebug) 不满足胜利条件 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/e3469bfcbbeda2f63ca363b7415c02ed.writebug) 平板电脑效果： ![](https://www.writebug.com/myres/static/uploads/2022/5/3/c97d0b0bcd8e82de94bfb1743edcc434.writebug) 手机效果 ![](https://www.writebug.com/myres/static/uploads/2022/5/3/ea5ed175e25a0710c78d8bfa1f8d722e.writebug) # 五、实验结论熟练掌握了 jQuery 对 DOM 文档的操作 # 六、源代码 1. index.html ``` <!DOCTYPE html> <html> <head> <title>Homework2, Xingyu Liu</title> <meta charset=" tf-8"> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" type="text/css" href="./index.css"> <script type="text/javascript" src="./jquery-3.4.0.min.js"></script> </head> <body> <div class="title_block"> <h1>Picture Puzzle</h1> </div> <div class="outside_block"> <div class="game_block"> <div class="grid"> <div id="p0"><img></div> <div id="p1"><img></div> <div id="p2"><img></div> <div id="p3"><img></div> <div id="p4"><img></div> <div id="p5"><img></div> <div id="p6"><img></div> <div id="p7"><img></div> <div id="p8"><img></div> </div> </div> <div class="menu_block"> <div class="menu_content"> <div class="origin_img_block"> <img id="origin_img" src="./image/all.jpg"> </div> <div class="score_block"> <span id="time_tip" class="tip">时间：</span> <span id="minute" class="score time">00</span> <span>:</span> <span id="second" class="score time">00</span> <span id="step_tip" class="tip">步数：</span> <span

评论收藏

内容反馈

版权申诉