<!DOCTYPE html>
<head>
<title>canvas贪食蛇</title>
<style>
.canvas{
    background:black;
}
</style>
</head>
<body>
<canvas class="canvas" id="canvas" width='400' height='400'></canvas>
<script>
var sn=[42,41], dz=43, fx=1, n, ctx=document.getElementById('canvas').getContext('2d');
function draw(t,c){
     ctx.fillStyle=c;
     ctx.fillRect(t%20*20+1,~~(t/20)*20+1,18,18);
}
document.onkeydown=function(e){fx=sn[1]-[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 ;
      draw(n,'red');
      if(n==dz){
          while(sn.indexOf(dz=~~(Math.random()*400))>=0);
          draw(dz,'red');
      }else
          draw(sn.pop(),'Black');
      setTimeout(arguments.callee,130);
}();
</script>

</body>
</html>

js贪食蛇的更多相关文章

  1. Javascript贪食蛇小游戏

    试玩:http://hovertree.com/game/9/ 贪吃蛇是一种风靡全球的小游戏,就是一条小蛇,不停地在屏幕上游走,吃各个方向出现的蛋,越吃越长.只要蛇头碰到屏幕四周,或者碰到自己的身子, ...

  2. 一起来做webgame，《Javascript贪食蛇》

    2019-09-22更新: 使用canvas实现:https://github.com/onlyfu/SnakeSir-Javascript 以下为HTML4实现: 今天来个略有意思的,<贪食蛇 ...

  3. canvas游戏之贪食蛇

    直接上效果图: 这个贪食蛇关键地方在于数组,它的长度增加其实是数组的增长,就是数组的向前追加等操作,核心就是数组的操作. 完整代码: <!DOCTYPE html> <html> ...

  4. JavaScript强化教程 - 六步实现贪食蛇

    1.首先创建div 并且给div加样式 <div id="pannel" style="width: 500px;height: 500px;z-index: 1; ...

  5. OS X下开发！ios系统贪食蛇！——from cocos2d-x 3.0

    前几天用cocos2d-x写了个贪食蛇!这次是全然在osx下开发的.基本的思路是这种我建立了一个Snake类,当中有两个构造函数一个是用于存放蛇身体sprite的图片和Snake的X坐标和Y坐标.另外 ...

  6. 【原创】只学到二维数组和结构体，不用链表也能写一个C贪食蛇？（四）

    全系列Index: [原创]只学到二维数组和结构体,不用链表也能写一个C贪食蛇?(一) [原创]只学到二维数组和结构体,不用链表也能写一个C贪食蛇?(二) [原创]只学到二维数组和结构体,不用链表也能 ...

  7. Cocos2dx 3.0 过渡篇（二十五）死不了的贪食蛇(触摸版)

    上一篇写的贪食蛇的重力感应控制版,这一篇就讲下触摸控制版吧.额,也不知道写了那个贪食蛇教程究竟有没有获得沈老师的书,假设没有的话,看我不拿西瓜刀砍掉 偶尔E往事 的那啥! 重力版链接:http://b ...

  8. JavaScript贪食蛇游戏制作详解

    之前闲时开发过一个简单的网页版贪食蛇游戏程序,现在把程序的实现思路写下来,供有兴趣同学参考阅读. 代码的实现比较简单,整个程序由三个类,一组常量和一些游戏逻辑以外的初始化和控制代码组成,总共400多行 ...

  9. c++实现贪食蛇

    今天老师布置了作业 让我们观察c++实现贪食蛇的代码 #include<windows.h> #include<time.h> #include<stdlib.h> ...

随机推荐

  1. width:100%以什么为基准的测试

    起初是遇到这样一个问题:当盒模型设为box-sizing:border-box;(移动端上经常这么干).子盒子的width:100%,子盒子的width等于父盒子contend的长度还是condend ...

  2. ubuntu 上安装支付宝安全插件不能运行问题

    1.在ubuntu的firefox浏览器中打开支付宝首页,不能登录,按照提示下载插件 aliedit.tar.gz 2.解压到某个文件夹下,有文件aliedit.sh, 运行 # sh aliedit ...

  3. 扩展jQuery高亮网页中的文本选中

    <script type="text/javascript"> //1.扩展jQuery $.fn.selectRange = function (start, end ...

  4. Matlab2015 双目相机自动标定

    标定步骤 调出标定工具箱 在命令行输入stereoCameraCalibrator,出现如下界面: 勾选相应的选项 然后将上面的“Skew”.“Tangential Distortion”以及“3 C ...

  5. Apache 配置 虚拟主机

    <VirtualHost *:80> ServerName tongcheng.5q88.cn:80 ServerAlias DirectoryIndex index.html index ...

  6. Visual Studio Ultimate 2013 免费下载地址

    ed2k://|file|cn_visual_studio_2010_ultimate_x86_dvd_532347.iso|2685982720|4AE6228933DDE49D9BFA4C3467 ...

  7. 获取url路径的正则

    package unit; import java.util.regex.Matcher; import java.util.regex.Pattern; public class Util { // ...

  8. 在Maven打包war的时候包含空目录/空文件夹

    Maven打包的时候貌似默认会忽略空的文件夹,如果需要包含他们,则需要添加如下的插件配置: <plugins> <plugin> <artifactId>maven ...

  9. DenyHosts 阻止SSH暴力攻击

    当你的 Linux 服务器暴露在互联网之中,该服务器将会遭到互联网上的扫描软件进行扫描,并试图猜测SSH登录口令. 你会发现,每天会有多条SSH登录失败纪录.那些扫描工具将对你的服务器构成威胁,你必须 ...

  10. PIE SDK波谱运算

    1.算法功能简介 波谱运算(Spectral Math)是一种灵活的波谱处理工具,可以用数学表达式或IDL程序对波谱曲线(以及选择的多波段图像)进行处理.波谱曲线可以来自一幅多波段图像的Z剖面.波谱库 ...