javascript实现贪吃蛇小游戏思路

javascript小游戏贪吃蛇实现思路讲解(完整代码实现)，供大家参考，具体内容如下

效果流程

1、首先我们要操作的canvas

2、在初始化

canvas.width = 500; //定义canvas宽度
canvas.height = 500; //定义canvas高度
canvas.style.border = "5px solid #000"; //定义canvas边框
var times = 100; //默认时间200毫秒
var long = 10; //蛇身相对于步长的个数
var x = y =8;  //蛇的初始坐标
var direction = 3;  // 1 上  2 右  3 下 0  左
var size = 8;  //蛇每次移动的长度（步长）
var map  = []; //用来记录蛇每次移动的坐标 
var foodx = 0;  //食物的初始X轴坐标
var foody = 0;  //食物的初始y轴坐标
var onOff = true; 
var foodT = true;
var timer = null;

3、根据方向控制蛇的坐标变化，判断蛇的坐标是否超出canvas边界，判断蛇有没有碰到自己

 //根据方向控制蛇的坐标变化
    switch(direction){
 
        case 1: y = y - size; break; //上
        case 2: x = x + size; break; //右
        case 3: y = y + size; break; //下
        case 0: x = x - size; break; //左
    }
 
    //判断蛇的坐标是否超出canvas边界，超出则出现碰壁提示，游戏结束
    if(x>500 || x<0 || y>500 || y<0){
 
//      alert("你碰壁挂了！继续努力吧……");
        window.location.reload();   
    }
 
    //判断蛇有没有碰到自己，碰到自己游戏结束 
    for(var i=0; i 
 

4、然后绘制蛇

//绘制蛇
    if(map.length>long){ 
        var cl = map.shift();
        context.clearRect(cl['x'],cl['y'],size,size);
    }
    map.push({'x':x,'y':y}); 
    context.fillStyle = "#777"; //填充蛇的颜色
    context.fillRect(x,y,size,size); //绘制蛇

5、判断食物坐标等于蛇的坐标时（蛇吃掉食物）

//判断食物坐标等于蛇的坐标时（蛇吃掉食物）
    if(foodx*8 == x && foody*8 == y ){
        food(); //再次绘制食物
        long++; //蛇的长度增加
        times = times - 10; //速度加快
        clearInterval(timer);
        onOff = true;
        setTimeout(goto,times); //开始新的一轮
    }

6、确定食物随机显示坐标，绘制食物

//确定食物随机显示坐标，绘制食物
function food(){
    foodx = Math.ceil(Math.random()*40); //食物的X轴随机坐标
    foody = Math.ceil(Math.random()*40); //食物的Y轴随机坐标    
    context.fillStyle = "mediumvioletred"; //食物的填充颜色 
    context.fillRect(foodx*8,foody*8,8,8); //绘制食物
 
}

7、监听按下方向键，获得蛇前进的方向

//监听按下方向键，获得蛇前进的方向
document.onkeydown = function(ev){
    var ev = ev || event;
    var cod = ev.keyCode - 37;
 
    switch(cod){
        case 1: direction = 1; break; //向上
        case 2: direction = 2; break; //向右
        case 3: direction = 3; break; //向下
        case 0: direction = 0; break; //向左
    }   
}

完整代码实现

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。