canvas贪吃蛇

来源：互联网发布：监理工程师软件app 编辑：程序博客网时间：2024/06/07 09:35
canvas贪吃蛇

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        body{            text-align: center;        }        #canvas{            box-shadow: 0 5px 40px black;        }    </style></head><body>    <canvas id="canvas" width="800" height="500"></canvas></body><!--<script src="snake.js"></script>--><script>    var canvas = document.getElementById("canvas");    var context = canvas.getContext("2d"); //获取画板    var snake = {        head:null,      //蛇头        snakeArray:null ,//整蛇数组、包括蛇头        direction:"right"//蛇的运动方向，后期根据键盘来定    };    initSnake() ;//初始化    drawSnake() ;//绘制到页面上    var foot = randomCreateFoot(); //得到食物    draw(foot);    //让蛇动起来    var t = setInterval(function () {        context.clearRect(0,0,canvas.width,canvas.height);        moveSnake() ;//移动蛇        drawSnake() ;//绘制到页面上        draw(foot) ;    },500);    //蛇移动    function moveSnake() {        /* 蛇移动原理：         *  (1)创建一段，放到蛇头的位置。         *  (2)将蛇头的位置，往前推进20px，到底往哪个方向推进，就需要根据当前按键盘的方向了。         *  (3)如果吃到了食物，就不删除最后一节，否则删除删除最后一节         */        var snakeArray = snake.snakeArray;        var modiy = createSectionObj(snake.head.x,snake.head.y,20,20,"gray");        snakeArray.splice(1,0,modiy);        //修改蛇头        switch (snake.direction){            case "up" :{                snake.head.y = snake.head.y - 20;                break;            }            case "down" :{                snake.head.y = snake.head.y + 20;                break;            }            case "left" :{                snake.head.x = snake.head.x - 20;                break;            }            case "right" :{                snake.head.x = snake.head.x + 20;                break;            }        }        if(isEat()){            foot = randomCreateFoot();        }else {            snakeArray.pop();        }        if(isGameOver()){            clearInterval(t);            // setTimeout(function () {            //     context.clearRect(0,0,canvas.width,canvas.height);            // },500);            alert("game Over :"+snakeArray.length);        }    }    //随机出现食物    function randomCreateFoot() {        /*         * 蛇的一块一块是宽度和高度是20，所以我们将canvas的宽度和高度分成多块，         * 食物随机出现在某一块上         *         * 既然是随机出现食物，有可能出现的位置刚好是在蛇身上。         * 所以，如果出现在蛇身上，需要重新生成         *         * */        var widthRange = canvas.width / 20 - 1;        var heightRange = canvas.height / 20 - 1;        var x = Math.round(Math.random() * widthRange) * 20;        var y = Math.round(Math.random() * heightRange) * 20;        return createSectionObj(x,y,20,20,"yellow");    }    //初始化 -默认蛇的长度是4    function initSnake() {        var snakeArray = []; //数组的第一个作为蛇头        for(var i = 0;i < 4;i++){            var sectionObj = createSectionObj(20*i,0,20,20,"gray");            snakeArray.unshift(sectionObj);        }        //蛇头的颜色是红色的        var head = snakeArray[0];        head.color = "red";        //将两个后面常用的东西定为属性，方便后面调用        snake.head=  head;        snake.snakeArray = snakeArray;    }    //创建一节蛇对象    function createSectionObj(x,y,w,h,color) {        return {            x:x,            y:y,            w:w,            h:h,            color:color        }    }    //判断是否吃到食物    function isEat() {        if(foot.x == snake.head.x && foot.y == snake.head.y){            return true;        }else {            return false;        }    }    //绘制蛇    function drawSnake() {        var snakeArray = snake.snakeArray;        for(var i = 0;i< snakeArray.length;i++){            var section = snakeArray[i];            draw(section)        }    }    //绘制一节蛇    function draw(section) {        context.beginPath();        context.fillStyle = section.color;        context.rect(section.x,section.y,section.w,section.h);        context.fill();        context.stroke();    }    //判断游戏是否结束    function isGameOver() {        /*         *  (1)头碰到墙壁         *  (2)头碰到自己         * */        var canvasWidth = canvas.width;        var canvasHeigh = canvas.height;        var head = snake.head;        if(head.x < 0 || head.y < 0 || head.x > canvasWidth || head.y > canvasHeigh ){            return true;        }        for (var i = 1;i<snake.snakeArray.length;i++){            var section = snake.snakeArray[i];            if(section.x == head.x && section.y == head.y){                return true;            }        }        return false;    }    //根据键盘事件，判断蛇头的方向    document.addEventListener("keydown",function (e) {        var keycode = e.keyCode;        /* 40:下,         * 38:上,         * 37:左,         * 39:右；         */        //注意：如果原来蛇头是往右，不能直接向左，不能直接掉头        if(keycode == 40 && snake.direction != "up"){            snake.direction = "down";        }else if(keycode == 38 && snake.direction !="down"){            snake.direction = "up";        }else if(keycode == 39 && snake.direction !="left"){            snake.direction = "right";        }else if(keycode == 37 && snake.direction !="right"){            snake.direction = "left";        }        e.preventDefault();    });</script></html>
阅读全文
0 0