打地鼠游戏

最新推荐文章于 2024-06-18 00:36:23 发布

bingot

最新推荐文章于 2024-06-18 00:36:23 发布

阅读量1.5k

点赞数 1

分类专栏： webapp 文章标签：打地鼠游戏

本文链接：https://blog.csdn.net/bingot/article/details/86136531

版权

webapp 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

无聊就想整个打地鼠的游戏，不多说直接撸代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="robots" content="index,follow" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=contain" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="full-screen" content="yes" />
    <meta name="x5-fullscreen" content="true" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="telephone=no, email=no" name="format-detection" />
    <title>打地鼠</title>
    <style>
        html,
        body {
            width: 100%;
            height: 70%;
        }

        body {
            cursor: url(images/chuizi.png), default;
            background: url('images/bg.jpg') no-repeat;
            background-size: 100% 100%;
        }

        table {
            overflow: hidden;
            margin-left: .5rem;
        }

        td {
            width: 2.8rem;
            height: 2.666667rem;
            background: url('images/00.png') no-repeat;
            background-size: 100% 50%;
            background-position: center bottom;
            z-index: 1;
            position: relative;
            overflow: hidden;
        }

        img {
            width: 1.333333rem;
            height: 1.333333rem;
            margin-top: .933333rem;
            margin-left: .666667rem;
            margin-right: .666667rem;
            z-index: -1;
        }

        .imgUp {
            z-index: -1;
            animation: donghua .5s infinite;
            animation-iteration-count: 1;
        }

        .cryRat {
            height: 1.066667rem;
            margin-top: .933333rem;
        }

        .hole {
            width: 100%;
            height: .666667rem;
            position: absolute;
            bottom: 0;
            background: url('images/dong.png') no-repeat;
            background-size: 100% 100%;
            z-index: 22;
        }

        @keyframes donghua {
            0% {
                transform: translate(0, .133333rem);
            }

            100% {
                transform: translate(0, -0.133333rem);
            }
        }
    </style>
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/flexible.js"></script>
</head>

<body>
    <div class="title">
        <div class="score">
            <span>分数：</span>
            <span class="scoreNum"></span>
        </div>
        <div>
            <span>剩余时间：</span>
            <span class="time"></span>
        </div>
    </div>
    <button>开始游戏</button>
    <table>
        <tr>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
        </tr>
        <tr>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
        </tr>
        <tr>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
            <td>
                <img src="" alt="">
                <div class="hole"></div>
            </td>
        </tr>
    </table>
</body>
<script>
    var imgRandow, $img, interval, isClick = true,
        countdown = 60,
        endTime, num = 0;
    var arr = [60, 45, 30, 15]
    $('.time').text(countdown)
    $('.scoreNum').text(num)
    $('button').click(function () {
        num = 0;
        countdown = 60,
            hitRat()
        time()
        endTime = setInterval(() => {
            setTime()
        }, 1000);

    })

    function setTime() {
        if (countdown <= 0) {
            window.clearInterval(endTime)
            window.clearInterval(interval)
            alert('您的得分为：' + num)
            return;
        } else {
            countdown--
            $('.time').text(countdown)
            $('.scoreNum').text(num)
        }
    }

    function random() {
        imgRandow = Math.floor(Math.random() * 9)
        $img = $('img')[imgRandow]
        return $img;
    }

    function time(speed = 1000) {
        interval = setInterval(() => {
            $('img').attr('src', '').removeClass('imgUp').removeClass('cryRat')
            $(random()).attr('src', 'images/01.png').addClass('imgUp')
            isClick = true;
        }, speed);

    }

    function hitRat() {
        $('img').click(function () {
            if (!isClick) return;
            isClick = false;
            num++
            $(this).attr('src', 'images/02.png').removeClass('imgUp').addClass('cryRat')
            clearInterval(interval)
            if(countdown <= 45 && countdown > 30 ) {
                time(800)
            }else if(countdown <= 30 && countdown > 15){
                time(600)
            }else if(countdown <= 15) {
                time(500)
            }else {
                time()
            }
            //time()
            console.log($(this).attr('src'))
        })
    }
</script>

</html>

项目结构：在这里插入图片描述