20行JS代码实现贪吃蛇
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>20行JS代码实现贪吃蛇</title>
</head>
<body>
<canvas id="can" width="400" height="400" style="background:black;"></canvas>
<script>
var sn=[42,41],dz=43,fx=1,n,ctx=document.getElementById("can").getContext("2d");
function draw(t,c){
ctx.fillStyle=c;
ctx.fillRect(t%20*20,~~(t/20)*20,18,18);
}
document.onkeydown=function(e){fx=sn[1]-sn[0]==(n=[-1,-20,1,20][(e||event).keyCode-37]||fx)?fx:n};
!function(){
sn.unshift(n=sn[0]+fx);
if(sn.indexOf(n,1)>0 || n<0||n>399||fx==1&&n%20==0||fx==-1&&n%20==19) 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");
setTimeout(arguments.callee,500);
}();
</script>
</body>
</html>
20行JS代码实现贪吃蛇的更多相关文章
- 200行PYTHON代码实现贪吃蛇
200行Python代码实现贪吃蛇 话不多说,最后会给出全部的代码,也可以从这里Fork,正文开始: 目前实现的功能列表: 贪吃蛇的控制,通过上下左右方向键: 触碰到边缘.墙壁.自身则游戏结束: 接触 ...
- 20行js代码制作网页刮刮乐
分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body>  &l ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- 只有20行Javascript代码！手把手教你写一个页面模板引擎
http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...
- 20行Python代码爬取王者荣耀全英雄皮肤
引言王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. 准备工作 ...
- 不到30行JS代码实现的Excel表格
不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...
- python3 80行代码实现贪吃蛇
上面是实现的截图,废话不说,直接开始说一下代码 pos = { 'UP': (-1,0), 'DOWN':(+1,0), 'LEFT':(0,-1), 'RIGHT':(0,+1), } curren ...
- 18 行 JS 代码编一个倒时器
有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...
- 如何用20行Python代码打造一个微信群聊助手？
今天要教大家一个黑科技,20行代码实现自己定制的微信群聊助手,可以用来活跃群气氛,好多群主创建完群后,拉完一群人,之后就一片寂静,有个群聊助手,就可以帮忙活跃群里气氛,通过今天在自己的微信上有一大批好 ...
随机推荐
- js 与 ios Android交互
一.android 交互 1.js调用webview 在android API Level 17及以上的版本中,就会出现js调用不了android的代码,这是版本兼容的问题,需要在调用的方法上面加一个 ...
- 【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork
原文链接:http://www.cnblogs.com/woodk/articles/5199536.html JavaScript多线程,在HTML5 WebWork没出现之前很多人都是用Concu ...
- 前端构建工具之争——Webpack vs Gulp 谁会被拍死在沙滩上
.table tr>td:nth-child(1){width: 2em !important;padding-left: .6rem !important;padding-right: .6r ...
- 迭代子模式（Iterator）
迭代子模式(Iterator) 顾名思义,迭代器模式就是顺序访问聚集中的对象,一般来说,集合中非常常见,如果对集合类比较熟悉的话,理解本模式会十分轻松.这句话包含两层意思:一是需要遍历的对象,即聚集对 ...
- 用shape画内圆外方，形成一个圆形头像
很多人都有过这样的经历,想要在自己写的程序里,上传一张随便大小形状的照片在程序里显示都是圆形照片,或者是方形,或者是三角形,但是写代码又非常麻烦,这里就有一个也可以实现一样效果的方法,那就是用 lay ...
- Go语言教程5 if switch select
首先您需要有php或是c的基础. 否则可能看不明白 方法如下 if 表达式{ //需要注意的是 没有括号. 没错. 没有括号 比如 if 1>2 {}else{} } else { } s ...
- php接入支付宝的流程
php接入支付宝的流程写在这里供像我一样的小白参考. 1.首先要有一个创建一个应用(选好自己想要的功能,关于支付的功能,貌似都需要签约) 2.下载SDK&Dome(网址https://doc. ...
- 【luogu P1186】玛丽卡
https://www.luogu.org/problem/show?pid=1186 考虑暴力,枚举图上每一条边删去后跑Dijkstra,取M次的最大值. 仔细想想就会发现删除最短路以外的边对最短路 ...
- android应用集成google登录
集成google登录之前需要有一下三点要求,只有具备一下两点要求才能集成google登录: 1,android 运行版本4.0及更新版本 2,android 设 ...
- python 初学之账户登录
要求: 输入用户名密码正确,提示登录成功, 输入三次密码错误,锁定账户. 开始: 使用两个文件: 密码账户文件 文件格式: jason 23456 tom 56789 tang ...