贪吃蛇 html css js 实现

最新推荐文章于 2022-08-05 20:43:02 发布

Lazy_G

最新推荐文章于 2022-08-05 20:43:02 发布

阅读量185

点赞数

分类专栏：笔记文章标签： javascript css html

本文链接：https://blog.csdn.net/Lazy_G/article/details/116207202

版权

笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

贪吃蛇 html css js 实现

学js时写的
界面没有优化而且是粗糙实现还有一些bug 感兴趣可以看看,若是优化了可要评论告诉我一下哟,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贪吃蛇-完成</title>
    <script src="js/jquery-3.6.0.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .score {
            margin:0 auto;
            height: 40px;
            text-align:center;
            line-height:40px;
            color: #ec6565;
        }

        .w {
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin-top: 10px;
            width: 800px;
            height: 600px;
            border:2px solid #484848;
            background-color: pink;
        }

        .w div {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: #d6d6d6;
        }

        .w .t {
            background-color: #888888;
        }

        .w div:last-child {
            background-color: #cf5353;
        }
    </style>

</head>
<body>
<div class="score">0</div>
<div class="w">
    <div class="t" style="left:30px"></div>
    <div style="left:20px"></div>
    <div style="left:10px"></div>
    <div></div>

</div>
<script>
    var s = document.querySelector('.score');
    var w = document.querySelector('.w');
    var all = w.querySelectorAll('div');
    var count = 39;
    var ml = null;
    var md = null;
    var mr = null;
    var mu = null;
    var arr = new Array();

    //初始食物
    food();
    var last = w.querySelectorAll('div')[all.length];


    function moveLeft(objs) {
        count = 39;
        ml = setInterval(() => {
            for (var j = 0; j < objs.length - 1; j++) {
                arr[j] = {l: objs[j].offsetLeft, t: objs[j].offsetTop}
            }

            for (var i = 0; i < objs.length; i++) {
                if (i == 0) {
                    if (objs[0].offsetLeft == 790) {
                        // objs[0].style.left = '0px';
                        over();
                    }
                    judge(objs[0].offsetLeft+10, objs[0].offsetTop);
                    objs[0].style.left = (objs[0].offsetLeft + 10) + 'px';
                } else {
                    objs[i].style.left = arr[i - 1].l + 'px';
                    objs[i].style.top = arr[i - 1].t + 'px';
                }
            }
        }, 50)
    }

    function moveDown(objs) {
        count = 40;
        md = setInterval(() => {
            for (var j = 0; j < objs.length - 1; j++) {
                arr[j] = {l: objs[j].offsetLeft, t: objs[j].offsetTop}
            }

            for (var i = 0; i < objs.length; i++) {
                if (i == 0) {
                    if (objs[0].offsetTop == 590) {
                        // objs[0].style.top = '0px';
                        over();
                    }
                    judge(objs[0].offsetLeft, objs[0].offsetTop+10);
                    objs[0].style.top = (objs[0].offsetTop + 10) + 'px';
                } else {
                    console.log(i);
                    objs[i].style.left = arr[i - 1].l + 'px';
                    objs[i].style.top = arr[i - 1].t + 'px';
                }
            }

        }, 50)
    }

    function moveRight(objs) {
        count = 37;
        mr = setInterval(() => {
            for (var j = 0; j < objs.length - 1; j++) {
                arr[j] = {l: objs[j].offsetLeft, t: objs[j].offsetTop}
            }

            for (var i = 0; i < objs.length; i++) {
                if (i == 0) {
                    if (objs[0].offsetLeft == 0) {
                        // objs[0].style.left = '790px';
                        over();
                    }
                    judge(objs[0].offsetLeft-10, objs[0].offsetTop);
                    objs[0].style.left = (objs[0].offsetLeft - 10) + 'px';
                } else {
                    objs[i].style.left = arr[i - 1].l + 'px';
                    objs[i].style.top = arr[i - 1].t + 'px';
                }
            }
        }, 50)
    }

    function moveUp(objs) {
        count = 38;
        mu = setInterval(() => {
            for (var j = 0; j < objs.length - 1; j++) {
                arr[j] = {l: objs[j].offsetLeft, t: objs[j].offsetTop}
            }

            for (var i = 0; i < objs.length; i++) {
                if (i == 0) {
                    if (objs[0].offsetTop == 0) {
                        // objs[0].style.top = '590px';
                        over();
                    }
                    judge(objs[0].offsetLeft, objs[0].offsetTop-10);
                    objs[0].style.top = (objs[0].offsetTop - 10) + 'px';
                } else {
                    objs[i].style.left = arr[i - 1].l + 'px';
                    objs[i].style.top = arr[i - 1].t + 'px';
                }
            }

        }, 50)
    }


    // move(all);

    //清除定时器
    function clear() {
        switch (count) {
            case 37 :
                clearInterval(mr);
                break;
            case 38 :
                clearInterval(mu);
                break;
            case 39 :
                clearInterval(ml);
                break;
            case 40 :
                clearInterval(md);
        }
    }

    //键盘监听
    window.onkeydown = (e) => {
            console.log(11111);
        if(Math.abs(e-count)==2){
            return;
        }
        
        clear();
        switch (e.keyCode) {
            case 37 :
                moveRight(all);
                break;
            case 38 :
                moveUp(all);
                break;
            case 39 :
                moveLeft(all);
                break;
            case 40 :
                moveDown(all);
        }
    }

    //生成食物
    function food() {
        var d = document.createElement('DIV');
        w.appendChild(d);
        d.style.left = Math.floor(Math.random() * 79) * 10 + 'px';
        d.style.top = Math.floor(Math.random() * 59) * 10 + 'px';
    }

    function judge(le, to) {
        var l = last.offsetLeft;
        var t = last.offsetTop;
        console.log(l, t);
        // console.log(le,to);

        //撞自身死亡判断
        for (var i = 3; i < all.length; i++) {
            if (le == all[i].offsetLeft && to == all[i].offsetTop) {
                over();
            }
        }

        //吃食物判断
        if (l == le && t == to) {
            all = w.querySelectorAll('div');
            w = document.querySelector('.w');
            food();
            last = w.querySelectorAll('div')[all.length];
            console.log(food);
            s.innerHTML=`${all.length-4}`;
        }
    }

    //游戏结束提示
    function over() {
        clear();
        alert('游戏结束，得分：'+s.innerHTML);
    }

</script>
</body>
</html>

Lazy_G

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
贪吃蛇 html css js 实现

贪吃蛇 html css js 实现学js时写的界面没有优化而且是粗糙实现还有一些bug 感兴趣可以看看,若是优化了可要评论告诉我一下哟,<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>贪吃蛇-完成</title> <script src="js/jquery-3.6.0.js"></scrip
复制链接

扫一扫