js实现一款移动端手机端消消乐小游戏效果代码
代码语言:html
所属分类:游戏
代码描述:js实现一款移动端手机端消消乐小游戏效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!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"> <style> a,body,button,dd,div,dl,dt,form,h1,h2,h3,h4,h5,h6,input,label,li,ol,p,span,table,td,textarea,th,tr,ul { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border: 0; -webkit-tap-highlight-color: transparent } body,html { width: 100%; min-height: 100%; background-color: #fff; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none } body { color: #333; font-family: 寰蒋闆呴粦 } h1,h2,h3,h4,h5,h6 { font-weight: 400; font-size: 100% } a { color: #555 } a,a:hover { text-decoration: none } img { border: none } li,ol,ul { list-style: none } input,textarea { outline: 0; -webkit-appearance: none } ::-webkit-input-placeholder { color: #b0b0b0 } :-moz-placeholder,::-moz-placeholder { color: #b0b0b0 } :-ms-input-placeholder { color: #b0b0b0 } [v-cloak] { display: none } .lucky-star { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(//repo.bfw.wiki/bfwrepo/image/607e4ca28879b.png); background-size: cover; background-repeat: no-repeat; font-size: 0; -moz-background-size: cover; -o-background-size: cover } .score-target { padding: 0 .3rem; height: 1.5rem; -webkit-box-pack: justify; -webkit-justify-content: space-between; -moz-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .score-current,.score-target { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; width: 100%; color: #fff; font-size: .24rem; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center } .score-current { position: absolute; top: .3rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -moz-box-pack: center; -ms-flex-pack: center; justify-content: center } .score-current span { color: #fffc0f; font-size: .48rem } .score-select { width: 100%; color: #fff; text-align: center; font-size: .28rem; opacity: 0; -webkit-transition: opacity 1s; -moz-transition: opacity 1s; -o-transition: opacity 1s; transition: opacity 1s } .star-list { position: fixed; bottom: 0; left: 0; width: 100%; height: 70% } .star-list li { position: absolute; width: .75rem; height: .75rem; border: 0; -webkit-border-radius: .16rem; -moz-border-radius: .16rem; border-radius: .16rem; background-size: cover; -webkit-transition: left .3s,bottom .3s,-webkit-transform .3s; -moz-transition: transform .3s,left .3s,bottom .3s,-moz-transform .3s; -o-transition: left .3s,bottom .3s,-o-transform .3s; transition: left .3s,bottom .3s,-webkit-transform .3s; transition: transform .3s,left .3s,bottom .3s; transition: transform .3s,left .3s,bottom .3s,-webkit-transform .3s,-moz-transform .3s,-o-transform .3s; -moz-background-size: cover; -o-background-size: cover } .star-list li.scale { border: 2px solid #bfefff; -webkit-animation: scale .3s linear infinite alternate; -moz-animation: scale .3s linear infinite alternate; -o-animation: scale .3s linear infinite alternate; animation: scale .3s linear infinite alternate } .star-list li img { position: absolute; top: 15%; left: 15%; width: 70%; height: 70% } @-webkit-keyframes scale { 0% { -webkit-transform: scale(1); transform: scale(1) } to { -webkit-transform: scale(.95); transform: scale(.95) }} @-moz-keyframes scale { 0% { -moz-transform: scale(1); transform: scale(1) } to { -moz-transform: scale(.95); transform: scale(.95) }} @-o-keyframes scale { 0% { -o-transform: scale(1); transform: scale(1) } to { -o-transform: scale(.95); transform: scale(.95) }} @keyframes scale { 0% { -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); transform: scale(1) } to { -webkit-transform: scale(.95); -moz-transform: scale(.95); -o-transform: scale(.95); transform: scale(.95) }} </style> </head> <body> <div class="lucky-star" id="luckyStar"> <div class="score-target"> <p class="score-level"> 关卡 <span id="scoreLevel"></span> </p> <p> 目标:<span id="scoreTarget"></span> </p> </div> <div class="score-current"> 得分<span id="scoreCurrent"></span> </div> <div class="score-select" id="scoreSelect"></div> <ul class="star-list" id="starList".........完整代码请登录后点击上方下载按钮下载查看
网友评论0