jQuery实现贪吃蛇简单小游戏

最新推荐文章于 2022-05-29 10:30:00 发布

C1rq99

最新推荐文章于 2022-05-29 10:30:00 发布

阅读量196

点赞数 2

文章标签： JavaScript 贪吃蛇游戏地图创建蛇的移动游戏编程

本文链接：https://blog.csdn.net/c1rq99/article/details/117394386

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../code/jq/jquery-3.3.1.min.js"></script>
</head>
<style>
    .box {
        width: 400px;
        height: 400px;
        border: red solid 3px;
    }

    .miniBox {
        float: left;
        border: white 1px solid;
        font-size: 6px;
        color: white;
    }

    .qiang {
        background: brown;
    }

    .kong {
        background: grey;
    }

    .snake {
        background: greenyellow;
    }
</style>
<body>
<button>开始创建地图</button>
<div class="box">

</div>


    //创建地图
    //1.设置地图的大小
    //2.设置地图的边界


    //创建蛇
    //1.数组存放蛇
    //2.蛇可以移动
    //3.可以控制蛇的移动方向
    //4.蛇可以吃食物，并且变长


    var direction = "r";
    //获取节点
    $(function () {
        $('button').click(function () {
            // 获取地图大小
            var num = prompt('请输入游戏难度') - 0;
            creatMap(num, $('.box'));

            //创建蛇
            var snakeArr = [num + 1, num + 2, num + 3];
            // 画蛇
            snakeH(snakeArr, num);
            run(snakeArr, num);
        })

        // 画蛇
        function snakeH(snakeArr) {
            for (var i = 0; i < snakeArr.length; i++) {
                $('.box').children().eq(snakeArr[i]).removeClass("kong").addClass("snake");
            }
        }

        // 移动蛇
        function run(snakeArr, num) {
            var timer = setInterval(function () {
                //方向
                var nextIndex = 0;
                //计算下一次的位置
                //
                if (direction = "r") {
                    nextIndex = snakeArr[snakeArr.length - 1] + 1;
                } else if (direction = "l") {
                    nextIndex = snakeArr[snakeArr.length - 1] - 1;
                } else if (direction = "t") {
                    nextIndex = snakeArr[snakeArr.length - 1] - num;
                } else if (direction = "b") {
                    nextIndex = snakeArr[snakeArr.length - 1] + num;
                }
                // 判断新位置是不是墙
                if ($('.box').children().eq(nextIndex).hasClass('qiang')) {
                    clearInterval(timer);
                    return alert('撞墙了');
                }

                //删除蛇的样式
                $('.box').children().eq(snakeArr[0]).removeClass('snake').addClass('kong');
                // 画蛇
                $('.box').children().eq(nextIndex).removeClass('kong').addClass('snake');
                //改变蛇的数组
                snakeArr.shift();
                snakeArr.push(nextIndex);
                console.log(snakeArr);


            }, 500)
        }


    })


    //封装一个方法   创建地图


    function creatMap(num, $box) {
        for (var i = 0; i < num * num; i++) {

            // 判断是墙还是移动的区域
            if (i < num || i % num === 0 || (i + 1) % num === 0 || i > (num - 1) * num) {
                $box.append($('<div class="miniBox qiang">' + i + '</div>'))
                continue;
            }

            // 创建小div
            $box.append($('<div class="miniBox kong">' + i + '</div>'))
        }
        $box.children().css({
            width: 400 / num - 2,
            height: 400 / num - 2
        })
    }