vue实现手机端移动端数字接龙游戏代码
代码语言：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{ font-size: 15px; color:#f3c65f; line-height: 25px; text-align: justify; padding: 3px 0; }
.alertBox .spbtn{ padding: 16px 0; }
.alertBox .btn{ width: 110px; line-height: 34px; text-align: center; background: #fff; border-radius: 5px; margin: 0 16px; font-size: 14px; color:#333; cursor: pointer; }
.remindBox{ position: fixed; right: 20px; top: 20px; background: rgba(0, 0, 0,0.8); z-index: 8888; box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.7); border-radius: 7px; -webkit-animation: bounceInDown 1s both; animation: bounceInDown 1s both; padding: 0 20px; font-size: 14px; color:#fff; line-height: 40px; }
@-webkit-keyframes bounceInDown{
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0,-3000px,0);
transform: translate3d(0,-3000px,0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0,25px,0);
transform: translate3d(0,25px,0);
}
75% {
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
}
90% {
-webkit-transform: translate3d(0,5px,0);
transform: translate3d(0,5px,0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bounceInDown{
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
animation-timing-function: cubic-bezier(0.215,0.610,0.355,1.000);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0,-3000px,0);
transform: translate3d(0,-3000px,0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0,25px,0);
transform: translate3d(0,25px,0);
}
75% {
-webkit-transform: translate3d(0,-10px,0);
transform: translate3d(0,-10px,0);
}
90% {
-webkit-transform: translate3d(0,5px,0);
transform: translate3d(0,5px,0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
html,
body {
height: 100%;
overflow: hidden;
}
.ascBox {
padding: 10px 16px 0 16px;
height: calc(100% - 90px);
}
.ascGroup {
width: 54px;
position: relative;
padding: 36px 7px 0 7px;
background: #fafafa;
}
.ascGroup::before {
content: '';
width: 40px;
height: 50px;
text-align: center;
font-size: 13px;
color: #333;
line-height: 50px;
margin-top: -30px;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
position: absolute;
z-index: 65;
left: 7px;
top: 36px;
}
.ascGroup.hover {
background: #f5f5f5;
}
.ascLi {
width: 40px;
height: 50px;
background: #eee;
text-align: center;
font-size: 13px;
color: #333;
line-height: 50px;
margin-top: -30px;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
position: relative;
z-index: 66;
}
.ascLi.dt {
animation: ascLiAni 0.2s ease-in-out both;
}
@keyframes ascLiAni {
100% {
line-height: 20px;
}
}
.ascLi.up {
animation: ascLiUpAni 0.3s 0.2s ease-in-out both;
}
@keyframes ascLiUpAni {
80% {
margin-top: -50px;
opacity: 1;
line-height: 50px;
}
100% {
margin-top: -50px;
opacity: 0;
line-height: 50px;
}
}
.ascLi.out {
animation: ascLiOutAni 0.6s 0.2s ease-in-out both;
}
@keyframes ascLiOutAni {
22% {
transform: scale(1.3);
}
44% {
transform: scale(1);
}
66% {
transform: scale(1.3);
}
78% {
transform: scale(1.3);
}
100% {
transform: scale(0);
}
}
.ascLi.change {
animation: ascLiChangeAni 0.6s 0.2s ease-in-out both;
}
@keyframes ascLiChangeAni {
100% {
transform: rotate(360deg);
}
}
.ascLi.boom {
animation: ascLiBoomAni 0.2s ease-in-out both;
}
@keyframes ascLiBoomAni {
50% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
.ascLi[data-type="universal"] {
background: #eee url(prop-universal.png) center center no-repeat;
background-size: 26px auto;
}
.ascLi[data-type="boom"] {
background: #eee url(prop-boom.png) center center no-repeat;
background-size: 30px auto;
}
.dkBox {
position: fixed;
left: 0;
bottom: 0;
width: 50%;
height: 90px;
padding: 0 28px 0 0;
}
.dkLi {
width: 40px;
height: 50px;
background: #eee;
text-align: center;
font-size: 13px;
color: #333;
line-height: 50px;
margin: 0 auto;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
.dkLi.move {
opacity: 0;
}
.dkLi:last-child {
margin-right: -56px;
width: 56px;
height: 70px;
line-height: 70px;
font-size: 16px;
background: #fff;
}
.dkLi[data-type="universal"] {
background: #fff url(prop-universal.png) center 10px no-repeat;
background-size: 26px auto;
}
.dkLi[data-type="boom"] {
background: #fff url(prop-boom.png) center 10px no-repeat;
background-size: 30px auto;
}
.dkLi[data-type="universal"]::before {
content: '通用卡';
display: block;
font-size: 12px;
line-height: 20px;
margin-top: 44px;
}
.dkLi[data-type="boom"]::before {
content: '炸弹卡';
display: block;
font-size: 12px;
line-height: 20px;
margin-top: 44px;
}
.resultBox {
position: fixed;
z-index: 9999;
left: 50%;
right: 16px;
top: 100%;
margin-left: 44px;
transform: translate(0, -100%);
height: 90px;
}
.resultScore {
font-size: 14px;
color: #2d6973;
line-height: 28px;
/* border: 2px solid #32808e; */
border-radius: 4px;
padding: 0 8px;
/* background: #5abfd2; */
/* width: 100%; */
}
.resultScore em {
/* color: #ffdaa1; */
font-weight: bold;
margin-left: 4px;
color: #ecb35a;
}
.resultCourse {
font-size: 13px;
color: #2d6973;
border-bottom: 1px solid #2d6973;
line-height: 15px;
margin-top: 10px;
}
.moveLi {
width: 56px;
height: 70px;
background: #fff;
text-align: center;
font-size: 16px;
color: #333;
line-height: 70px;
border-radius: 4px;
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
position: fixed;
z-index: 9999;
left: 50%;
top: 100%;
transform: translate(-50%, -80px);
}
.moveLi[data-type="universal"] {
background: #fff url(prop-universal.png) center 10px no-repeat;
background-size: 26px auto;
}
.moveLi[data-type="boom"] {
background: #fff url(prop-boom.png) center 10px no-repeat;
background-size: 30px auto;
}
.moveLi[data-type="universal"]::before {
content: '通用卡';
display: block;
font-size: 12px;
line-height: 20px;
margin-top: 44px;
}
.moveLi[data-type="boom"]::before {
content: '炸弹卡';
display: block;
font-size: 12px;
line-height: 20px;
margin-top: 44px;
}
.courseLayer {
position: fixed;
z-index: 9999;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.courseKt {
position: absolute;
left: -80px;
top: -80px;
width: 80px;
height: 80px;
border-radius: 6px;
box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.6);
transition: all 0.4s ease-in-out;
}
.courseKt.line {
width: 70px;
height: calc(100% - 90px);
}
.courseTxt {
position: absolute;
left: 40px;
right: 40px;
top: 40px;
font-size: 20px;
color: #fff;
line-height: 30px;
text-align: justify;
font-weight: bold;
}
.courseTxt.right {
left: 118px;
}
.courseHand {
position: absolute;
left: calc(50% - 35px);
top: 100%;
transition: all 0.4s ease-in-out;
z-index: 55;
}
.courseHand em {
width: 70px;
height: 70px;
background: url(hand-small.png) center .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0