自己做的一款利用了JavaScript和jQuery的“跑酷小游戏”

最新推荐文章于 2023-07-21 16:04:08 发布

二方通行

最新推荐文章于 2023-07-21 16:04:08 发布

阅读量862

点赞数 3

文章标签：游戏 javascript

本文链接：https://blog.csdn.net/weixin_50973363/article/details/118301860

版权

项目下载地址
代码结构图:
在这里插入图片描述

效果图:
在这里插入图片描述
HTML:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天天酷跑</title>
    <link href="css/gameCSS.css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
</head>
<body>

<div class="login">
    <p>名字:<input type="text" required name="userName" id="name"></p>
    <p>密码:<input type="password" required name="password" id="pwd"></p>
    <p class="login1">登录</p>
    <p class="reg">注册账号</p>
</div>

<div class="register">
    <p>名字:<input type="text" required name="userName"></p>
    <p>密码:<input type="password" required name="password"></p>
    <p>密码:<input type="password" required name="password"></p>
    <p id="submit">提交注册</p>
</div>

<div class="showMenu">
    <ul>
        <li>当前用户:<span id="currentName"></span></li>
        <li id="start">开始游戏</li>
        <li id="top">排行榜</li>
        <li id="exits">退出账号</li>
    </ul>
</div>

<!--排行榜，游戏结束动态添加！-->
<div class="top">
    <ul>

    </ul>
</div>

<div class="scene">

    <audio loop="loop" id="bossMusic" src="MP3/bossMusic.mp3" hidden>
    </audio>

    <audio loop="loop" id="sceneMusic" src="MP3/scene.mp3" hidden>
    </audio>

    <audio id="getMoneyMusic" src="MP3/getMoney.mp3" hidden>
    </audio>

    <audio id="hit" src="MP3/hit.mp3" hidden>
    </audio>

    <div class="count">
        <p>分数:<span class="number">1</span></p>
        <p>金币:<span id="money"></span></p>
        <p>血量:<span id="life"></span></p>
    </div>

    <img src="images/无标题.png" class="runImg">
</div>

</body>
<script type="text/javascript" src="js/game.js"></script>
<script type="text/javascript" src="js/leadHelp.js"></script>
<script type="text/javascript" src="js/login.js"></script>
</html>

.scene {
    display: none;
    background: url("images/scene1.png")no-repeat;
    background-size: contain;
    width: 99%;
    height: 98%;

}

.runImg {
    position: absolute;
    transform: rotateY(180deg);
    width: 150px;
    height: 150px;
    top: 480px;
    left: 100px;
}

.boom {
    width: 60px;
    height: 30px;
    position: absolute;
    transform: rotateY(180deg);
    left: 1450px;
    top: 560px;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
}

.showMenu {
    background: url("images/denglu.JPG") no-repeat;
    margin: 0px auto;
    width: 99%;
    height: 600px;
    position: absolute;

    line-height: 50px;
    display: none;
    color: red;
    background-size: cover;
}

.showMenu > ul {
    position: absolute;
    margin: 0px auto;
    left: 48%;
}


.count {
    background-color: cornflowerblue;
    color: blue;
    width: 180px;
    height: 150px;
    font-size: 22px;
}

.number {
    color: blue;
    width: 30px;
    height: 30px;
}

.gw {
    width: 300px;
    height: 388px;
    position: absolute;
    top: 280px;
    left: 1000px;
}

.money {
    width: 100px;
    height: 100px;
    position: absolute;
    left: 1400px;
}

.login {
    width: 95%;
    height: 600px;
    border: black 1px solid;
    line-height: 50px;
    text-align: center;
    margin: 0px auto;
    background: url("images/denglu.JPG") no-repeat;
    background-size: cover;
    color: white;
}

.register {
    width: 95%;
    height: 600px;
    border: black 1px solid;
    line-height: 50px;
    text-align: center;
    margin: 0px auto;
    display: none;
    background: url("images/denglu.JPG") no-repeat;
    background-size: cover;
    color: white;
}

.top {
    display: none;
    color: black;
    background: url("images/topScene.jpg") no-repeat;
    position: absolute;
    left: 60%;
    line-height: 20px;
    width: 500px;
    height: 500px;
}

.top > ul {
    position: absolute;
    left: 100px;
    top: 100px;
}

.top > ul > li {
    width: 250px;
}

.myBoom {
    position: absolute;
    left: 130px;
    width: 100px;
    height: 100px;
}

.appearBoos {
    position: absolute;
    left: 50%;
    width: 450px;
    height: 450px;
}
.fire{
    position: absolute;
    width: 98%;
    height: 30px;
    top: 600px;
}

.bossFire{
    position: absolute;
    margin: 0px auto;
    width: 300px;
    height: 300px;
    left: 45%;
}

JavaScript碰撞代码:



    //判断障碍物是否与主角碰撞
    function isCollision(className) {
        $(className).each(function () {
            var x1 = $(this).offset().left;
            var w1 = $(this).width();
            var y1 = $(this).offset().top;
            var h1 = $(this).height();

            var that = this;

            $(".runImg").each(function () {
                var x2 = $(this).offset().left;
                var w2 = $(this).width();
                var y2 = $(this).offset().top;
                var h2 = $(this).height();

                //如果人物已经在障碍物的右边直接不往下判断。。。防止人物已经在障碍物右边了，人物落地时刚好与障碍物同一个高度，防止第二个if条件成立结束游戏
                if (x2 > x1) {
                    return;
                }
                if ((Math.abs(x1 + w1 / 2)) - (Math.abs(x2 + w2 / 2)) < Math.abs((w1 + w2) / 2)
                    && Math.abs((y1 + h1 / 2) - (y2 + h2 / 2)) < Math.abs((h1 + h2) / 2)
                ) {

                    if (className == ".money") {
                        getMoneyMusic.play();
                        moneys++;
                        $("#money").text(moneys);
                        $(that).remove();
                    } else if (className == ".boom") {                        hit.play();
                        $(".boom").remove();
                        life--;
                        $("#life").text(life);
                        if (life <= 0) {
                            endGame();
                        }
                    }
                }
            })
        })
    }