20行代码实现贪吃蛇游戏！

优雅的代码，就像是一首诗，让人百读不厌，细细品味，又觉奥妙无穷。

今天给大家分享一个代码程序，一名程序员使用JavaScript实现贪吃蛇游戏，仅需要约20行的代码量。

为了能让大家更容易理解，我们对源代码进行了解释（去掉注释，约20行哦）：

[/code][code]

复制代码

[/code][code]

复制代码

var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");

复制代码

//存放贪食蛇的坐标, 第一个是头, 最后一个是尾, 初始的蛇长度是2, 坐标[2, 2], [1, 2]

复制代码

//食物的坐标, 初始[3, 2]

复制代码

//蛇前进的方向

复制代码

//蛇头位置

复制代码

//在画布上画背景或者贪食蛇方格

复制代码

// 第一个参数是坐标信息, 第二个是颜色信息(用来区分背景和蛇)

复制代码

function draw(t, c) {

复制代码

ctx.fillStyle = c;

复制代码

// fillReact的签名是: fillRect(x: number, y: number, w: number, h: number): void;

复制代码

// 所以画的方格的宽高都是18, 加上默认的lineWidth=1, 所以每个方格的长宽都是20

复制代码

// 参数t用一个标量标志二维坐标信息, t % 20即t/20的余数部分表示横坐标是第几个方格

复制代码

// (t/20) 即t/20的商部分表示纵坐标是第几个方格

复制代码

// 这意味着游戏画布宽度固定为20, 坐标为[0, 19]

复制代码

// 需要注意的是纵坐标的方向向下

复制代码

// 所以初始的贪食蛇`[42, 41]`的头和尾的实际坐标分别是[2, 2], [1, 2], 也就是在画布的右上方

复制代码

// 所以最初的运动方向是向右

复制代码

// 所以前进方向`fx`的含义是: -1向左, -20右上, 1向右, 20向下

复制代码

ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);

复制代码

// 监听用户按键, 按键时改变下一次paint时蛇的方向

复制代码

}

复制代码

document.onkeydown = function(e) {

复制代码

// 方向键左, 上, 右, 下的keyCode分别为37, 38, 39, 40

复制代码

// 如果用户按下这几个键, 会改变蛇头下一次的位置到对应的方向上

复制代码

// 如果不是这几个键, 则不会变动

复制代码

fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n

复制代码

// 如果按键的方向和蛇当前前进的方向相反, 则不改动

复制代码

// 根据蛇的位置及运动方向更新画布

复制代码

};

复制代码

!function update() {

复制代码

// 更新蛇头的位置

复制代码

sn.unshift(n = sn[0] + fx);

复制代码

// 蛇每前进一步, 只需要把蛇尾放到蛇头处即可

复制代码

// 这里增加了蛇头

复制代码

if (sn.indexOf(n, 1) > 0 || n399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)

复制代码

// 碰到边界时结束游戏, 边界是

复制代码

// x in [0, 20] & y in [0, 20]

复制代码

// 并且不可碰到蛇身

复制代码

return alert("GAME OVER");

复制代码

// 更新蛇头

复制代码

draw(n, "Lime");

复制代码

if (n == dz) {

复制代码

// 如果蛇头位置和食物的位置相同, 则更新食物的位置

复制代码

// 新的食物的位置不能在蛇身上

复制代码

while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);

复制代码

// 更新食物

复制代码

draw(dz, "Yellow");

复制代码

} else

复制代码

// 去掉蛇尾(画成背景)

复制代码

draw(sn.pop(), "Black");

复制代码

// 每隔500ms更新

复制代码

setTimeout(arguments.callee, 130);

复制代码

}();

复制代码

[/code][code]

复制代码

[/code][i]向左滑动可查看完整代码[/i]
如果你想尝试一下，可以在电脑上创建一个记事本文件，将代码复制上去并保存，最后将文件的后缀名.txt改为.html，双击运行即可。
手机也可以运行哦，但无法进行任何操作，因为代码中没有设置与手机对应的按键。
运行结果：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-4f088d219df7506ed1598d8a6c31c001[/img]
使用键盘上的↑↓←→可以控制贪吃蛇的移动方向，每吃到一个食物，贪吃蛇会增加一个长度。
实现贪吃蛇并不难，100行代码很多人都能搞定。难的是用最少的代码实现它，这也就是编程语言的魅力所在。
如果代码量多一些的，还可以结合html和css，写出更加绚丽的游戏：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-2c7ea2ff882f4bbdaa407b4e4775c06c[/img]
甚至还可以是3D游戏：
[img]https://201907.oss-cn-shanghai.aliyuncs.com/wc/1811847-05916d06247f43f87e4ae9fc65c54232[/img]
JavaScript还能干一些十分有趣的事情，比如
[list][*][/list][code]n=setInterval("for(n+=7,i=k,P='p.\\n';i-=1/k;P+=P[i%2?(i%2*j-j+n/k^j)&1:2]) j=k/i;p.innerHTML=P",k=64)

