最近，手头上的活儿忙完了，就寻思着搞点啥小玩意儿练练手，也算是给自己找点乐子。琢磨来琢磨去，脑子里就蹦出了小时候天天守在电视机前看的《猫和老鼠》。那动画片可真是经典，汤姆和杰瑞斗智斗勇，笑料百出。于是乎，我一拍大腿，就整一个简单的猫和老鼠小游戏！
准备工作和初步构想
说干就干。我先在脑子里过了下大概的框架。咱得有个场景，不用太复杂，就一个简单的平面图。然后是主角，杰瑞小老鼠，玩家来控制。再来个对头，汤姆猫，这家伙得能自动追杰瑞，不然就没意思了。
游戏目标嘛杰瑞就负责偷吃奶酪，汤姆就负责抓杰瑞。简单明了！
技术选型上，我也没想搞太复杂的，就用了我最顺手的 HTML、CSS 和 JavaScript。这样直接在浏览器里就能跑，分享给朋友们也方便。
开始动手，杰瑞先动起来
第一步，我先把杰瑞给画出来，网上找了个像素风的素材，看着还挺可爱的。然后就是让它动起来。用 JavaScript 监听键盘的上下左右方向键，控制杰瑞的坐标移动。这一步还算顺利，没多久，我的小杰瑞就能在屏幕上自由奔跑了。
关键点：这里要注意边界判断，不能让杰瑞跑出屏幕外面去，不然就找不着了。
轮到汤姆出场，AI 是个小麻烦
接下来就是汤姆猫了。这家伙不能像杰瑞一样由玩家控制，它得有自己的“想法”——追逐杰瑞。一开始我想简单点，就让汤姆的坐标一直向着杰瑞的坐标移动。结果发现，汤姆这家伙太“耿直”了，只会走直线，撞到墙也不会拐弯，傻乎乎的。
没办法，只能给它加点“智能”。我参考了一些简单的寻路算法，比如让汤姆在碰到障碍物时尝试换个方向。这里折腾了好一会儿，反复调试，总算是让汤姆看起来不那么笨了，会绕开一些简单的障碍物去追杰瑞了。虽然离动画片里那个诡计多端的汤姆还差得远，但作为小游戏来说，也勉强够用了。
添加游戏元素：奶酪和障碍物
光有猫追老鼠还不够，得有点目标和挑战。于是我加入了奶酪元素。
奶酪：在地图上随机生成奶酪，杰瑞吃掉一个就得分。
障碍物：为了增加点难度和趣味性，我还放了几个固定的障碍物，比如小桌子、花瓶啥的（当然也是像素图）。杰瑞和汤姆都不能穿过这些障碍物。
这样一来，杰瑞就需要灵活走位，一边躲避汤姆，一边找机会吃奶酪。汤姆也因为障碍物的存在，抓捕难度有所增加。
碰撞检测与胜负判断
游戏的核心机制之一就是碰撞检测了。
主要检测：
杰瑞碰到奶酪：奶酪消失，杰瑞得分，然后新的奶酪在别处生成。
汤姆碰到杰瑞：游戏结束，杰瑞被抓住了！
杰瑞碰到障碍物或汤姆碰到障碍物：阻止他们前进。
胜负条件也很简单：杰瑞吃到一定数量的奶酪（比如10块）就获胜；如果被汤姆抓到，那就游戏失败，汤姆获胜。
为了让结果更直观，我还加了简单的计分板和游戏结束的提示信息。
回顾与小结
从最初一个模糊的想法，到一步步把各个功能实现出来，这个过程还是挺有成就感的。虽然只是个非常非常简单的小游戏，素材也是找的现成的，AI 也笨笨的，但毕竟是自己亲手敲代码做出来的。
中间也遇到不少小问题，比如汤姆的寻路逻辑写了好几个版本，碰撞检测有时候会出点小偏差。但解决这些问题的过程，也是学习和进步的过程嘛
最大的感受就是：动手实践永远是最好的老师。很多东西看着简单，真要做起来才会发现里面的门道。这回的小实践也算是给自己枯燥的生活找了点乐子，挺下次有啥好玩的想法再来分享。
