348 字节实现精简版吃豆人小游戏
今天分享一个由@aemkei等大佬制作的只有 348 个字节的吃豆人小游戏，如上面动图所示，基本实现了游戏的主要功能，来看看大佬们是如何通过这么短的代码实现整个游戏的效果吧。
Github 仓库地址：https://github.com/codegolf/pac-man
整个游戏使用键盘控制移动吃豆人。以下是游戏界面布局，没有其他的 DOM 元素，仅通过纯字符实现整个游戏界面和操作。
整体源代码：
这段代码是一个非常紧凑的 JavaScript 代码。它利用 HTML 和 JavaScript 的简洁语法特性，将整个游戏逻辑压缩到极限。下面是这段代码的解析和实现逻辑：
HTML 结构
<body onload="...">: 当页面加载完成时执行内部的 JavaScript 代码。<pre id=p>: 使用预格式化标签来显示游戏的图形界面，id=p用于在 JavaScript 中引用。
JavaScript 代码解析
初始化变量:
for(l=D=11;d=k=D--;x=78) ...: 这是一个 for 循环，用于初始化一些变量。l和D被设为 11，d和k被设为D（随着循环递减），x被设为 78。l+=...: 这部分代码负责创建游戏地图。它使用字符编码和位运算来生成表示游戏地图的字符串。游戏循环:
setInterval("..."): 使用setInterval设置游戏循环，定时更新游戏状态。if(x^X) ...: 这是游戏逻辑的核心。检查吃豆人的位置（x）和 Ghost 的位置（X）是否不同，并据此更新游戏状态。键盘输入处理:
onkeydown=k=event.which-38: 这部分用于处理键盘输入，改变吃豆人的移动方向。游戏逻辑:
更新吃豆人和鬼的位置。
检查游戏地图上的相应位置，决定吃豆人和鬼的移动是否有效。
更新屏幕上的显示。
核心逻辑
if(x^X)判断x和X是否相等，即判断吃豆人位置和豆子位置是否一致。h=i=l[x]=2将数组l中索引为x的元素设置为数字 2，并赋值给变量h和i。l[x+=d=2%k||9&l[x+(o=k%2||~-k*14)]?9&l[x+d]?0:d:o]=4根据方向变量d移动吃豆人的位置。具体逻辑为：如果k是偶数，则让d等于 2；如果不是偶数，则让d等于9 & l[x + o] ? 0 : d，其中o的计算方式为k % 2 || ~-k * 14。然后将数组l中对应位置的元素设置为数字 4。l[X]&=7将豆子所在位置的元素与数字7进行按位与操作，以便后续判断是否被吃掉。b=D%4-2,b=b++%2||b*14根据变量D计算水平移动方向变量b的值。9&l[X+b]?D++:X+=b判断豆子下一个位置是否可以移动并更新变量D或者X的值。l[X]|=8设置新的豆子位置上的元素为数字 8，表示生成新的豆子。i<154循环条件，限制循环次数。p.innerHTML=h+='.# \\nx'[l[++i]]||0将游戏场景以 HTML 格式字符串的形式更新到页面上。
技术点
位运算和字符编码: 利用字符编码和位运算进行地图的创建和游戏逻辑的实现。
HTML 与 JavaScript 的紧密结合: 使用简单的 HTML 结构和紧凑的 JavaScript 代码实现游戏。
事件监听与处理: 通过监听键盘事件来控制游戏角色。
最后
这段代码是一个典型的例子展示了如何用极少的代码实现复杂的逻辑。它利用了 JavaScript 和 HTML 的特性，创造了一个完整的游戏体验。
整个游戏逻辑非常简洁，主要通过数组操作和一些判断条件来模拟吃豆人的移动和吃豆子的过程。代码重复执行循环体，实现了游戏的持续进行。玩家可以通过键盘上的方向键来控制吃豆人的移动方向。游戏的目标是吃掉所有的豆子而避开墙壁，直到游戏结束。
这种编程风格虽然在可读性上有所牺牲，但在代码压缩和效率方面表现出色。
看完本文如果觉得有用，记得点个赞支持，收藏起来说不定哪天就用上啦～
专注前端开发，分享前端相关技术干货，公众号：南城大前端（ID: nanchengfe）
版权声明: 本文为 InfoQ 作者【南城FE】的原创文章。
原文链接:【http://xie.infoq.cn/article/3a52e4369ce9571ed2b273167】。文章转载请联系作者。
公众号@南城大前端 2019-02-12 加入
专注前端开发，分享前端知识
评论