js+css实现找你妹小游戏代码
代码语言:html
所属分类:游戏
代码描述:js+css实现找你妹小游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,minimal-ui"> <style> body { background-color:#F06060; color:#fff; font:12px/1.5 '微软雅黑' } body>a { display:none } .page { position:absolute; top:0; left:0; right:0; bottom:0 } .hide { display:none } #loading { display:block; font-size:30px; text-align:center; color:#fff } #loading .loading-txt { height:100px; width:100%; position:absolute; top:0; left:0; right:0; bottom:60px; margin:auto } .boyaa_logo { height:50px; width:110px; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto; border-radius:10px; -webkit-box-shadow:1px 1px 3px rgba(0,0,0,.5); -moz-box-shadow:1px 1px 3px rgba(0,0,0,.5); box-shadow:1px 1px 3px rgba(0,0,0,.5) } .boyaa_logo img { max-width:100%; border-radius:10px; display:block } .copyright { position:absolute; bottom:0; left:0; width:100%; text-align:center; font-size:16px } #index h1 { text-align:center; font-size:30px; padding:30px 0; text-shadow:1px 1px 1px #AB3C3C } #index .btns { text-align:center; position:absolute; bottom:10px; height:210px; width:100%; color:#ddd } #room header { position:absolute; top:0; left:0; width:100%; height:50px; line-height:50px; text-align:center; font-size:16px; color:#FFA1A1 } #room header .lv { position:absolute; width:80px; height:50px; left:10px; top:0 } #room header .lv em { font-style:normal } #room header .btn-pause { position:absolute; top:5px; right:10px; height:40px; width:60px; line-height:40px; padding:0; margin:0; color:#fff } #room header .time { font-size:20px; font-weight:700; background-color:#FD9090; color:#FFCACA; padding:0 10px; border-radius:10px } #room header .time.danger { color:#FF0505; background-color:#fff } #help { height:30px; font-size:16px; color:#FFA1A1; text-align:center } #box { position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; background-color:#ddd; border-radius:10px; padding:10px } #box span { display:block; float:left; border-radius:10px; cursor:pointer; border:5px solid #ddd; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box } #box.lv2 span { width:50%; height:50% } #box.lv3 span { width:33.33%; height:33.33% } #box.lv4 span { width:25%; height:25% } #box.lv5 span { width:20%; height:20%; border-width:3px } #box.lv6 span { width:16.666%; height:16.666%; border-width:3px } #box.lv7 span { width:14.28%; height:14.28%; border-width:3px } #box.lv8 span { width:12.5%; height:12.5%; border-width:3px } #box.lv9 span { width:11.111%; height:11.111%; border-width:3px } #box span img { width:100% } #dialog { background-color:#A74343; padding-top:50px; box-sizing:border-box; -webkit-box-sizing:border-box } #dialog:after { position:absolute; top:0; right:0; display:block; content:''; width:90px; height:75px; background:url(//repo.bfw.wiki/bfwrepo/icon/5da6d284a17bd.png) 0 0/90px 75px no-repeat; -webkit-background-size:90px 75px } #dialog .inner { height:100%; width:100%; text-align:center; font-size:20px } #dialog .inner .content { padding-top:30px } #dialog .inner h3 { line-height:60px; font-size:40px; margin:0; color:#321 } #dialog .inner .pause h3 { color:#FFE2C5 } #dialog .inner .btn { margin:15px auto } #dialog .inner p { margin:0 } #dialog .inner-content { height:270px; width:100%; position:absolute; top:0; left:0; right:0; bottom:0; margin:auto } .btn { border:none; color:inherit; cursor:pointer; display:inline-block; margin:10px 30px; text-transform:uppercase; letter-spacing:1px; font-weight:700; outline:0; position:relative; background:#FCAD26; border-radius:7px; box-shadow:0 5px #DA9622; font-size:20px; font-family:'微软雅黑'; height:50px; width:220px; line-height:50px; -webkit-tap-highlight-color:transparent } .btn.btn-bottom { position:absolute; width:300px; padding:0; bottom:20px; left:50%; margin-left:-150px } .boyaa-logo { display:block; height:50px; width:100px; margin:0 auto; -webkit-tap-highlight-color:transparent } .boyaa-logo img { max-width:100% } .banner { display:none; width:640px; background-color:#123; max-width:100%; position:absolute; bottom:0; left:0; display:none } .banner img { display:block; max-width:100% } @media all and (orientation:landscape) { #room header { height:100%; width:80px } #room header .lv { left:0 } #room header .time { display:inline-block; height:50px; width:100%; padding:0; position:absolute; top:50%; left:0; margin-top:-25px } #room header .btn-pause { top:auto; bottom:15px } #box { top:0; left:80px } #dialog { padding-top:0; padding-left:80px } #dialog .inner .content { padding-top:100px } }@media all and (max-width:361px) { #box.lv1 span,#box.lv2 span,#box.lv3 span,#box.lv4 span { border-width:2px; border-radius:5px } #box.lv5 span,#box.lv6 span,#box.lv7 span,#box.lv8 span,#box.lv9 span { border-width:1px; border-radius:3px } }.btn-boyaa { text-decoration:none } .btn-boyaa img { height:30px; width:30px; vertical-align:middle; margin-left:10px } </style> </head> <body> <script id="tpl" type="text/html"> <div class="grid"> <div class="page hide" id="loading"> <div class="loading-txt"> <%=loading%> </div> </div> <div class="page hide" id="index"> <h1> <%=title%> </h1> <div id="help"> <%=help_txt%> </div> <div class="btns"> <button data-type="color" class="btn play-btn"> <%=btn_start%> </button> </div> </div> <div class="page hide" id="room"> <header> <span class="lv"> <%=score%> <em> 1 </em> </span> <span class="time"> </span> <span class="btn btn-pause"> <%=btn_pause%> </span> </header> <div id="box" class="lv1"> </div> </div> <div class="page hide" id="dialog"> <!-- <div id="share-wx" style=""><p style="text-align: right; padding-left: 10px;"><img src="./share.png" id="share-wx-img" style="max-width: 280px; padding-right: 25px;"></p></div>--> <div class="inner"> <div class="content gameover"> <div class="inner-content"> <h3></h3> <div class="btn-wrap"> <button class="btn btn-restart"> <%=btn_reTry%> </button> <a href="" target="_blank" class="btn btn-boyaa"> <%=btn_more_game%> </a> </div> </div> </div> <div class="content pause"> <div class="inner-content"> <h3> <%=game_pause%> </h3> <div class="btn-wrap"> <button class="btn btn-resume"> <%=btn_resume%> </button> <a href="" target="_blank" class="btn btn-boyaa"> <%=btn_more_game%> </a> </div> </div> </div> </div> </ins> </div> </div> </script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.2.11.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/underscore.1.6.0.js"></script> <script> var _lang = { zh1: { title: "看你有多色", help_txt: "找出所有色块里颜色不同的一个", score: "得分:", btn_pause: "暂停", btn_start: "开始游戏", btn_reTry: "再来一次", btn_more_game: "更多游戏", game_pause: "游戏暂停", btn_resume: "继续游戏", loading: "加载中...", lv_txt: ["瞎子", "色盲", "色郎", "色狼", "色鬼", "色魔", "超级色魔", "变态色魔", "孤独求色"], share_txt1: "我闯过", share_txt2: "关,击败", share_txt3: "%的人,我是【", share_txt4: "】,不服来战!", desc: "找出所有色块中颜色不同的一块。分享朋友圈,找到身边的色魔" }, zh: { title: "微信找你妹", help_txt: "在众多<span style='font-size:240%'>袜</span>子中找到唯一的<span style='font-size:240%'>妹</span>子", score: "过关:", btn_pause: "暂停", btn_start: "开始游戏", btn_reTry: "再来一次", btn_more_game: "更多游戏", game_pause: "游戏暂停", btn_resume: "继续游戏", loading: "加载中...", lv_txt: ["色郎", "色狼", "色鬼", "色魔", "超级色魔", "变态色魔", "孤独求色",], share_txt1: "【微信找你妹】我在", share_txt2: "只袜子中找到", share_txt3: "个妹子,我是【", share_txt4: "】,不服来战!", desc: "找出所有'袜'字中的'妹'字。分享朋友圈,找到身边的色魔" }, en: { title: "How strong is your eyesight", help_txt: "Find the box with the different colour", score: "Score:", btn_pause: "Pause", btn_start: "Start", btn_reTry: "Again", btn_more_game: "More games", game_pause: "Pause", btn_resume: "Continues", loading: "loading...", lv_txt: ["Blind", "Very weak", "Weak", "Just so so", "Not bad", "Nice one", "Great", "Amazing", "Insane"], share_txt1: "I passed ", share_txt2: "stages and defeated ", share_txt3: "% people. I am ", share_txt4: ", come to challenge me if you dare!", desc: "Find the box with the different colour, share it to your friends!" } }, _config = { lang: "zh", color: { allTime: 60, addTime: 0, lvMap: [2, 3, 4, 5, 5, 6, 6, 7, 7, 7, 8, 8, 8, 8, 8, 8, 9] }, pic: { isOpen: !1, allTime: 5, addTime: 0, lvMap: [2, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8] } }, shareData = { imgUrl: "http://games.vdcom.cn/games/zhaonimei/zhaonimei.jpg", timeLineLink: "http://games.vdcom.cn/games/zhaonimei/", tTitle: _lang[_config.lang].title + "?", tContent: _lang[_config.lang].desc, totalWazi:0 }; ! function() { var a = _lang[_config.lang], b = $("#tpl").html(), c = _.template(b, a); $("body").html(c), $("title").html(a.title) } (), function() { var a = $("#box"), b = { lv: $("#room .lv em"), time: $("#room .time"), start: $("#dialog .btn-restart"), back: $("#dialog .btn-back"), share: $("#dialog .btn-share"), pause: $("#room .btn-pause"), resume: $("#dialog .btn-resume"), dialog: $("#dialog"), d_content: $("#dialog .content"), d_pause: $("#dialog .pau.........完整代码请登录后点击上方下载按钮下载查看
网友评论0