<!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. sklearn.neighbors.kneighbors_graph的简单属性介绍

    connectivity = kneighbors_graph(data, n_neighbors=7, mode='distance', metric='minkowski', p=2, inclu ...

  2. file-loader 使用心得

    将webpack 里面的图片文件都放在制定文件夹. 配置如下 { test: /\.png$/, loader: "file-loader?name=imgs/[name]-[hash].[ ...

  3. 简单的基于Vue-axios请求封装

    具体实现思路=>封装之前需要用npm安装并引入axios,使用一个单独的js模块作为接口请输出对象,然后export dafult 这个对象. 1.首先我们需要在Vue实例的原型prototyp ...

  4. UWP 五星好评

    var pfn = Package.Current.Id.FamilyName; await Launcher.LaunchUriAsync(new Uri("ms-windows-stor ...

  5. 组件嵌套时报：Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

    在组件嵌套的过程中,报了一个错误: 这里报错的原因是:vue的组件(模板)只能有一个根节点,即.vue文件中的<template>标签下只能有一个子元素. 因此,建议大家在写.vue组件的 ...

  6. Web前端学习——JavaScript

    一.JavaScript介绍JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚 ...

  7. Golang学习--包管理工具glide

    上一篇文章中我们已经成功的运行了go的代码,这是我们迈出的最基础的一步. 一个项目通常会依赖很多外部的库,当依赖的库比较多的时候,手工管理就会比较麻烦,这个时候就需要包管理工具出场了,帮你管理好所有依 ...

  8. 【深度学习系列】用PaddlePaddle和Tensorflow实现经典CNN网络GoogLeNet

    前面讲了LeNet.AlexNet和Vgg,这周来讲讲GoogLeNet.GoogLeNet是由google的Christian Szegedy等人在2014年的论文<Going Deeper ...

  9. SAML2.0 协议初识（一）

    一.什么是 SAML 协议? SAML 即安全断言标记语言,英文全称是 Security Assertion Markup Language.它是一个基于 XML 的标准,用于在不同的安全域(secu ...

  10. python爬虫(五)_urllib2:Get请求和Post请求

    本篇将介绍urllib2的Get和Post方法,更多内容请参考:python学习指南 urllib2默认只支持HTTP/HTTPS的GET和POST方法 urllib.urlencode() urll ...