68行代码实现贪吃蛇(Canvas)

<canvas id="gc" width="400" height="400"></canvas>
<script>
window.onload=function() {
    canv = document.getElementById("gc");
    ctx = canv.getContext("2d");
    document.addEventListener("keydown",keyPush);
    setInterval(game,1000/15);
}
px=py=10;
gs=tc=20;
ax=ay=15;
xv=yv=0;
trail=[];
tail=5;
function game() {
    px+=xv;
    py+=yv;
    if(px<0) {
        px = tc-1;
    }
    if(px>tc-1) {
        px = 0;
    }
    if(py<0) {
        py = tc -1;
    }
    if(py>tc-1) {
        py = 0;
    }
    ctx.fillStyle = 'black';
    ctx.fillRect(0,0,canv.width,canv.height);

    ctx.fillStyle = 'yellow';
    for(var i=0;i<trail.length;i++) {
        ctx.fillRect(trail[i].x*gs,trail[i].y*gs,gs-2,gs-2);
        if(trail[i].x==px && trail[i].y==py) {
            tail = 5;
        }
    }
    trail.push({x:px,y:py});
    while(trail.length>tail) {
        trail.shift();
    }
    if(ax==px && ay==py) {
        tail++;
        ax=Math.floor(Math.random()*tc);
        ay=Math.floor(Math.random()*tc);
    }
    ctx.fillStyle = 'orange';
    ctx.fillRect(ax*gs,ay*gs,gs-2,gs-2);
}
function keyPush(evt) {
    switch(evt.keyCode) {
        case 37:
            xv=-1;yv=0;
            break;
        case 38:
            xv=0;yv=-1;
            break;
        case 39:
            xv=1;yv=0;
            break;
        case 40:
            xv=0;yv=1;
            break;
    }
}
</script>
原文地址:https://www.cnblogs.com/aisowe/p/15245602.html