js实现打地鼠+雷霆战机（面向对象编程）

最新推荐文章于 2023-05-19 11:53:57 发布

睡觉睡觉神精病

最新推荐文章于 2023-05-19 11:53:57 发布

阅读量197

点赞数

分类专栏： js面向对象编程文章标签： javascript Powered by 金山文档

本文链接：https://blog.csdn.net/m0_62026062/article/details/128819118

版权

本文介绍了如何使用JavaScript实现打地鼠和雷霆战机两款游戏，通过面向对象编程的方法，详细讲解了游戏的实现过程。

摘要由CSDN通过智能技术生成

打地鼠

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            *{margin: 0;padding: 0;user-select: none;cursor: url(地鼠/a94ce27742f44024a72f7263f3448f24.png),auto;}
            li{list-style:none;}
            .box{
                width: 100%;
                height: 100vh;
                background: url("./地鼠/background1.png");
                overflow: hidden;
            }
            .game{
                width:320px;
                height:540px;
                margin:100px auto;
                /* background:red; */
            }
            .game>ul{
                width:100%;
                height:360px;
                /* background:pink; */
            }
            .game>ul>li{
                width:50%;
                height:120px;
                float:left;
                position:relative;
                overflow: hidden;
            }
            .game>ul>li>.topbg{
                display:block;
                width:100%;
                position:absolute;
                top:0;
                left:0;
            }
            .game>ul>li>.botbg{
                display:block;
                width:100%;
                position:absolute;
                bottom:8px;
                left:0;
            }
            .game>ul>li>div{
                width:100%;
                height:72px;
                position:absolute;
                top:0;
                left:0;
                overflow: hidden;
            }
            .mouse{
                display:block;
                width:50%;
                position: absolute;
                top:72px;
                left:50%;
                margin-left:-40px;
                /* animation:updown 1s ease 1s infinite; */
            }
            .game>p{
                font-size:50px;
                text-align: center;
            }
            .game>div{
                width:100%;
                height:30px;
                border-radius: 20px;
                overflow: hidden;
            }
            .times{
                width:100%;
                height:100%;
                background-color: darkred;
            }
            @keyframes updown {
                0%{
                    top:72px;
                }
                50%{
                    top:0;
                }
                100%{
                    top:72px;
                }
            }
            .start{
                width:100%;
                height:100vh;
                position:absolute;
                top:0;
                left:0;
                background:rgba(0,0,0,0.5);
                z-index: 5;
                text-align: center;
                color:white;
                line-height: 80px;
            }
            span{
                cursor: pointer;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="start">
                <h1>打地鼠</h1>
                <h1>选择难度</h1>
                <h2><span time="15">简单</span></h2>
                <h2><span time="10">一般</span></h2>
                <h2><span time="6">困难</span></h2>
                <h2><span time="3">地狱</span></h2>
            </div>
            <div class="game">
                <ul>
                    <li>
                        <img src="地鼠/hole-up.png" alt="" class="topbg">
                        <div>
                            <img src="地鼠/mole.png" alt="" class="mouse">
                        </div>
                        <img src="地鼠/hole-down.png" alt="" class="b