Canvas贪吃蛇-CSDN博客

创建画布，验证浏览器兼容性我就省去了，也很简单网上有代码。

 var canctx = document.getElementById("can");
 var ctx =canctx.getContext("2d");

然就是蛇对象

 var snake={
        arrx:[100,110,120],//默认横坐标和长度（数组长度就是蛇的默认长度）
        arry:[200,200,200],//默认纵坐标
        movedirection:2,//上下左右方向（0是左，1是上，2是右，3是下。默认往右）
        behavior:function () {
            ctx.fillStyle="red";
            for(var i=0;i<this.arrx.length;i++) {
                ctx.fillRect(this.arrx[i], this.arry[i], 10, 10);
            }
        }
    }

食物

var food={
        x:10, y:10,
        show:function () {
            //随机在画布中生成食物
           var getx=Math.floor(Math.random()*391),gety=Math.floor(Math.random()*391);
           this.x = getx%10==0?getx:Math.floor(getx/10)*10;
           this.y = gety%10==0?gety:Math.floor(gety/10)*10;
           chack(this.x,this.y);
           ctx.fillStyle="#fff";
           ctx.fillRect(this.x,this.y,10,10);
        }
    }

移动

 //绘制移动的蛇
    function DrawSnake() {
        if(snake.movedirection==2){//往右跑
            if(snake.arrx[snake.arrx.length-1]==canctx.width-10){//最后一个蛇身体(蛇是由一个一个的10*10的正方形构成)的x坐标等于画布宽度减10就说明撞墙了
                died();
            }else{
                snake.arrx.push(snake.arrx[snake.arrx.length - 1] + 10);//x坐标累加10（数组里添加新的坐标,蛇的移动就是添加新的坐标在最后一位删除第一个坐标）
                snake.arry.push(snake.arry[snake.arry.length - 1]);//y坐标不变
            }
        }else if(snake.movedirection==0){//往左跑
            if(snake.arrx[snake.arrx.length-1]==0){
                died();
            }else{
                snake.arrx.push(snake.arrx[snake.arrx.length - 1] - 10);
                snake.arry.push(snake.arry[snake.arry.length - 1]);
            }
        }else if(snake.movedirection==1){//往上跑
            if(snake.arry[snake.arry.length-1]==0){
                died();
            }else{
                snake.arrx.push(snake.arrx[snake.arrx.length - 1]);
                snake.arry.push(snake.arry[snake.arry.length - 1] - 10);
            }
        }else {//往下跑
            if(snake.arry[snake.arry.length - 1] == canctx.height-10) {
                died();
            } else {
                snake.arrx.push(snake.arrx[snake.arrx.length - 1]);
                snake.arry.push(snake.arry[snake.arry.length - 1] + 10);
            }
        }
        EatFood();
        ctx.fillStyle="red";
        for(var i=0;i<snake.arrx.length;i++) {
            ctx.fillRect(snake.arrx[i], snake.arry[i], 10, 10);
        }
        EatSelf(snake.arrx[snake.arrx.length - 1],snake.arry[snake.arry.length - 1]);
        ctx.clearRect(snake.arrx[0],snake.arry[0],10,10);
        snake.arrx.splice(0,1);
        snake.arry.splice(0,1);
    }

控制方向

 //控制方向
    function Controldirection(e) {
       switch(e.keyCode){
           case 37://左
               snake.movedirection=0;
               DrawSnake();
               break;
           case 39://右
               snake.movedirection=2;
               DrawSnake();
               break;
           case 38://上
               snake.movedirection=1;
               DrawSnake();
               break;
           case 40://下
               snake.movedirection=3;
               DrawSnake();
               break;
       }
    }

吃到食物

//吃到食物
    function EatFood() {
        if(snake.movedirection==0||snake.movedirection==1){//向左或向上时
            //蛇头(坐标最后一个值)的x、y坐标和食物的x、y坐标相等
            //蛇移动的方向不同，判断条件也不同（自己可以在纸上先画出蛇在不同方向与食物接触的时候的x、y坐标的对应关系是怎么样的来确认判断条件）
            if(snake.arrx[snake.arrx.length-1]==food.x&&snake.arry[snake.arry.length-1]==food.y){
                if(snake.movedirection==0) {//吃到食物后添加数组的长度
                    snake.arrx.unshift(snake.arrx[0]+10);
                    snake.arry.unshift(snake.arry[0]);
                    food.show();
                }else{
                    snake.arrx.unshift(snake.arrx[0]);
                    snake.arry.unshift(snake.arry[0] + 10);
                    food.show();
                }
            }
        }else{//向右或向下时
            if(snake.arrx[snake.arrx.length-1]==food.x&&snake.arry[snake.arry.length-1]==food.y){
                if(snake.movedirection==1) {
                    snake.arrx.unshift(snake.arrx[0] - 10);
                    snake.arry.unshift(snake.arry[0]);
                    food.show();
                }else{
                    snake.arrx.unshift(snake.arrx[0]);
                    snake.arry.unshift(snake.arry[0]-10);
                    food.show();
                }
            }
        }
    }

吃到自己

//吃到自己
    function EatSelf(x,y) {
        for(var i=0;i<snake.arrx.length-1;i++) {
            if(snake.movedirection==0) {//向左
                //条件和吃到食物类似就是判断舌头的坐标和身体的左边，同理不同方向移动时条件也是不一样的
                if (snake.arry[i] == y && x-snake.arrx[i] == 10) {
                    died();
                }
            }else if(snake.movedirection==1){//向上
                if (snake.arrx[i] == x && y-snake.arry[i] == 10) {
                    died();
                }
            }else if(snake.movedirection==2){//向右
                if (snake.arry[i] == y && snake.arrx[i]-x == 10) {
                    died();
                }
            }else{//向下
                if (snake.arrx[i] == x && snake.arry[i]-y == 10) {
                    died();
                }
            }
        }
    }

//停止计时器事件和移除方向事件
    function died() {
        alert("你挂了！");
        clearInterval(snakemove);
        document.removeEventListener("keydown", Controldirection);
        return;
    }

 document.addEventListener("keydown", Controldirection);
    food.show();
    snake.behavior();
    var snakemove =setInterval(function () {
        DrawSnake();
    },300);

基本功能大概就是这样。可能还不算完美，后面有时间继续优化一下！

转载于:https://www.cnblogs.com/leitong/p/7493499.html