简易版贪吃蛇

最新推荐文章于 2020-07-06 15:14:35 发布
心晴623
最新推荐文章于 2020-07-06 15:14:35 发布
阅读量291
点赞数 1
分类专栏： Javascript
本文链接：https://blog.csdn.net/xinqing623/article/details/86645242
版权
Javascript 专栏收录该内容
1 篇文章 0 订阅
订阅专栏
上源码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    table{
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    table td{
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        width: 10px;
        height: 10px;
    }
    .red{
        background: #ff0000;
    }
    .food{
        background: chartreuse;
    }
</style>
<script
        src="https://code.jquery.com/jquery-3.3.1.min.js"
        integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
        crossorigin="anonymous"></script>
<script>

    $(function(){
        initBounds();
        initSnake();
        initFood();
        autoMove();
    })

    /**
     * 监听键盘的上下左右事件
     * @param event
     */
    document.onkeydown=function(event){
        let e = event || window.event || arguments.callee.caller.arguments[0];
        if(e && e.keyCode==38 && dire != DOWN){
            dire = UP;
        }
        if(e && e.keyCode==37 && dire != RIGHT){
            dire = LEFT;
        }
        if(e && e.keyCode==40 && dire != UP){
            dire = DOWN;
        }
        if(e && e.keyCode==39 && dire != LEFT){
           dire = RIGHT;
        }
    };

    let square = 20;   //图的格数
    let initLen = 3;   //蛇的初始长度
    let speed = 500;   //每隔多少毫秒移动一次

    let snakeCss = "red";
    let foodCss = "food";

    let LEFT = 0;
    let RIGHT = 1;
    let UP = 2;
    let DOWN = 3;

    let directions = [LEFT, RIGHT, UP, DOWN];
    let snakeSquares = [];
    let dire;    //移动方向

    let foodSquare;


    function isEat(first){
        if(dire == LEFT && first[0] == foodSquare[0] && first[1] - 1 == foodSquare[1]){
            return true;
        }
        if(dire == RIGHT && first[0] == foodSquare[0] && first[1] + 1 == foodSquare[1]){
            return true;
        }
        if(dire == UP && first[0] -1 == foodSquare[0] && first[1] == foodSquare[1]){
            return true;
        }
        if(dire == DOWN && first[0] + 1 == foodSquare[0] && first[1] == foodSquare[1]){
            return true;
        }
        return false;
    }

    function initBounds(){
        let txt = "<table border='0' cellpadding='0' cellspacing='0'>";
        for(let i=0; i< square; i++){
            txt += "<tr>";
            for(let j=0; j < square; j++){
                txt += "<td id='block_" + i + "_" + j +"'></td>";
            }
            txt += "</tr>";
        }
        $("#panContent").html(txt);
    }

    function initSnake(){
        let x = parseInt(Math.random() * square);
        let y = parseInt(Math.random() * square);
        dire = randomDirection();
        if(dire == LEFT){
            if(y + initLen >= square){
                initSnake();
            }else{
                for(let i = 0; i<initLen; i++){
                    snakeSquares.push([x, y + i]);
                }
            }
        }else if(dire == RIGHT){
            if(y - initLen < 0){
                initSnake();
            }else{
                for(let i = 0; i<initLen; i++){
                    snakeSquares.push([x, y - i]);
                }
            }
        }else if(dire == UP){
            if(x + initLen >= square){
                initSnake();
            }else{
                for(let i = 0; i<initLen; i++){
                    snakeSquares.push([x + i, y]);
                }
            }
        }else if(dire == DOWN){
            if(x - initLen < 0){
                initSnake();
            }else{
                for(let i = 0; i<initLen; i++){
                    snakeSquares.push([x - i, y]);
                }
            }
        }
        drawSnake();
    }

    function drawSnake(){
        for(let i = 0; i< initLen; i++){
            let blockId = getBlockId(snakeSquares[i][0], snakeSquares[i][1]);
            $(blockId).addClass(snakeCss);
        }
    }

    function move(){
        let first = snakeSquares[0];
        if(isEat(first)){
            snakeSquares.unshift(foodSquare);
            removeFoodAndReDrawFood();
        }else {
            changeDirection(first);
            if (dire == LEFT) {
                snakeSquares.unshift([first[0], first[1] - 1]);
            } else if (dire == RIGHT) {
                snakeSquares.unshift([first[0], first[1] + 1]);
            } else if (dire == UP) {
                snakeSquares.unshift([first[0] - 1, first[1]]);
            } else if (dire == DOWN) {
                snakeSquares.unshift([first[0] + 1, first[1]]);
            }
            let last = snakeSquares.pop();
            let lastBlockId = getBlockId(last[0], last[1]);
            $(lastBlockId).removeClass(snakeCss);
        }
        drawSnake();
    }

    function removeFoodAndReDrawFood(){
        let foodBlockId = getBlockId(foodSquare[0], foodSquare[1]);
        $(foodBlockId).removeClass(foodCss);
        initFood();
    }

    function changeDirection(firstBlockPosition){
        if(dire == LEFT && firstBlockPosition[1] == 0){
            dire = DOWN;
        }else if(dire == DOWN && firstBlockPosition[0] == square - 1){
            dire = RIGHT;
        }else if(dire == RIGHT && firstBlockPosition[1] == square -1){
            dire = UP;
        }else if(dire == UP && firstBlockPosition[0] == 0){
            dire = LEFT;
        }
    }

    function autoMove(){
        setInterval("move()", speed);
    }

    function isInSnake(blockId){
        if($(blockId).hasClass(snakeCss)){
            return true;
        }
        return false;
    }

    function initFood(){
        let x = parseInt(Math.random() * square);
        let y = parseInt(Math.random() * square);
        let blockId = getBlockId(x, y);
        if(isInSnake(blockId)){
            initFood();
        }else {
            foodSquare = [x, y];
            $(blockId).addClass(foodCss);
        }
    }

    function randomDirection(){
        let i = parseInt(Math.random() * directions.length);
        return directions[i];
    }

    function getBlockId(x, y){
        return "#block_" + x + "_" + y;
    }

</script>
<body>
<div id="panContent"></div>
</body>
</html>