你小子！过年了，写了一个拼图小游戏来拼掘金兔年礼盒，来玩玩不？
我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛
快过年了，本篇文章是带着欢快的气氛写的，祝大家新年快乐呀！
所以该篇文章会不太严谨，希望大家勿喷。
本篇所使用的软件版本:
切片软件:
photoshop cs3
brython所依赖的js为:
大家好，我是pdudo，一个不想做运维的运维小学生，兔年即将来临，我都还没准备好，但是很意外 ，掘金居然给小弟送了一个新年礼盒，作为一名掘金白嫖党掘金死忠粉，在此跪谢掘金了。
在未来的2023年，小弟会将【白嫖】【不要脸】的精神在掘金社区继续贯彻到底。
有了上述的铺垫，才好引出本篇文章的主旨： 使用brython写一个【掘金兔年春节礼盒】拼图小游戏，来祝愿大家2023 前兔(途)似锦、宏兔(图)大展
码上掘金项目如下:
本篇文章知识点如下:
-
photoshop切片操作 -
静态页面编写
-
引入
brython来完成小游戏互动
利用photoshop进行切片
这个
photoshop切片也是现学的，所以不会介绍的很深入，勿喷，勿喷。
首先我们想利用photoshop进行切片，我们得下载图片至本地才行，好在本篇案例使用的掘金兔年礼盒图片，可以在【福利兑换】中找到，而后使用【图片另存为】到本地即可。
掘金福利兑换参考URL: juejin.cn/user/center…
下载图片后，我们使用photoshop打开，选中本地的图片即可。
在photoshop打开图片后，使用工具栏的【切片工具】进行切片即可。
在图层上右键选择 【划分切片】
由于我们只想要将图片分为大小均匀的9个图片，所以在划分切片中，水平 和 垂直 都修改为3，这样的话，就可以划出9个字图片了。
在使用切片划分后，我们需要将其保存为web格式，点击【文件】【储存为Web和设备所用格式】。
由于保存的类型默认为GIF,我们需要先将其格式修改为JPEG，而后再点击【存储】。
我们保存在本地，会得到一个html文件和images目录，而我们切好的图片就是我们需要的9张图
至此，我们切片就完成了。
我们可以将图片上传至自己的服务器，若没有服务器的话，那么可以新建一篇掘金文章（不用发表都可以），将图片拖进去，于是乎我们就得到了相关的链接。
前端静态页面的编写
要想做一个拼图小游戏，不能一上来就直接写后端逻辑代码，这样写到最后可能会失败，而是应该新建一个静态模型或者称之为前端静态页面，来向用户展示，这个小游戏应该是怎么样的。
我们想做的游戏样子大概如下:
我们可以先将模型给建好，而后再想办法让拼图模块能够和玩家进行交互就好了。
我们可以分析一下，标题、拼图页面 和 效果图 可以用哪些html标签来完成，那汇总表格大致如下:
| 类型 | 标签 |
|---|---|
| 小游戏标题 | h1 |
| 用户操作拼图的界面 | table+img |
| 效果图 | img |
有了上述列表，我们代码可以编写如下:
由于掘金生成的图片链接URL非常长，所以就使用img+数字来代替URL链接了。
<div id="app">
<h1>你小子！会拼掘金兔年礼盒不？</h1>
<table>
<tr>
<td></td>
<td><img src="img2" width="160px" height="160px"></td>
<td><img src="img3" width="160px" height="160px"></td>
</tr>
<tr>
<td><img src="img4" width="160px" height="160px"></td>
<td><img src="img5" width="160px" height="160px"></td>
<td><img src="img6" width="160px" height="160px"></td>
</tr>
<tr>
<td><img src="img7" width="160px" height="160px"></td>
<td><img src="img8" width="160px" height="160px"></td>
<td><img src="img9" width="160px" height="160px"></td>
</tr>
</table>
<h5>效果图</h5>
<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59eb9d261a9f487a9674a2bc9049bea7~tplv-k3u1fbpfcp-no-mark:0:0:0:0.image?" width=200 heith=200>
</div>
在结合CSS我们可以得到的效果如下:
具体代码可以参考码上掘金:
引入brython来实现小游戏互动
很多小伙伴可能没听说过brython，简单的来概括一下就是python 提供了一个可以操作html DOM的库，而这个工具就叫brython，也可称之为: 浏览器运行的python。
具体的就不赘述了，可以参考一下这篇文章:
那么，如何使小游戏能够和玩家进行互动呢？关键的点为，玩家操作后，需要修改前端的页面展示效果，而玩家和前端展示之间，我们可以用一种数据结构来表示，可以用图示表示如下:
所以说，玩家不直接操作前端页面，而是通过前端页面来修改其底层数据结构的数据，而后再反过来渲染给用户，从而达到互动的效果。
那么我们底层数据，可以定义如下（代码截图会较为清晰）:
而渲染页面，可以用如下方法表示:
# 输出到屏幕
def toMaps():
gameWindow.clear()
tb.clear()
for i in range(3):
tr = html.TR()
tr.ID = "tr"
for j in range(3):
td = html.TD()
td.id = [i,j]
if -1 != gameBox[i][j]:
img = html.IMG(src=picDict[gameBox[i][j]], width=160, height=160)
td <= img
tr <= td
tb <= tr
gameWindow <= tb
如上代码是将后端数据渲染给前端，从而展示给用户，那么用户和游戏互动，是通过什么来完成的呢？
这个就要涉及鼠标事件了，相关技术可以参考文章如下:
在brython中，通过鼠标事件绑定的方式，来触发响应，代码如下:
document["tb"].bind("click", startGanmes)
而判断是否可以移动图片碎片是通过判断其四周是否有空的栏位来判断的，例如:
如上小游戏，用户点击 2、4、6、8 都可以进行图片替换，因为四周有空位，而1、3、7、9则不行。
当判断可以替换后，直接修改底层数据gameBox的值，而后再渲染会页面即可展示给用户。
那相关代码，可以查看码上掘金:
总结
如上文章，我们向做一个拼图小游戏，于是我们将这个项目拆成了几个小功能，例如:
- 将图片拆分为等大的图片碎片
- 游戏静态框架编写
- 引入互动
那再查询资料后，我们得知ps可以切片来满足需求，所以我们就使用ps做的切片；而编写静态页面可以提前向用户展示效果，避免写后端的时候，越写越糊涂；最后就是引入互动，其实就是修改底层数据的值，从而来渲染前端达到的。
怎么样？brython好玩么？ 快来动动你的小手指试试吧。
新年到，送祝福，祝愿大家新年快乐，恭喜发财。
