jq贪吃蛇案例-CSDN博客

本文链接：https://blog.csdn.net/zhao_guang_liang/article/details/104834959
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>贪吃蛇</title>
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #main,
        #box {
            width: 500px;
            height: 500px;
            border: 5px solid rgb(82, 46, 0);
            position: fixed;
            top: 10px;
            left: 50%;
            margin-left: -251px;
        }

        #main div {
            width: 18px;
            height: 18px;
            float: left;
            border: 1px solid #ffffff;
            border-radius: 50%;
        }

        #box div {
            width: 20px;
            height: 20px;
            position: absolute;
        }

        #jifenban {
            position: fixed;
            top: 530px;
            left: 50%;
            width: 400px;
            margin-left: -200px;
            border-radius: 20px;
            border: 1px solid #ccc;
            background-color: #efefef;
            color: #666;
        }

        #jifenban h2,
        #jifenban h3 {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <div id="box">
        <div style="color:#fff;text-align: center;line-height: 20px;">头</div>
    </div>
    <div id="jifenban">
        <h2>计分板</h2>
        <h3>0</h3>
    </div>
    <script>
        var main_html = ''
        for (var i = 0; i < (25 * 25); i++) {
            main_html += '<div></div>'
        }
        $('#main').html(main_html)
        var randx = 0
        var randy = 0
        var cnum = 0
        var sjsk_n = 0
        var colors = ['#CC9999', '#8BBA00', '#FF8E46', '#90CECE', '#DB5D5D', '#AFD8F8', '#FDC689', '#6DCFF6', '#C0B73F', '#CC99FF'];
        function sj() {//随机数
            //x上限，y下限     
            var x = 24;
            var y = 0;
            var z = 9;
            var a = 624
            randx = parseInt(Math.random() * (x - y + 1) + y);
            randy = parseInt(Math.random() * (x - y + 1) + y);
            cnum = parseInt(Math.random() * (z - y + 1) + y);
            sjsk_n = parseInt(Math.random() * (a - y + 1) + y);
        }
        function jiequ(x) { //截取px
            return Number(x.slice(0, -2))
        }
        function sjsk() {//随机生成食用块
            sj()
            $('#main div').eq(sjsk_n).css('background', colors[cnum])
        }
        function creatBody(top, left) {
            if (($('#box div').eq(0).offset().left == $('#main div').eq(sjsk_n).offset().left) && ($('#box div').eq(0).offset().top == $('#main div').eq(sjsk_n).offset().top)) {
                $('#main div').eq(sjsk_n).css('background', '#fff')
                $("#box").append($("<div style='top:" + top + ";left:" + left + ";background:" + colors[cnum] + ";'></div>"));
                sjsk()
                $('#jifenban h3').html(Number($('#jifenban h3').html()) + 20)
            }
        }
        function gameover() {
            alert('游戏结束，总分数:(' + $('#jifenban h3').html() + '分)')
            $('#jifenban h3').html('0')
            $('#box div').eq(0).siblings().remove()
        }
        function yidong() {
            for (var i = $('#box div').length - 1; i > 0; i--) {
                $('#box div').eq(i).css({ top: $('#box div').eq(i - 1).css('top'), left: $('#box div').eq(i - 1).css('left') })
            }
        }
        sj()
        $('#box div').eq(0).css({ top: (randx * 20) + 'px', left: (randy * 20) + 'px', background: colors[cnum] })
        sjsk()
        var timer
        var bu = 200
        $(document).keyup(function (event) {
            clearInterval(timer)
            if (event.keyCode == 38) { //上
                timer = setInterval(function () {
                    if (jiequ($('#box div').eq(0).css('top')) == 0) {
                        clearInterval(timer)
                        gameover()
                        return
                    }
                    var top = $('#box div').eq($('#box div').length - 1).css('top')
                    var left = $('#box div').eq($('#box div').length - 1).css('left')
                    yidong()
                    $('#box div').eq(0).css('top', jiequ($('#box div').eq(0).css('top')) - 20 + 'px')
                    creatBody(top, left)
                }, bu)
            } else if (event.keyCode == 40) { //下
                timer = setInterval(function () {
                    if (jiequ($('#box div').eq(0).css('top')) == 480) {
                        clearInterval(timer)
                        gameover()
                        return
                    }
                    var top = $('#box div').eq($('#box div').length - 1).css('top')
                    var left = $('#box div').eq($('#box div').length - 1).css('left')
                    yidong()
                    $('#box div').eq(0).css('top', jiequ($('#box div').eq(0).css('top')) + 20 + 'px')

                    creatBody(top, left)
                }, bu)
            } else if (event.keyCode == 37) { //左
                timer = setInterval(function () {
                    if (jiequ($('#box div').eq(0).css('left')) == 0) {
                        clearInterval(timer)
                        gameover()
                        return
                    }
                    var top = $('#box div').eq($('#box div').length - 1).css('top')
                    var left = $('#box div').eq($('#box div').length - 1).css('left')
                    yidong()
                    $('#box div').eq(0).css('left', jiequ($('#box div').eq(0).css('left')) - 20 + 'px')
                    creatBody(top, left)
                }, bu)
            } else if (event.keyCode == 39) { //右
                timer = setInterval(function () {
                    if (jiequ($('#box div').eq(0).css('left')) == 480) {
                        clearInterval(timer)
                        gameover()
                        return
                    }
                    var top = $('#box div').eq($('#box div').length - 1).css('top')
                    var left = $('#box div').eq($('#box div').length - 1).css('left')
                    yidong()
                    $('#box div').eq(0).css('left', jiequ($('#box div').eq(0).css('left')) + 20 + 'px')
                    creatBody(top, left)
                }, bu)
            }
        })

    </script>
</body>

</html>