直接上效果图：

这个贪食蛇关键地方在于数组，它的长度增加其实是数组的增长，就是数组的向前追加等操作，核心就是数组的操作。

完整代码：

<!DOCTYPE html>

<html>

    <body>

        <canvas id="myCanvas" width="240" height="240" style="border:1px solid #d3d3d3;">

            Your browser does not support the HTML5 canvas tag.

        </canvas>

        <script>

        //r数组表示蛇 ； co表示蛇前进的方向，默认向下 ； e表示食物

var ctx = document.getElementById("myCanvas").getContext("2d"),

    r = [{

        x: 10,

        y: 9

    }, {

        x: 10,

        y: 8

    }],

    co = 40,

    e = null;

    /*为了避免按键太快，使定时器没有反应过来，出现bug*/

    var offOn=true;

    /*这是关卡的开关*/

    var offOn01=true;

    /*关卡倒计开始值*/

    var num=3;

//循环，间隔为200毫秒

var timer=setInterval(doMove, 200);

function doMove() {

    //给蛇加上阴影效果

    ctx.shadowBlur = 20, ctx.shadowColor = "black";

    //游戏是否已经结束

    if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24) return;

    //如果有食物，则根据蛇前进的方向判断是否吃到了食物，并且将蛇数组中最后一个元素换到首部

    e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) ||

        (co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) ||

        (co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) ||

        (co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ?

    (r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop()));

    //根据方向，重新设定蛇数组首元素的坐标，从而进行移动

    (co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);

    //清空屏幕

    ctx.clearRect(0, 0, 240, 240);

    //如果有食物，则绘制食物

    if (e) ctx.fillRect(e.x * 10, e.y * 10, 10, 10);

    //绘制蛇

    for (var i = 0; i < r.length; i++) ctx.fillRect(r[i].x * 10, r[i].y * 10, 10, 10);

    //如果没有食物，则在随机位置上加入一粒食物

    while (e == null || check(e)) e = {

        y: (Math.floor(Math.random() * 24)),

        x: (Math.floor(Math.random() * 24))

    };

    /*分数*/

    ctx.shadowBlur=0;

    ctx.font="12px Arial";

    ctx.fillText("分数:"+(r.length - 2),10,10);

    ctx.textBaseline="top";

    //判断游戏是否结束

    if (check(r[0], 0) || r[0].x < 0 || r[0].x >= 24 || r[0].y < 0 || r[0].y >= 24)

        alert("game over\n你获得：" + (r.length - 2) + "分");

    /*设置一个关卡，就是分数到10分后进入下一关，只设置一个关卡*/

    if((r.length-2)==10){

    if(offOn01){

        clearInterval(timer);

        offOn01=false;

        var timer0=setInterval(function(){

            if(num<=0){

                clearInterval(timer0);

            }

            ctx.clearRect(0, 0, 240, 240);

            ctx.font="20px Arial";

            ctx.textBaseline="middle";

            ctx.textAlign="center";

            ctx.fillText("下一关:"+num,120,120);

            num=--num<0?0:num;

        },1000);

            setTimeout(function(){

                timer=setInterval(doMove, 100);

            },4000);

        }

    }

    offOn=true;

}

//加入键盘事件，用方向键来控制蛇前进的方向

/*(Math.abs(event.keyCode - co) != 2判断不能向后走

left:37,top:38,right:39,bottom:40

反方向刚刚好是相差2

*/

document.onkeydown = function(event) {

    if(offOn){

        offOn=false;

        co = event.keyCode >= 37 &&

        event.keyCode <= 40 &&

        (Math.abs(event.keyCode - co) != 2) ? event.keyCode : co;

    }

    }

    //判断指定位置是否与蛇重叠

    /*这是为了检测自己撞到自己或检测食物在贪食蛇里面的*/

function check(e, j) {

    for (var i = 0; i < r.length; i++)

        if (j != i && r[i].x == e.x && r[i].y == e.y) return true;

    return false;

}</script>

    </body>

</html>

可以直接复制上面代码看效果；

上面的核心代码：

