<!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. java并发包&线程池原理分析&锁的深度化

          java并发包&线程池原理分析&锁的深度化 并发包 同步容器类 Vector与ArrayList区别 1.ArrayList是最常用的List实现类,内部是通过数组实现的, ...

  2. CentOS7 下使用 Nginx

    update: 2019-03-25 --新增新装 Nginx 的启动.重启.关闭和查看 2019-02-19 --新增 yum 方式快速简单安装 Nginx 2018-09-29 --新增配置文件对 ...

  3. 【算法笔记】B1043 输出PATest

    1043 输出PATest (20 分) 给定一个长度不超过 10​4​​ 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest.... 这样的顺序输出,并忽略其它字符.当 ...

  4. codeforces1073d Berland Fair 思维（暴力删除）

    题目传送门 题目大意:一圈人围起来卖糖果,标号从1-n,每个位置的糖果都有自己的价格,一个人拿着钱从q开始走,能买则买,不能买则走到下一家,问最多能买多少件物品. 思路:此题的关键是不能买则走到下一家 ...

  5. 112th LeetCode Weekly Contest Minimum Increment to Make Array Unique

    Given an array of integers A, a move consists of choosing any A[i], and incrementing it by 1. Return ...

  6. 克隆kvm虚拟机报错ImportError: No module named 'requests.packages.urllib3'

    2018-06-21 更新系统造成kvm克隆命令报错 virt-clone -o centos--update-clone -n centos--maven-test -f /var/lib/vmdk ...

  7. PIE SDK矢量分级渲染

    1. 功能简介 分级渲染是矢量的一种数据表达方式.通过选取一个字段,并根据实际需要对字段的数据进行分级,并对每一级设置不同的符号,已达到区分显示的效果. 2. 功能实现说明 2.1. 实现思路及原理说 ...

  8. PIE SDK地图书签

    地图书签,可以理解为暂时记录当前地图的范围和放大级别,在后续的操作中如果想回到地图之前的状态,就可以点击保存的书签就可以回到此状态,如图所示: 地图刚加载的时候是一幅世界地图 我们将地图的中心拖到南美 ...

  9. html中一个div怎么引入另一个页面

    转载:https://zhidao.baidu.com/question/588973997598951645.html

  10. jvm双亲委派模型

    其实,双亲委派模型并不复杂.自定义类加载器也不难!随便从网上搜一下就能搜出一大把结果,然后copy一下就能用.但是,如果每次想自定义类加载器就必须搜一遍别人的文章,然后复制,这样显然不行.可是自定义类 ...