贪吃蛇小游戏 | 易学教程

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .show {
            width: 400px;
            margin: 100px auto 0px;
        }

        .game {
            width: 400px;
            height: 400px;
            background-color: aqua;
            position: relative;
        }

        .userGame {
            width: 10px;
            height: 10px;
            background-color: #000;
            position: absolute;
            top: 0px;
            left: 0px;
        }

        .foot {
            width: 10px;
            height: 10px;
            background-color: red;
            position: absolute;
            top: 0px;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="show">
        <div class="game">
            <div class="foot"></div>
            <div class="userGame" style="background-color: gold; z-index: 99;"></div>
        </div>
        <h1>小蛇长度:
            <span>1</span>
        </h1>
    </div>
</body>

</html>
<script src="./../jquery-3.4.1/jquery_3.4.1.js"></script>
<script>
    $(function () {
        //记录蛇身体小点的位置
        let seatList = [{ "top": 0, "left": 0 }];

        //产生事物小点并记录
        let footSeat = foot(seatList);

        //上次操作的方向
        //初始向右移动
        let direction_before = 39;

        //上次操作的反方向，避免回头操作
        let direction_before_no = 37;

        //游戏结束标识符(id)
        let gameFlag = null;

        gameFlag = window.setInterval(function () {

            //获得小蛇头部的位置x\y坐标
            let seat_x = parseInt($(".userGame").eq(0).css("left"));
            let seat_y = parseInt($(".userGame").eq(0).css("top"));

            //是否回头操作判断

            //判断键盘输入的信息方向键
            switch (direction_before) {
                case 37://上
                    seat_x -= 10;
                    break;
                case 38://右
                    seat_y -= 10;
                    break;
                case 39://下
                    seat_x += 10;
                    break;
                case 40://左
                    seat_y += 10;
                    break;
            }

            //边界移动判断
            if (seat_x < 0)
                seat_x = 390;
            if (seat_x > 390)
                seat_x = 0;
            if (seat_y < 0)
                seat_y = 390;
            if (seat_y > 390)
                seat_y = 0;



            //将小蛇移动后头部信息添加进蛇身体小点集合中(假设吃到事物)
            seatList.unshift({ "top": seat_y, "left": seat_x });

            //判断是否吃到事物
            if (seat_x == footSeat.left & seat_y == footSeat.top) {

                //添加新的小点
                $(".game").append("<div class='userGame'></div>");

                //生成新的食物点
                footSeat = foot(seatList);

                //小蛇长度加1
                $("span").html(parseInt($("span").text()) + 1);
            } else {

                //如果没有吃到事物就删除最后一个小点
                seatList.pop();
            }

            //给小蛇的每个点赋予新的位置信息
            let userGamelength = $(".userGame").length;
            for (let i = 0; i < userGamelength; i++) {
                $(".userGame").eq(i).css({ "top": seatList[i].top + "px", "left": seatList[i].left + "px" });
            }

            //判断是否结束，吃到自己的身体及游戏是否结束
            for (let i = 1; i < userGamelength; i++) {
                if (seat_x == seatList[i].left & seat_y == seatList[i].top) {
                    window.clearInterval(gameFlag);
                    $("h1").html("游戏结束！小蛇长度为:" + $("span").text());
                }
            }

        }, 100);

        //移动键盘事件
        $(document).keydown(function (event) {
            //是否回头操作判断
            if (event.keyCode != direction_before_no) {

                //判断键盘输入的信息方向键
                switch (event.keyCode) {
                    case 37://上
                        direction_before = 37;
                        break;
                    case 38://右
                        direction_before = 38;
                        break;
                    case 39://下
                        direction_before = 39;
                        break;
                    case 40://左
                        direction_before = 40;
                        break;
                }
                //上次操作记录反方向
                switch (event.keyCode) {
                    case 37://上
                        direction_before_no = 39;
                        break;
                    case 38://右
                        direction_before_no = 40;
                        break;
                    case 39://下
                        direction_before_no = 37;
                        break;
                    case 40://左
                        direction_before_no = 38;
                        break;
                }
            }

        });
    });


    //事物生成函数
    function foot(seatList) {
        //事物的位置信息
        let foot_seat_x = -10;
        let foot_seat_y = -10;

        //生成事物，且不能与小蛇身体重合
        let userGamelength = seatList.length;
        for (let i = 0; i < userGamelength; i++) {
            do {
                foot_seat_x = Math.floor(Math.random() * 40) * 10;
                foot_seat_y = Math.floor(Math.random() * 40) * 10;
                if (foot_seat_x == seatList[i].left & foot_seat_y == seatList[i].top) {
                    i = 0;
                } else {
                    break;
                }
            } while (true);
        }

        //事物位置改变
        $(".foot").css({ "top": foot_seat_y + "px", "left": foot_seat_x + "px" });

        //返回事物位置信息
        return { "top": foot_seat_y, "left": foot_seat_x };
    }
</script>
！！！！！需要导入jquery文件使用
来源：https://www.cnblogs.com/-Archenemy-/p/12535572.html
标签
贪吃蛇
top