//如果有食物，则根据蛇前进的方向判断是否吃到了食物，并且将蛇数组中最后一个元素换到首部

    e != null && ((co == 40 && r[0].x == e.x && r[0].y + 1 == e.y) ||

        (co == 38 && r[0].x == e.x && r[0].y - 1 == e.y) ||

        (co == 37 && r[0].x - 1 == e.x && r[0].y == e.y) ||

        (co == 39 && r[0].x + 1 == e.x && r[0].y == e.y)) ?

    (r.unshift(e), e = null, r.unshift(r.pop())) : (r.unshift(r.pop()));

    //根据方向，重新设定蛇数组首元素的坐标，从而进行移动

    (co == 40 || co == 38) ? (r[0].x = r[1].x, r[0].y = r[1].y + (co == 40 ? 1 : -1)) : (r[0].x = r[1].x + (co == 39 ? 1 : -1), r[0].y = r[1].y);

这是贪食蛇的核心代码，就是数组长度添加，和数组里的值怎么改变。

canvas游戏之贪食蛇的更多相关文章

  1. Javascript贪食蛇小游戏

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

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

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

  3. 基于javaSwing的贪食蛇游戏

    这个项目时,是我好几年前写的了.但对刚入门,或者想瞧瞧java的图形的界面swing的同学,还是有点用处的. 在这推荐给你. 涉及技术点 swing,多线程,文件读写,多媒体文件播放等 游戏简介 该游 ...

  4. 教你如何用python和pygame制作一个简单的贪食蛇游戏，可自定义

    1.效果图 2.完整的代码 #第1步:导出模块 import pygame, sys, random from pygame.locals import * # 第2步:定义颜色变量,在pygame中 ...

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

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

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

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

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

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

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

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

  9. js贪食蛇

    <!DOCTYPE html><head><title>canvas贪食蛇</title><style>.canvas{    backgr ...

随机推荐

  1. ElasticSearch学习笔记-02集群相关操作_cat参数

    _cat参数允许你查看集群的一些相关信息,如集群是否健康,有哪些节点,以及索引的情况等的. 检测集群是否健康 curl localhost:9200/_cat/health?v 说明: curl 是一 ...

  2. Java学习日记之 Java-IO流

    Java中的IO流在处理上分为字节流和字符流.字节流和字符流的区别 : 1.字节流读取的时候,读到一个字节就返回一个字节:  字符流使用了字节流读到一个或多个字节(中文对应的字节数是两个,在UTF-8 ...

  3. iOS开发零基础--Swift教程 字典

    字典的介绍 字典允许按照某个键来访问元素 字典是由两部分集合构成的,一个是键(key)集合,一个是值(value)集合 键集合是不能有重复元素的,而值集合是可以重复的,键和值是成对出现的 Swift中 ...

  4. wireshark常用过滤规则

    wireshark常用过滤规则:(Filter中输入过滤规则)1.源ip过滤:ip.src==1.1.1.1               (过滤源ip为1.1.1.1的包) 2.目的ip过滤:ip.d ...

  5. sql查询重复记录、删除重复记录方法大全

    查找所有重复标题的记录:SELECT *FROM t_info aWHERE ((SELECT COUNT(*)FROM t_infoWHERE Title = a.Title) > 1)ORD ...

  6. 第十章 PageRank——Google的民主表决式网页排名技术

    搜索引擎的结果取决于两组信息:网页的质量信息,这个查询与每个网页的相关性信息.这里,我们介绍前一个. 1.PageRank算法原理 算法的原理很简单,在互联网上,如果一个网页被很多其他网页所链接,说明 ...

  7. HTTP笔记整理（2）

    四.  http协议之请求 1.http请求由三部分组成,分别是:请求行(request line).请求报头(request header).请求正文(body) (1).  请求行:用来说明请求类 ...

  8. Percona Server 5.6.13-61.0 首个 GA 版本发布

    Percona Server 5.6 的首个 GA 版本发布了,版本号是 5.6.13-61.0 ,该版本基于 MySQL 5.6.13 改进内容包括: New Features: Percona S ...

  9. linux下用rpm包安装默认配置

    rpm安装默认目录:数据文件:/var/lib/mysql/配置文件模板:/usr/share/mysqlmysql客户端工具目录:/usr/bin日志目录:/var/log/pid,sock文件目录 ...

  10. 使用Immutable优化复制注意事项

    这是Orleans中对于序列化检查类型是否支持Orleans内置的高速序列化时,使用Immutable<>包装和类型声明时,有ImmutableAttribute,效果是一样的.所以无需重 ...