前端学习笔记——“贪吃蛇”小游戏制作（二）

上篇笔记我完成了“贪吃蛇”的背景制作，下面开始实现由上、下、左、右键盘控制颜色款的移动方向。

点击开始按钮，颜色块向右匀速移动，按下方向键盘，即改变方向。当颜色块移动到背景边缘，提示“游戏结束”。

我的思路如下：

一、用定时器实现颜色块的匀速移动

function timer(){
    time=setInterval(function(){
    //用获取id的方式给当前块加上背景颜色
    //当给下一个id添加背景颜色后，清除上一个id背景颜色，依次实现移动
    },300);

注：定时器分为两种：

setInterbal（）：按照设定的时间周期（ms）不停地调用函数。

setTimeout（）：在设定的时间后调用函数。

清除定时器：clearInterval()和clearTimeout()。

二、用键盘的上、下、左、右控制颜色块的移动方向；

1.获取键盘按下的函数。

//键盘上下左右判定
document.onkeydown=function(event) {
    var e = event || window.event || arguments.callee.caller.arguments[0];
    if(e && e.keyCode==40){       //上
        mode=1;
    }
    else if(e && e.keyCode==39){  //右
        mode=2;
    }
    else if(e && e.keyCode==40){  //下
        mode=3;
    }
    else if(e && e.keyCode==37){  //左
        mode=4;
    }
}

2.按下按键，实现相应的动作。

var mode;   //对应上下左右键盘
var i=0;    //id 
var k=0;    //存储上一个块的id
var run=0;  //开始标志
var time;   //定时器

function move(){
    if(mode==3){
        i+=10;
        if(i>100)
        {
            alert("游戏结束！");
            i=0;
            run=0;
            clearInterval(time);
        }
        var part1=document.getElementById(i);
        part1.style.backgroundColor="rgb(85, 173, 122)";
        var part2=document.getElementById(k);
        part2.style.backgroundColor="#ccc";
        k=i;

    }
    //右
    else if(mode==2) {
        i++;
        if((i%10)==0)
        {
            alert("游戏结束！");
            i=0;
            run=0;
            clearInterval(time);
        }
        var part1=document.getElementById(i);
        part1.style.backgroundColor="rgb(85, 173, 122)";
        var part2=document.getElementById(k);
        part2.style.backgroundColor="#ccc";
        k=i;

    }
    //上
    else if(mode==1) {
        i-=10;
        if(i<0)
        {
            alert("游戏结束！");
            i=0;
            run=0;
            clearInterval(time);
        }
        if(i<0)
        {
            alert("游戏结束！");
            i=0;
            run=0;
            clearInterval(time);
        }
        var part1=document.getElementById(i);
        part1.style.backgroundColor="rgb(85, 173, 122)";
        var part2=document.getElementById(k);
        part2.style.backgroundColor="#ccc";
        k=i;

    }
    //左
    else if(mode==4) {
        i--;
        if((i%10)==9)
        {
            alert("游戏结束！");
            i=0;
            run=0;
            clearInterval(time);
        }
        var part1=document.getElementById(i);
        part1.style.backgroundColor="rgb(85, 173, 122)";
        var part2=document.getElementById(k);
        part2.style.backgroundColor="#ccc";
        k=i;

    }
}

实现效果如下：