当前位置:Gxlcms > html代码 > canvas游戏之贪食蛇

canvas游戏之贪食蛇

时间:2021-07-01 10:21:17 帮助过:32人阅读

直接上效果图:

1.gif

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

完整代码:




    
        
            Your browser does not support the HTML5 canvas tag.
        
        

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

上面的核心代码:

//如果有食物,则根据蛇前进的方向判断是否吃到了食物,并且将蛇数组中最后一个元素换到首部
    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);

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

人气教程排行