H5 划龙舟小游戏

1、公司要求做一个H5龙舟比赛游戏，所以就想到用原生的H5来写，由html、css、jQuery制作一个龙舟比赛小游戏游戏，

如果大家有兴趣可以看下，人机龙舟主要实现原理是通过定位加 setInterval 来实现的，自己的龙舟主要是通过点击来改变定位来实现的，还有需要注意z-index层级关系，index.html代码如下：

复制代码
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/index.css">
        <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script>
        <!-- 引入我们的flexible.js 文件 -->
        <script src="js/flexible.js"></script>
        <title>Document</title>
        <style type="text/css"></style>
    </head>

    <body>
        <!-- 我的龙舟 -->
        <div class="two">
            <div class="two-vel">
                <div class="two-active">
                </div>
            </div>
        </div>
        <!-- 遮罩层 -->
        <div id="duanwu"></div>
        <div id="bg-vel">
            <!-- 背景图 -->
            <div id="game-bg" class="class-bg">
                <div class="one">
                    <div class="one-vel">
                        <span class="one-machine one-active"></span>
                    </div>
                </div>
                <div class="one1">
                    <div class="one-vel1">
                        <span class="one-machine1 one-active1"></span>
                    </div>
                </div>
            </div>
            <div id="game-bg2" class="class-bg"></div>
            <div id="game-bg3" class="class-bg"></div>
            
        </div>
       <!-- 固定 加速按钮 -->
        <div id="guding">🚀</div>
        
        <!-- 成功页面 -->
        <div id="succes-game">
            <p>挑战成功</p>
            <button type="button" id="one-btn">再来一局</button>
        </div>
        
        <!-- 失败页面 -->
        <div id="error-game">
            <p>挑战失败</p>
            <button type="button" id="one-btn1">再来一局</button>
        </div>
         
        <!-- 说明规则 -->
        <div id="shuoming">
            <p>点击下方的小火箭，最先到达终点获胜</p>
            <button type="button"  id="queding">确定</button>
        </div>

    </body>

    </html>
复制代码

2、对应的js代码如下：

复制代码
<script type="text/javascript">
    (function() {
        $('body').css('overflow','hidden');
        var x = 0;
        var topHegiht = 0;
        var topHegiht1 = 0;
        
        $("#queding").click(function(){
            
            $("#duanwu").css("display","none")
            startGame();
        })
        
        function startGame(){
            
                $("#shuoming").css("display","none");
                        //船动画的执行
                        $(".one-machine1").css("animation","1s long linear infinite");
                        $(".one-machine").css("animation","1s long linear infinite");
                        $(".two-active").css("animation","1s longzhou linear infinite");
                        
                        $("#guding").css("z-index","5");
                        $(".one").css("z-index","2");
                        $(".one1").css("z-index","2");
                            //我的
                            $("#guding").click(function() {
                                console.log(x)
                                x += 2.2;
                                $("#bg-vel").css("top", x+"%");
                                if (x >= 135 && topHegiht >= -135) {
                                    
                                    $("#guding").css("z-index","0");
                                    $("#guding").css("pointer-events", "none");
                                    clearInterval(interval);
                                    clearInterval(interval1);
                                    
                                    $("#duanwu").css("background-color","rgba(0, 0, 0, 0.6)");
                                    $("#duanwu").css("display","block");
                                    $("#succes-game").css("display","block");
                                    $(".one").css("z-index","0");
                                    $(".one1").css("z-index","0");
                                }
                        
                            })
                            // 人机一
                            var interval = setInterval(() => {
                                    topHegiht -= 1;
                                    $('.one').css("top", topHegiht + "%");
                                    if (topHegiht <= -135) {
                                        clearInterval(interval);
                                        
                                        if (topHegiht <= -135 && x > -135) {
                                            
                                            $("#guding").css("z-index","0");
                                            clearInterval(interval);
                                            clearInterval(interval1);
                                            $("#duanwu").css("background-color","rgba(0, 0, 0, 0.6)");
                                            $("#duanwu").css("display","block");
                                            $("#error-game").css("display","block");
                                            $(".one").css("z-index","0");
                                            $(".one1").css("z-index","0");
                                        }
                                    }
                                }, 100);
                                //人机二
                            var interval1 = setInterval(() => {
                                // console.log(topHegiht1)
                                topHegiht1 -= 1.5;
                                $('.one1').css("top", topHegiht1 + "%");
                                if (topHegiht1 <= -135) {
                                    clearInterval(interval1);
                                    
                                    if (topHegiht1 <= -135 && x > -135) {
                                        
                                        $("#guding").css("z-index","0");
                                        //清除定时器
                                        clearInterval(interval);
                                        clearInterval(interval1);
                                        $("#duanwu").css("background-color","rgba(0, 0, 0, 0.5)");
                                        // $("#erweima").css("display","flex");
                                        $("#error-game").css("display","block");
                                        $("#duanwu").css("display","block");
                                        $(".one").css("z-index","0");
                                        $(".one1").css("z-index","0");
                                    }
                                }
                            }, 200)
                        
                
            
        }
        
        $("#one-btn1").click(()=>{
            window.location.href='index.html';
        })
        $("#one-btn").click(()=>{
            window.location.href='index.html';
        })
    })();
