<!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. 求知的木头 Cannot load browser "PhantomJS": it is not registered! Perhaps you are missing some plugin? 测试安装遇到的BUG

    原文链接 求知的木头   Cannot load browser "PhantomJS": it is not registered! Perhaps you are missin ...

  2. 原型模式（Prototype）

    原型模式(Prototype) 原型模式虽然是创建型的模式,但是与工程模式没有关系,从名字即可看出,该模式的思想就是将一个对象作为原型,对其进行复制.克隆,产生一个和原对象类似的新对象.本小结会通过对 ...

  3. 第四届河南省ACM 节能 区间DP

    1001: 节 能 时间限制: 1 Sec  内存限制: 128 MB 提交: 21  解决: 9 [提交][状态][讨论版] 题目描述 Dr.Kong设计的机器人卡多越来越聪明.最近市政公司交给卡多 ...

  4. python-02 数据类型、字符编码、文件处理

    标准数据类型 Python3 中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Tuple(元组) Sets(集合) Dictionary(字典) 数字 #整型 ...

  5. winform在鼠标操作时要判断是否按下Ctrl键

    (Control.ModifierKeys & Keys.Control) == Keys.Control

  6. 天天乐宝APP开发

    "互联网+"时代是一个"信息过剩"的时代,也是一个"注意力稀缺"的时代,怎样在"无限的信息中"获取"有限的注意 ...

  7. python3 scrapy+Crontab部署过程

    背景 最近有时间想学习下python3+scrapy,于是决定写一个小程序来练练手. 开发环境:MacOS High Sierra(10.13.1)+python3+scrapy. 开发工具:PyCh ...

  8. 1.python的安装

    1.python 安装实验所用为系统自带,退出为exit() 或ctrl +D命令 2.一般装pyhton2.7 ,3.5的版本有更多特效.不用在版本上太多纠结.python官网https://www ...

  9. 最全Pycharm教程（28）——Pycharm搜索导航之搜索应用实例

    1.主题 这里我们将介绍Pycharm另外一项强力的搜索导航功能.如果你希望知道某个特定的类或方法都在project中的哪些地方发挥了作用.也就是找出其全部的usages,这将是一个很巨大而繁琐的pr ...

  10. PHP中被忽略的性能优化利器：生成器

    如果是做Python或者其他语言的小伙伴,对于生成器应该不陌生.但很多PHP开发者或许都不知道生成器这个功能,可能是因为生成器是PHP 5.5.0才引入的功能,也可以是生成器作用不是很明显.但是,生成 ...