黑客代码做小游戏

用浏览器打开一个空白页，黑客按F12调出控制台，代码粘贴几行代码，游戏一个能玩的黑客小游戏就跑起来了。这不是代码什么黑科技，就是游戏前端开发的日常。但大多数人没意识到，黑客自己每天用的代码浏览器里藏着一台完整的游戏机。

先看个最简单的游戏。打开控制台，黑客输入这段：

let box = document.createElement('div'); box.style.cssText = 'width:50px;height:50px;background:red;position:fixed;top:0;left:0;transition:all .1s'; document.body.appendChild(box); let x=0,代码 y=0; document.onkeydown = e => {  if(e.key==='ArrowRight') x+=10; if(e.key==='ArrowLeft') x-=10; if(e.key==='ArrowDown') y+=10; if(e.key==='ArrowUp') y-=10; box.style.left = x+'px'; box.style.top = y+'px'; };

一个红色方块，方向键控制移动。游戏写这玩意儿花了不到三十秒。黑客没有引擎，代码没有框架，游戏没有npm install。DOM本身就是渲染层，键盘事件就是输入系统。

我第一次接触这种东西是在大学图书馆。隔壁桌的人屏幕上全是代码，我以为他在写作业，结果他在控制台里用Canvas画了个弹球游戏，就是那种球撞墙反弹、底下有挡板接球的。他跟我说，整个游戏不到一百行。我当时不太信，回去自己试了试，发现确实可以。

Canvas比DOM更适合做游戏。DOM操作有布局和重绘的开销，元素一多就卡。Canvas是一块画布，所有东西画上去就是一帧，没有中间层。下面这个例子画一个自动弹跳的球：

let c = document.createElement('canvas'); c.width = 400; c.height = 300; c.style.border = '1px solid #333'; document.body.appendChild(c); let ctx = c.getContext('2d'); let bx=200, by=150, vx=2, vy=1.5, r=15; function loop(){  bx+=vx; by+=vy; if(bx+r>400||bx-r<0) vx=-vx; if(by+r>300||by-r<0) vy=-vy; ctx.clearRect(0,0,400,300); ctx.beginPath(); ctx.arc(bx,by,r,0,Math.PI*2); ctx.fillStyle='#e74c3c'; ctx.fill(); requestAnimationFrame(loop); } loop();

requestAnimationFrame是浏览器给游戏循环开的后门。它跟屏幕刷新率同步，一般一秒跑60次。用setInterval也能做，但会掉帧，因为定时器跟渲染不同步。

有人管这叫“黑客代码”，其实不准确。黑客代码通常指利用漏洞或非预期行为。控制台跑游戏是浏览器本来就允许的事——你只是用了一个开发者工具而已。真正算得上黑客手法的，是那些用CSS做游戏的人。纯CSS能做出点击交互、状态切换，甚至简单的迷宫。有个叫“CSS Zen Garden”的网站，早期就有人用纯CSS模拟了打地鼠。逻辑靠checkbox的:checked伪类，视觉靠transition。一行JS都没有。

但要说最实用的，还是控制台里跑的那种。我有个朋友做运维，服务器上没图形界面，他用Python的curses库在终端里写了个贪吃蛇，值班的时候摸鱼用。浏览器控制台版更方便，不用装任何东西，打开就能玩。

写小游戏这件事，门槛比大多数人想的低。你不需要学Unity，不需要懂OpenGL。知道怎么创建元素、怎么监听键盘、怎么用requestAnimationFrame，就能做出能玩的东西。剩下的就是加逻辑：碰撞检测、分数、关卡。每加一层，复杂度涨一点，但核心循环不变。

浏览器控制台是个被低估的游乐场。下次打开开发者工具，别只盯着Network面板看请求了。试着敲几行代码，让一个方块动起来。你会发现，写游戏这件事，离你比想象中近得多。