<!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. nginx启动脚本，手动编辑

    nginx启动脚本,手动编辑 #! /bin/bash # chkconfig: - # description: nginx service XDIR=/www/server/nginx DESC= ...

  2. 盘点CSS中可以和不可以继承的属性

    CSS中可以和不可以继承的属性   一.无继承性的属性 1.display:规定元素应该生成的框的类型 2.文本属性: vertical-align:垂直文本对齐 text-decoration:规定 ...

  3. 拆分字符and读取properties文件

    在方法里面建立properties对象 Properties pps = new Properties(); 调用.load()方法 pps.load(new FileInputStream(&quo ...

  4. CDH升级

    升级主要分为两部分1.CM的升级.2.CDH的升级 CM的升级 两种升级方法 1.使用package 2.使用Tarballs升级方法,参照官方升级指引,Tarball中包含了Cloudera Man ...

  5. caioj 1237: 【最近公共祖先】树上任意两点的距离 在线倍增ST

    caioj 1237: [最近公共祖先]树上任意两点的距离 倍增ST 题目链接:http://caioj.cn/problem.php?id=1237 思路: 针对询问次数多的时候,采取倍增求取LCA ...

  6. HDU1532 Drainage Ditches SAP+链式前向星

    Drainage Ditches Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. UWP 实现App多语言为所欲为切换

    为所欲为,嗯 话不多说,先看效果吧(事先说明,我的方法不是最好的,但是我用着最有效.) [吐槽一下博客园上传的图片,我的App敲鸡漂亮滴,自带亚克力效果,怎么图片上传上来这么多的噪点啊.] [ 商店地 ...

  8. Docker: 限制容器可用的内存

    默认情况下容器使用的资源是不受限制的.也就是可以使用主机内核调度器所允许的最大资源.但是在容器的使用过程中,经常需要对容器可以使用的主机资源进行限制,本文介绍如何限制容器可以使用的主机内存. 为什么要 ...

  9. MyEclipse 使用图文详解

    引言 某天在群里看到有小伙伴问MyEclipse/Eclipse的一些使用问题,虽然在我看来,问的问题很简单,但是如果对于刚刚学习的人来说,可能使用就不那么友好了.毕竟我在开始使用MyEclipse/ ...

  10. Navicat for Mysql 暴力破解教程

    关于破解Navicat for MySQL的教程有很多 ,但是比较繁琐, 这里推荐一种比较简单的办法~ 网盘地址:链接: https://pan.baidu.com/s/1kVHyShL 密码: ws ...