vue实现手机端移动端数字接龙游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：vue实现手机端移动端数字接龙游戏代码，玩法：共有6个队列可以放置，每个队列不可超过12张卡牌，拖动卡牌到队列位置松开手指可将卡牌放置上对应队列，当卡牌放置后最后一张卡牌与上一张卡牌数值相同时则会向上合并累加

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <title></title>
    <style>
        [v-cloak] { display: none!important; }
        		
        		html,body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{ margin:0; padding:0; }
        body{ font: "PingFangSC-Regular","Arial","Microsoft YaHei","黑体","宋体",sans-serif; -webkit-text-size-adjust:none; }
        
        *{ -webkit-overflow-scrolling: touch; } /* iOS 滑动流畅 */
        
        img { }
        a{ color:#333; text-decoration:none; }
        a:hover{ color:#333; }
        em,i{ font-style:normal; }
        b{ font-weight: normal; }
        li{ list-style:none; }
        img{ border:0; vertical-align:middle; }
        table{ border-collapse:collapse; border-spacing:0; }
        p{ word-wrap:break-word; }
        input,textarea{ outline: none; font: 14px "PingFangSC-Regular","Arial","Microsoft YaHei","黑体","宋体",sans-serif; }
        *{ outline: none; }
        
        input{
        	-webkit-appearance: none; /* 去除 Iphone中input样式 */
        }
        
        * {
        	/*-webkit-touch-callout:none;
        	-webkit-user-select:none;
        	-khtml-user-select:none;
        	-moz-user-select:none;
        	-ms-user-select:none;
        	user-select:none;*/
        	-webkit-tap-highlight-color:rgba(255,0,0,0); /* 去掉ios触摸黑色遮罩 */
        
        	box-sizing: border-box;
        }
        
        input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{ color:#bbb; }
        
        input,textarea{ font-size: 14px; color:#333; line-height: 20px; height: 20px; border: none; outline: none; resize: none; padding: 0; margin: 0; width: 100%; }
        
        .flex{ flex: 1; -webkit-flex: 1; box-flex:1; -webkit-box-flex:1; }
        .df{ display: -webkit-box; display: box; display: -webkit-flex; display: flex; }
        .wao{ -webkit-box-pack: center; box-pack: center; -webkit-justify-content: center; justify-content: center; }
        .wal{ -webkit-box-pack: start; box-pack: start; -webkit-justify-content: flex-start; justify-content: flex-start; }
        .war{ -webkit-box-pack: end; box-pack: end; -webkit-justify-content: flex-end; justify-content: flex-end; }
        .hao{ -webkit-box-align: center; box-align: center; -webkit-align-items: center; align-items: center; }
        .hal{ -webkit-box-align: start; box-align: start; -webkit-align-items: flex-start; align-items: flex-start; }
        .har{ -webkit-box-align: end; box-align: end; -webkit-align-items: flex-end; align-items: flex-end; }
        .bob{ box-sizing: border-box; }
        .cf{ /*-webkit-box-direction:normal; box-direction:normal; */-webkit-box-orient:vertical; box-orient:vertical; -webkit-flex-direction:column; flex-direction:column; }
        .jcb { -webkit-box-pack: justify; -webkit-justify-content: space-between; box-pack: justify; justify-content: space-between; }
        
        .ov-d { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .ov-2d { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
        .ov-3d { text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
        
        .clear::after{ content: ''; clear:both; height:0; display: block; }
        
        .confirmBox{ position: fixed; left: 50%; top: 20px; background: rgba(51, 124, 206,0.9); z-index: 8888; box-shadow: 0 0 10px 2px rgba(51, 124, 206, 0.8); border-radius: 10px; width: 340px; margin-left: -170px; -webkit-animation: bounceInDown 1s both; animation: bounceInDown 1s both; }
        .confirmBox .title{ font-size: 18px; color:#fff; line-height: 54px; text-align: center; }
        .confirmBox .txt{ font-size: 15px; color:#f3c65f; line-height: 25px; text-align: justify; padding: 3px 14px; }
        .confirmBox .spbtn{ padding: 16px 0; }
        .confirmBox .btn{ width: 110px; line-height: 34px; text-align: center; background: #fff; border-radius: 5px; margin: 0 16px; font-size: 14px; color:#333; cursor: pointer; }
        .alertBox{ position: fixed; left: 50%; top: 20px; background: rgba(51, 124, 206,0.9); z-index: 8888; box-shadow: 0 0 10px 2px rgba(51, 124, 206, 0.8); border-radius: 10px; width: 340px; margin-left: -170px; -webkit-animation: bounceInDown 1s both; animation: bounceInDown 1s both; }
        .alertBox .title{ font-size: 18px; color:#fff; line-height: 54px; text-align: center; }
        .alertBox .txt{ fo.........完整代码请登录后点击上方下载按钮下载查看