html+jquery实现简单放贪吃蛇小游戏

最新推荐文章于 2023-06-06 18:29:33 发布

if时光重来

最新推荐文章于 2023-06-06 18:29:33 发布

阅读量107

点赞数

分类专栏： html js 文章标签： jquery html css

本文链接：https://blog.csdn.net/admin_web/article/details/120350027

版权

js 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

html

24 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="GB23123">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        .title{
            text-align: center;
        }
        .tips{
            text-align: center;
        }
        .box{
            /* width: 100%; */
            width: 600px;
            height: 500px;
            /* border-bottom: 1px solid #ddd; */
            border: 1px solid #ddd;
            position: relative;
            margin: 100px auto;
        }

        .people{
            position: absolute;
            left: 0;
            bottom: 0;
            height: 100px;
        }
        .people img{
            width: 100px;
            height: 100px;
            border-radius: 50%;
        }
        .eat{
            position: absolute;
            bottom: 100px;
            left: 300px;
            width: 100px;
            height: 100px;
            background: cyan;
        }
        .num{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 32px;
            font-weight: bold;
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="title">防贪吃蛇小游戏（简陋版）</h1>
    <p class="tips">使用↑↓←→操控</p>
    <div class="box">
        <div class="eat"></div>
        <div class="people">
            <img src="head.png" alt="">
            <span class="num">0</span>
        </div>
    </div>
</body>
<script>
    bottom = parseInt($(".people").css('bottom'));
    left = parseInt($(".people").css('left'));
    // console.log(left)
    document.onkeydown = function(e){
        //keyCode: 38：上; 40：下; 左：37; 右39
        switch(e.keyCode){
            case 38:
                // console.log(bottom);
                // if(bottom < 400){
                //     bottom = parseInt(bottom)+20;
                // }
                // $(".people").css('bottom', bottom+'px');
                // console.log($(".people").position().left);
                top_move();
            break;
            case 40:
                // if(bottom <= 0){
                //     bottom = 0;
                // }else{
                //     bottom = parseInt(bottom)-20;
                // }
                // $(".people").css('bottom', bottom+'px');

                bottom_move();
            break;
            case 37:
                // if(left <= 0){
                //     left = 0;
                // }else{
                //     left = parseInt(left)-20;
                // }
                // $(".people").css('left', left+'px');
                left_move();
            break;
            case 39:
                // console.log(left)
                // if(left < 500){
                //     left = parseInt(left) + 20;
                // }
                // $(".people").css('left', left+'px');
                right_move();
            break;
        }
    }
    right_move(left);
    var off_right;
    var off_left;
    var off_top;
    var off_bottom;
    

    // 向左移动
    function left_move(){
        clearInterval(off_right);
        clearInterval(off_top);
        clearInterval(off_bottom);
        left = parseInt($(".people").css('left'));
        bottom = parseInt($(".people").css('bottom'));

        eat_left = parseInt($(".eat").css('left')); 
        eat_bottom = parseInt($(".eat").css('bottom'));

        off_left = setInterval(() => {
            if(left == eat_left && bottom == eat_bottom){
                // alert('通关');
                random();
                // clearInterval(off_left);
                // return false;
            }
            if(left <= 0){
                left = 0;
                // alert('您已阵亡');
                // clearInterval(off_left);
            }else{
                left = parseInt(left)-20;
            }
            $(".people").css('left', left+'px');
        }, 100);
    }
    function right_move(){
        clearInterval(off_top);
        clearInterval(off_left);
        clearInterval(off_bottom);
        left = parseInt($(".people").css('left')); 
        bottom = parseInt($(".people").css('bottom'));

        eat_left = parseInt($(".eat").css('left')); 
        eat_bottom = parseInt($(".eat").css('bottom'));

        off_right = setInterval(() => {
            if(left == eat_left && bottom == eat_bottom){
                // alert('通关');
                random();
                // clearInterval(off_right);
                // return false;
            }

            if(left < 500){
                left = parseInt(left) + 20;
            }else{
                // alert('您已阵亡');
                // clearInterval(off_right);
            }
            $(".people").css('left', left+'px');
        }, 100);
        return left;
    }
    function top_move(){
        clearInterval(off_right);
        clearInterval(off_left);
        clearInterval(off_bottom);
        left = parseInt($(".people").css('left')); 
        bottom = parseInt($(".people").css('bottom'));

        eat_left = parseInt($(".eat").css('left')); 
        eat_bottom = parseInt($(".eat").css('bottom'));

        

        off_top = setInterval(() => {
            if(left == eat_left && bottom == eat_bottom){
                // alert('通关');
                random();
                // clearInterval(off_top);
                // return false;
            }

            if(bottom < 400){
                bottom = parseInt(bottom)+20;
            }else{
                // alert('您已阵亡');
                // clearInterval(off_top);
            }
            $(".people").css('bottom', bottom+'px');
        }, 100);
    }
    function bottom_move(){
        clearInterval(off_top);
        clearInterval(off_left);
        clearInterval(off_right);
        left = parseInt($(".people").css('left')); 
        bottom = parseInt($(".people").css('bottom'));

        eat_left = parseInt($(".eat").css('left')); 
        eat_bottom = parseInt($(".eat").css('bottom'));

        off_bottom = setInterval(() => {
            if(left == eat_left && bottom == eat_bottom){
                // alert('通关');
                random();
                // clearInterval(off_bottom);
                // return false;
            }

            if(bottom <= 0){
                bottom = 0;
                // alert('您已阵亡');
                // clearInterval(off_bottom);
            }else{
                bottom = parseInt(bottom)-20;
            }
            $(".people").css('bottom', bottom+'px');
        }, 100);
    }
    
    // 随机放置方块
    function random(){
        var left_max = 500;
        var left_min = 0;
        var rand_left =  Math.ceil(Math.random() * (left_max - left_min)) + left_min;
        var bottom_max = 400;
        var bottom_min = 0;
        var rand_bottom =  Math.ceil(Math.random() * (bottom_max - bottom_min)) + bottom_min;
        if(rand_left % 20 == 0 && rand_bottom % 20 == 0){
            $(".eat").css('left', rand_left+'px');
            $(".eat").css('bottom', rand_bottom+'px');
            // 数字增加
            var num = parseInt($(".num").html());
            if(num >= 5){
                alert('恭喜您！已通关');
                return false;
            }
            $(".num").html(num+1);
        }else{
            random();
        }
    }
</script>
</html>

if时光重来

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html+jquery实现简单放贪吃蛇小游戏

<!DOCTYPE html><html lang="en"><head> <meta charset="GB23123"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>.
复制链接

扫一扫

专栏目录