首页 > 文章 > web前端 > canvas游戏之贪食蛇

canvas游戏之贪食蛇

高洛峰原创: 2016-10-12 13:47:20916浏览

直接上效果图：

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

完整代码：

<!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);

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

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：Dom探索之基础详解下一篇：初学 Canvas

查看更多

canvas游戏之贪食蛇

相关文章