canvas贪吃蛇

最新推荐文章于 2024-05-23 18:13:33 发布
SongChunMin_
最新推荐文章于 2024-05-23 18:13:33 发布
阅读量481
点赞数
分类专栏：前端文章标签： canvas 贪吃蛇
本文链接：https://blog.csdn.net/songchunmin_/article/details/78157047
版权
前端专栏收录该内容
104 篇文章 0 订阅
订阅专栏
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>