jQ制作贪吃蛇（笨b写法）

不知道取啥..
已于 2022-05-28 13:33:27 修改
阅读量410
点赞数 1
分类专栏： jQuery小游戏 JS 文章标签： javascript 前端 html jquery
于 2022-05-27 14:12:08 首次发布
本文链接：https://blog.csdn.net/qq_45578842/article/details/125002163
版权
JS 同时被 2 个专栏收录
10 篇文章 1 订阅
订阅专栏
jQuery小游戏
1 篇文章 0 订阅
订阅专栏
第一个靠自己写的一个小游戏案例，比较粗糙
但功能都挺齐全的
效果图：
话不多说，直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇案例</title>
    <style>
        /*画面居中显示*/
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        .box {
            position: relative;
            width: 900px;
            height: 900px;
            margin: 20px auto;
            border: 1px solid #000;
        }

        .ipt {
            display: flex;
            justify-content: space-between;
            width: 200px;
            height: 40px;
            margin: 10px auto;
        }

        .ipt * {
            height: 40px;
            padding: 10px;
            border: none;
            cursor: pointer;
        }
    </style>
    <!--导入jQ库-->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!--编写主体代码-->
    <script>
        $(function () {
    // 地图的宽高
    var mapW = 900;
    var mapH = 900;
    // 小格子的宽高 相当于蛇头蛇身豆子的宽高
    var gridW = 45;
    var gridH = 45;


    // 有图片的自己可以搞图片上去，因本人没有图片，所以就直接用些圆和小格子代替了
    // 定义地图样式
    var mapObj = {
        width: mapW,
        height: mapH,
        display: 'flex',
        flexWrap: "wrap"
    };

    // 定义地图上小格子样式
    var gridObj = [{
        width: gridW, // 格子的宽高
        height: gridH,
        border: '1px solid #000' // 不喜欢看到小格子线这个样式可以去掉
    }, {
        num: (mapW / gridW) * (mapH / gridH) // 小格子的数量
    }];
    // 移动距离
    var step = gridW;

    // 定义相同样式
    var ys = {
        position: 'absolute',
        width: gridObj[0].width,
        height: gridObj[0].height,
        borderRadius: '50%'
    };

    // 定义蛇头初始化样式
    var snakeHys = {
        backgroundColor: 'red',
        zIndex: '999'
    };
    // 定义蛇身初始化样式
    var snakeBys = {
        backgroundColor: 'yellow'
    };
    // 豆子样式
    var beansYs = {
        backgroundColor: 'green'
    };
    // 定义位置
    var place = [
        {
            left: 2 * ys.width,
            top: 0
        }, {
            left: ys.width,
            top: 0
        }, {
            left: 0,
            top: 0
        }
    ];
    // 定义全局定时器
    var timer = null;
    // 节流
    var flag;
    // 定义蛇头禁止回头 默认向右走 87 68 83 65分别为上下右左
    var forbid = 68;
    // 定义游戏开始或结束
    var game = false;

    // 初始化地图
    map();
    // 初始化蛇
    snake();
    // 初始化豆子(食物)
    beans();


    // 监听开始按钮
    $('.start').on('click', function () {
        if (game) return alert('游戏已经开始');
        // 游戏开始变成true
        game = true;
        // 初始化移动
        // 等待一秒后开始
        setTimeout(function () {
            // 默认向右走
            move(68);
            // 游戏开始后监听键盘按键W/S/A/D
            // 监听键盘按键
            $(document).on('keyup', function (e) {
                if (flag == e.keyCode) {
                    return;
                }
                current = 0;
                flag = e.keyCode;
                move(e.keyCode);
            });
        }, 1000);

    });

    // 监听重置按钮
    $('.reset').on('click', function () {
        // 重置后结束游戏
        gameOve();
        // 重置后初始化地图
        map();
        // 重置后初始化位置
        place = [
            {
                left: 2 * ys.width,
                top: 0
            }, {
                left: ys.width,
                top: 0
            }, {
                left: 0,
                top: 0
            }
        ];
        // 重置后初始化蛇
        snake();
        // 重置后初始化豆子(食物)
        beans();
    });

    // 定义控制暂停/继续控件  0表示暂停 1表示继续
    // 前提条件：必须是游戏开始中才会执行
    var current = 0;


    // 监听暂停/继续按钮
    $('.toggle').on('click', function () {
        if (!game) return alert('请先开始游戏');
        if (current == 0) {
            clearInterval(timer);
            current = 1;
        } else if (current == 1) {
            move(forbid);
            current = 0;
        }
    });


    // 判断游戏结束
    function gameOve() {
        $(document).off();
        // 游戏开始变成false
        game = false;
        flag = '';
        clearInterval(timer);
        return alert('最终蛇的长度为' + place.length);
    }

    // 移动
    function move(key) {
        if (key != 87 && key != 83 && key != 65 && key != 68) return;
        clearInterval(timer);
        timer = setInterval(function () {
            // 判断鼠标按下哪个键
            // W
            if (key == 87) {
                // 如果运动方向和之前方向相反，则继续往之前方向运动
                if (forbid == 83) {
                    snakeBData();
                    place[0].top += step;
                } else {
                    snakeBData();
                    place[0].top -= step;
                    forbid = 87;
                }

            } else if (key == 83) { // s
                if (forbid == 87) {
                    snakeBData();
                    place[0].top -= step;
                } else {
                    snakeBData();
                    place[0].top += step;
                    forbid = 83;
                }
            } else if (key == 65) { // a
                if (forbid == 68) {
                    snakeBData();
                    place[0].left += step;
                } else {
                    snakeBData();
                    place[0].left -= step;
                    forbid = 65;
                }
            } else if (key == 68) { // d
                if (forbid == 65) {
                    snakeBData();
                    place[0].left -= step;
                } else {
                    snakeBData();
                    place[0].left += step;
                    forbid = 68;
                }
            }
            // 判断蛇是否到达边界
            if (place[0].left > mapW - gridW) {
                place[0].left = mapW - gridW;
                return clearInterval(timer);
            } else if (place[0].left < 0) {
                place[0].left = 0;
                return clearInterval(timer);
            } else if (place[0].top > mapW - gridW) {
                place[0].top = mapW - gridW;
                return clearInterval(timer);
            } else if (place[0].top < 0) {
                place[0].top = 0;
                return clearInterval(timer);
            }
            // 判断蛇有没有吃到豆子
            if (place[0].left == $('.beans').position().left && place[0].top == $('.beans').position().top) {
                $('.beans').remove();
                var data = {};
                $('.snake').append($('.snakeB').eq(place.length - 2).clone(true));
                place.push(data);
                beans();
            }
            $('.snakeH').css(place[0]);
            $.each($('.snakeB'), function (i, item) {
                $(item).css(place[i + 1])
            });
            // 判断游戏结束
            for (let i = 1; i < place.length; i++) {
                // 判断蛇头有没有吃到自己的身体
                if (place[0].left == place[i].left && place[0].top == place[i].top) {
                    gameOve();
                    alert('你吃到了自己');
                }
            }
        }, 120);
    }

    // 改变蛇身数值
    function snakeBData() {
        for (let i = place.length - 1; i >= 1; i--) {
            place[i].left = place[i - 1].left;
            place[i].top = place[i - 1].top;
        }
    }

    // 随机数
    function random() {
        return Math.floor(Math.random() * (mapW / gridW));
    }

    // 豆子
    function beans() {
        var x = random();
        var y = random();
        // 创建豆子
        var beans = '<div class="beans"></div>';
        $('.box').append(beans);
        $('.beans').css(beansYs).css(ys).css({
            left: x * gridW,
            top: y * gridW
        })

    }


    // 地图
    function map() {
        // 添加地图
        var mapO = '<ul class="map"></ul><div class="snake"></div>';
        $('.box').html(mapO);
        $('.map').css(mapObj);
        // 添加地图上的小格子
        var grid = '';
        for (let i = 0; i < gridObj[1].num; i++) {
            grid += '<li class="grid"></li>';
        }
        $('.map').html(grid);
        $('.grid').css(gridObj[0]);
    }


    // 蛇
    function snake() {
        // 先清空蛇里面的东西
        $('.snake').empty();
        // 创建蛇头和蛇身
        var snakeH = '<div class="snakeH"></div>';
        $('.snake').append(snakeH);
        $('.snakeH').css(place[0]).css(snakeHys).css(ys);
        for (let i = 0; i < place.length - 1; i++) {
            var snakeB = '<div class="snakeB"></div>';
            $('.snake').append(snakeB);
        }
        $('.snakeB').css(snakeBys).css(ys);
        $.each($('.snakeB'), function (i, item) {
            $(item).css(place[i + 1])
        })
    }

});

    </script>
</head>
<body>
<!--按钮-->
<div class="ipt">
    <button class="start">开始</button>
    <button class="reset">重置</button>
    <button class="toggle">暂停/继续</button>
</div>
<div class="box">
    <!--蛇-->
    <div class="snake">
    </div>
</div>
</body>
</html>