<!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代码实现贪吃蛇的更多相关文章

  1. 200行PYTHON代码实现贪吃蛇

    200行Python代码实现贪吃蛇 话不多说,最后会给出全部的代码,也可以从这里Fork,正文开始: 目前实现的功能列表: 贪吃蛇的控制,通过上下左右方向键: 触碰到边缘.墙壁.自身则游戏结束: 接触 ...

  2. 20行js代码制作网页刮刮乐

    分享一段用canvas和JS制作刮刮乐的代码,JS部分去掉注释不到20行代码效果如下 盖伦.jpg 刮刮乐.gif HTML部分 <body> ![](img/gailun.jpg) &l ...

  3. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  4. 只有20行Javascript代码!手把手教你写一个页面模板引擎

    http://www.toobug.net/article/how_to_design_front_end_template_engine.html http://barretlee.com/webs ...

  5. 20行Python代码爬取王者荣耀全英雄皮肤

    引言王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王者荣耀所有英雄的所有皮肤,而且仅仅使用20行Python代码即可完成. 准备工作 ...

  6. 不到30行JS代码实现的Excel表格

    不到30行JS代码实现的Excel表格,jQuery并非不可替代 某国外程序员展示了一个由原生JS写成不依赖第三方库的,Excel表格应用,有以下特性: 由不足30行的原生JavaScript代码实现 ...

  7. python3 80行代码实现贪吃蛇

    上面是实现的截图,废话不说,直接开始说一下代码 pos = { 'UP': (-1,0), 'DOWN':(+1,0), 'LEFT':(0,-1), 'RIGHT':(0,+1), } curren ...

  8. 18 行 JS 代码编一个倒时器

    有时候在生活中,你需要一个JavaScript倒计时时钟,而不是一个末日装置设备.不管你是否有一次约会,销售.促销.或者游戏,你可以受益于使用原生JavaScript构建一个时钟,而不是拿到一个现成的 ...

  9. 如何用20行Python代码打造一个微信群聊助手?

    今天要教大家一个黑科技,20行代码实现自己定制的微信群聊助手,可以用来活跃群气氛,好多群主创建完群后,拉完一群人,之后就一片寂静,有个群聊助手,就可以帮忙活跃群里气氛,通过今天在自己的微信上有一大批好 ...

随机推荐

  1. canvas画一个时钟

    效果图如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  2. Java集合(2)一 ArrayList 与 LinkList

    目录 Java集合(1)一 集合框架 Java集合(2)一 ArrayList 与 LinkList Java集合(3)一 红黑树.TreeMap与TreeSet(上) Java集合(4)一 红黑树. ...

  3. hdoj 4325 Flowers 线段树+离散化

    hdoj 4325 Flowers 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4325 思路: 直接线段树,按照花的开放区间的大小建树,要注意虽然 ...

  4. MySQL二进制日志格式对复制的影响

    复制的分类 基于SQL语句的复制 - SBR 主库二进制日志格式使用STATEMENT 在MySQL 5.1之前仅存在SBR模式, 又称之为逻辑复制. 主库记录CUD操作的SQL语句, 从库会读取并重 ...

  5. SpringBoot运行原理

    如果我们使用的是SpringApplication的静态run方法,那么,这个方法里面首先要创建一个SpringApplication对象实例,然后调用这个创建好的SpringApplication的 ...

  6. WPF水珠效果按钮组

    效果图 相关知识 这部分基本就是废话,网上都能找到,我只不过是整理了以下.建议先不看,用到的时候可以回来看看 贝塞尔曲线 先来看两组图,有助于理解什么是贝塞尔曲线(图片取自维基百科,参考链接1) 二次 ...

  7. 逐步搭建Lamp环境之rpm软件包管理

    Linux中的rpm软件包管理类似于windows下的"xxx软件管家"."xxx电脑管家",其作用主要用于查询软件的安装情况.安装软件.卸载软件. 以下针对这 ...

  8. python 3.6 tkinter+urllib+json 火车车次信息查询

    --------blogs:  陈月白    http://www.cnblogs.com/chenyuebai    -------- 一.概述 妹子工作时需要大量地查询火车车次至南京的信息,包括该 ...

  9. netty详解之io模型

    提起IO模型首先想到的就是同步,异步,阻塞,非阻塞这几个概念.每个概念的含义,解释,概念间的区别这些都是好理解,这里深入*nix系统讲一下IO模型. 在*nix中将IO模型分为5类. Blocking ...

  10. Cocos2d-X使用CCAnimation创建动画

    动画在游戏中是很常见的 程序1:创建一个简单的动画 首先须要在project文件夹下的Resource文件夹中放一张有各种不同动作的图片 在程序中加入以下的代码 #include "Anim ...