<!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. zzuli 2131 Can Win dinic+链式前向星（难点：抽象出网络模型+建边）

    2131: Can Win Time Limit: 1 Sec  Memory Limit: 128 MB Submit: 431  Solved: 50 SubmitStatusWeb Board ...

  2. 【OCR技术系列之二】文字定位与切割

    要做文字识别,第一步要考虑的就是怎么将每一个字符从图片中切割下来,然后才可以送入我们设计好的模型进行字符识别.现在就以下面这张图片为例,说一说最一般的字符切割的步骤是哪些. 当然,我们实际上要识别的图 ...

  3. oracle 数据库中的序列

    序列是什么,通俗点说,序列就是按照一定顺序进行排列,序列会自动给你递增,生成唯一的序列号: oracle数据库不同于sqlServer数据库,oracle数据库中是没有自增长列,使用的是sequenc ...

  4. Java Random介绍

    一.简介 Random类位于java.util包下,此类的实例用于生成伪随机数流.之所以称之为伪随机,是因为真正意义上的随机数(或者称为随机事件)在某次产生过程中是按照实验过程表现的分布概率随机产生的 ...

  5. kali git 环境配置

    kali 配置很简单,输入apt-get install git 我输入时返回了错误,执行命令dpkg --configure -a 就行了

  6. mac ox下android 通过battery-historian进行电量分析

    简单介绍下如何用battery-historian进行电量分析,因为battery-hostorian是基于go语言的框架,所以需要安装go 1.安装go 2.配置go环境变量到.bash_profi ...

  7. CSS的常见问题

    1.css的编码风格 多行式:可读性越强,但是CSS文件的行数过多,影响开发速度,增大CSS文件的大小 一行式:可读性稍差,有效减少CSS文件的行数,有利于提高开发速度,减小CSS文件的大小 2.id ...

  8. Linux中如何恢复rm命令误删除的文件之extundelete编译安装及使用

    1.下载extundelete包,安装依赖 我用的是Centos系统,在安装extundelete之前需要安装e2fsprogs,e2fsprogs-libs,e2fsprogs-devel. yum ...

  9. 单点登录(一)使用Cookie+File实现单点登录

    本文使用Cookies+Filter实现www.taobao.tgb.com 和 www.tianmao.tgb.com的单点登录. 源代码分享:链接: http://pan.baidu.com/s/ ...

  10. java上传图片剪切工具类

    package com.up.util; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io. ...