</script>
复制代码

3、样式如下：

复制代码
html {
  width: 100%;
  height: 100%;
}
body {
  min-width: 320px;
  max-width: 750px;
  padding: 0;
  margin: 0;
  /* flexible 给我们划分了 10 等份 */
  width: 10rem;
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  background: #f2f2f2;
  height: 100%;
}
a {
  text-decoration: none;
  font-size: 0.333333rem;
}
/* 如果我们的屏幕超过了 750px  那么我们就按照 750设计稿来走 不会让我们页面超过750px */
@media screen and (min-width: 750px) {
  html {
    font-size: 75px!important;
  }
}
#bg-vel {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0%;
}
#bg-vel .class-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url('../img/bg1.png');
  display: flex;
}
#bg-vel #game-bg .one {
  width: 20%;
  height: 100%;
  padding-left: 18%;
  z-index: 0;
  position: relative;
  top: 0%;
}
#bg-vel #game-bg .one .one-vel {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
}
#bg-vel #game-bg .one .one-vel .one-machine {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1.3rem;
  height: 2.9rem;
  bottom: 30%;
  background-image: url(../img/longzhou.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  background-position: center;
  animation: none;
}
#bg-vel #game-bg .one1 {
  width: 26%;
  height: 100%;
  position: relative;
  z-index: 0;
  box-sizing: border-box;
  top: 0;
}
#bg-vel #game-bg .one1 .one-vel1 {
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
}
#bg-vel #game-bg .one1 .one-vel1 .one-machine1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1.3rem;
  height: 2.9rem;
  bottom: 30%;
  background-image: url(../img/longzhou.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  background-position: center;
  animation: none;
}

#bg-vel #game-bg2 {
  top: -100%;
  background-image: url('../img/bg2.png');
}
#bg-vel #game-bg3 {
  top: -200%;
  background-image: url('../img/bg1.png');
}
@keyframes long {
  0% {
    background-image: url(../img/longzhou.png);
    bottom: 29%;
  }
  100% {
    background-image: url(../img/longzhou1.png);
    bottom: 31%;
  }
}
#succes-game {
  display: none;
  position: fixed;    
  left: 50%;
  top: 25%;
  height: 0;
  width: 68%;
  height: 50%;
  transform: translateX(-50%);
  z-index: 100;
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
}
#succes-game #one-btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  width: 67%;
  height: 15%;
  font-size: 0.6rem;
  color: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

#error-game {
  display: none;
  position: fixed;
  left: 50%;
  top: 25%;
  height: 0;
  width: 68%;
  height: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background-color: #000000;
  color: #fff;
  text-align: center;    
}
#error-game p{
    font-size: 1rem;
}
#error-game #one-btn1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50%;
  width: 67%;
  height: 15%;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  color: #000000;
}


#guding {
  position: fixed;
  right: 15%;
  width: 15%;
  height: 8%;
  bottom: 7%;
  z-index: 0;
  background-color: #fff;
  border-radius: 50%;
  font-size: 1rem;
  color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}
.two {
  position: fixed;
  right: 0;
  width: 20%;
  height: 100%;
  padding-right: 18%;
  z-index: 1;
}
.two .two-vel {
  width: 100%;
  height: 100%;
  transform: translateY(0);
  position: relative;
}
.two .two-vel .two-active {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1.3rem;
  height: 2.9rem;
  bottom: 30%;
  background-image: url(../img/0.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  background-position: center;
  animation: none;
}

@keyframes longzhou {
  0% {
    background-image: url(../img/0.png);
    bottom: 29%;
  }
  100% {
    background-image: url(../img/01.png);
    bottom: 31%;
  }
}
#duanwu {
  width: 100%;
  height: 100%;
  display: flex;
  position: fixed;
  overflow: hidden;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1;
}
#shuoming {
  position: fixed;
  left: 0;
  top: 15%;
  width: 70%;
  height: 48%;
  border-radius: 20px;
  margin-left: 15%;
  background-color: #FFFFFF;
  z-index: 50;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
#shuoming p{
    margin: 0;
    padding: 0.6rem;
    font-size: 0.5rem;
}
#shuoming button {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 7%;
  width: 70%;
  height: 12%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  border: 1px solid #000000;
  font-size: 0.6rem;
}
复制代码

4、这样基本实现了,效果图如下：

 5、附上效果的地址链接，http://laid.net3v.net/wwwroot/dragonGame/index.html  （提示：在浏览器打开的时候记得调为手机模式）

posted @   凌晨的粥  阅读(581)  评论(0)  编辑  收藏  举报
编辑推荐：
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示
AI IDE Trae