<!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. Django框架中的视图和模板

    视图views django中的视图就是用来定义函数来处理一些逻辑的核心地方. django中通过urls来建立路径跟views中的视图函数的映射关系. urls中的映射关系 ''' urlpatte ...

  2. Web Mining and Big Data 公开课学习笔记 ---lecture0

    0.1  课程主要内容:Big data technologies , Machine Learning and AI 0.6   OUTLINE: predict the future using ...

  3. shell自动化巡检

    #!/bin/bash#主机信息每日巡检 IPADDR=$(ifconfig eth0|grep 'inet addr'|awk -F '[ :]' '{print $13}')#环境变量PATH没设 ...

  4. Git版本控制器的使用

    首先介绍一下什么是Git:git是目前最流行的版本控制系统,属于分布式版本控制器. 使用Git前先要在GitHub创建代码仓库,或者获取你要应用的GitHub的链接地址. 创建GitHub仓库这里就不 ...

  5. 51Nod 1108 距离之和最小 V2 1096 距离之和最小 中位数性质

    1108 距离之和最小 V2基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 收藏 关注三维空间上有N个点, 求一个点使它到这N个点的曼哈顿距离之和最小,输出这个最小 ...

  6. POJ A Simple Problem with Integers 线段树 lazy-target 区间跟新

    A Simple Problem with Integers Time Limit: 5000MS   Memory Limit: 131072K Total Submissions: 105742 ...

  7. 全本 | iKcamp翻译 | 《JavaScript 轻量级函数式编程》|《你不知道的JS》姊妹篇

    原文地址:Functional-Light-JS 原文作者:Kyle Simpson - <You-Dont-Know-JS>作者 译者团队(排名不分先后):阿希.blueken.bruc ...

  8. Linux 编程--三种常用的定时器

    这节我们来探讨一下linux开发过程中常用的定时器,尤其在网络编程中被常常用到如heartbeat,断线重连等等.这里提供了三种定时器的方案,分别是链表形式的计时器,环型计时器,最小堆计时器.每个都有 ...

  9. WPF依赖对象（DependencyObject） 实现源码，理解WPF原理必读

    /// DependencyObject encompasses all property engine services. It's primary function /// is providin ...

  10. windows 怎样查看port占用情况

    開始--执行--cmd 进入命令提示符 输入netstat -ano 就可以看到全部连接的PID 之后在任务管理器中找到这个PID所相应的程序假设任务管理器中没有PID这一项,能够在任务管理器中选&q ...