复制代码

运行结果：

或者使用一些奇技淫巧：

把下列这些卖萌的表情，添加到script标签中，居然还能运行！

试运行下列代码，会得出什么结果？

[/code][code]

复制代码

[/code][code]

复制代码

ω= /｀ｍ） ~┻━┻ //*｀*/ ['_']; o=() =_=3; c=(Θ) =()-(); (Д) =(Θ)= (o^_^o)/ (o^_^o);(Д)={Θ: '_' ,ω : ((ω==3) +'_') [Θ] , :(ω+ '_')[o^_^o -(Θ)] ,Д:((==3) +'_')[] }; (Д) [Θ] =((ω==3) +'_') [c^_^o];(Д) ['c'] = ((Д)+'_') [ ()+()-(Θ) ];(Д) ['o'] = ((Д)+'_') [Θ];(o)=(Д) ['c']+(Д) ['o']+(ω +'_')[Θ]+ ((ω==3) +'_') [] + ((Д) +'_') [()+()]+ ((==3) +'_') [Θ]+((==3) +'_') [() - (Θ)]+(Д) ['c']+((Д)+'_') [()+()]+ (Д) ['o']+((==3) +'_') [Θ];(Д) ['_'] =(o^_^o) [o] [o];(ε)=((==3) +'_') [Θ]+ (Д) .Д+((Д)+'_') [() + ()]+((==3) +'_') [o^_^o -Θ]+((==3) +'_') [Θ]+ (ω +'_') [Θ]; ()+=(Θ); (Д)[ε]='\\'; (Д).Θ=(Д+ )[o^_^o -(Θ)];(oo)=(ω +'_')[c^_^o];(Д) [o]='\"';(Д) ['_'] ( (Д) ['_'] (ε+(Д)[o]+ (Д)[ε]+(Θ)+ ()+ (Θ)+ (Д)[ε]+(Θ)+ (() + (Θ))+ ()+ (Д)[ε]+(Θ)+ ()+ (() + (Θ))+ (Д)[ε]+(Θ)+ ((o^_^o) +(o^_^o))+ ((o^_^o) - (Θ))+ (Д)[ε]+(Θ)+ ((o^_^o) +(o^_^o))+ ()+ (Д)[ε]+(() + (Θ))+ (c^_^o)+ (Д)[ε]+()+ ((o^_^o) - (Θ))+ (Д)[ε]+(oo)+ (() + (Θ))+ (Д) .Θ+ ((o^_^o) +(o^_^o))+ ((o^_^o) +(o^_^o))+ (Д)[ε]+(oo)+ (() + (o^_^o))+ (Д) [Θ]+ (Θ)+ ((o^_^o) +(o^_^o))+ (Д)[ε]+(oo)+ (() + (o^_^o))+ (Д) .ω+ (c^_^o)+ (Д) .Θ+ (Д)[ε]+(oo)+ ()+ (Д) .Д+ (Д) ['c']+ (Д) .Д+ (Д)[ε]+(Θ)+ ((o^_^o) - (Θ))+ (() + (o^_^o))+ (Д)[ε]+((o^_^o) +(o^_^o))+ (o^_^o)+ (Д)[ε]+(Θ)+ (c^_^o)+ (o^_^o)+ (Д)[ε]+(Θ)+ ((o^_^o) +(o^_^o))+ (o^_^o)+ (Д)[ε]+(Θ)+ ()+ (o^_^o)+ (Д)[ε]+(Θ)+ (() + (Θ))+ (c^_^o)+ (Д)[ε]+(Θ)+ (() + (Θ))+ (() + (o^_^o))+ (Д)[ε]+(Θ)+ (() + (Θ))+ (() + (o^_^o))+ (Д)[ε]+(Θ)+ (() + (Θ))+ ()+ (Д)[ε]+(oo)+ (() + (Θ))+ (Д) [Θ]+ (c^_^o)+ (c^_^o)+ (Д)[ε]+(oo)+ (() + (Θ))+ (() + () + (Θ))+ (Д) ['c']+ (Д) .Θ+ (Д)[ε]+()+ ((o^_^o) - (Θ))+ (Д)[ε]+(() + (Θ))+ (Θ)+ (Д)[o]) (Θ)) ('_');

复制代码

[/code][code]

复制代码

[code][/code]
生成网址：
http://utf-8.jp/public/aaencode.html

既然JavaScript那么有趣，自然少不了炫技的地方。

大名鼎鼎的https://js1k.com/就为JavaScript开发者提供了平台， JS1k每年都会举行一次比赛，参赛者需使用JavaScript编写不大于1k的程序，写出让人惊艳的JS程序获胜，入围参赛作品都能获得几百欧元和美元的奖励。

今年第一高票作品：

如果是你，你会写出什么样的JavaScript参赛呢？

想要做出属于自己的JS程序吗？

点击下方的“阅读原文”，学习HTML、CSS、JavaScript，实现这个梦想！

点击“阅读原文”开启JavaScript之旅