<!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. swoole安装报错详解 mysqlnd_find_charset_nr in Unknow

    今天安装 swoole扩展时候,最后一步报错如下: PHP Warning: PHP Startup: Unable to load dynamic library '/usr/lib64/php/m ...

  2. Centos7服务器启动jar包项目最佳方式

    jar后台运行:nohup java -jar xx.jar >/dev/null & 此处的“>/dev/null”作用是将终端输出信息输出到空洞中,即不保存输出信息,若要查看输 ...

  3. 20165224 陆艺杰 Exp4 恶意代码分析

    Exp4 恶意代码分析 1实验后回答问题 (1)如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. 计划任务每段 ...

  4. Java 实现手机发送短信验证码

    Java 实现手机发送短信验证码 采用引入第三方工具的方式,网上查了半天,发现简单的实现方式便是注册一个中国网建的账号,新建账号的时候会附带赠几条免费短信,彩信 ,之后想要在使用就得花钱了.简单的操作 ...

  5. JavaWeb学习笔记（四）—— response

    一.response概述 response是Servlet.service方法的一个参数,类型为javax.servlet.http.HttpServletResponse.在客户端发出每个请求时,服 ...

  6. Maven学习笔记（二）—— 整合SSH框架

    一.知识点准备 1.1 什么是依赖传递? 我们只添加一个struts2-core的依赖,结果会发现所有关于struts2的依赖都进来了. 因为我们的项目依赖struts2-core-2.3.24.ja ...

  7. 【转】Caused by: Action class [com.struts.action.xxxAction] not found 解决方法

    刚学习Struts,自己写了个简单程序,一启动tomcat就报错,但是我按着ctrl点击struts.xml中com.struts.action.LoginAction也能定位到LoginAction ...

  8. python学习之路---day26

    网络的基本知识点 一:网络通信原理 连接两台计算机之间的Internet之间的协议一系列协议为互联网协议 互联网协议的功能是:定义计算机如何接入Internet,以及Internet的计算机通信标准 ...

  9. P4578 [FJOI2018]所罗门王的宝藏

    传送门 考虑一个位置答案传递性,如果某个位置的红宝石转动确定了,那么会引起连锁反应: 如图,绿色的转动确定了,那么那两个蓝色的转动也确定了 自己手玩一下,发现如果有解那么随便找一个开始然后一路玩下去最 ...

  10. BZOJ - 2844 线性基

    题意:求给定的数在原数组中的异或组合中的排名(非去重) 因为线性基中\(b[j]=1\)表示该位肯定存在,所以给定的数如果含有该位,由严格递增和集合枚举可得,排名必然加上\(2^j\)(不是完全对角就 ...