사용자:BANIP/uncymaze/common.js: 두 판 사이의 차이

리버티게임, 모두가 만들어가는 자유로운 게임
imported>BANIP
(이벤트 언바인딩 추가)
imported>BANIP
잔글 (글자 크기 조절)
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
1번째 줄: 1번째 줄:
$(".start").on("click",function(){
$(".start").on("click",function(){
$(".start").off("click")
$(".start").off("click")
var html = `<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script:400" rel="stylesheet"><div class="tooltip">방향키/esc/enter로 조작해주세요</div><div class="main flex-center"> <div class="opening hide"> <div class="title">제작</div><div class="descript">BANIP</div></div><div class="lobby hide"> <div class="title">UNCYMAZE</div><ul class="menu main"> <li class="start" data-target="start">게임시작</li><li class="howto" data-target="howto">게임방법</li><li class="ranking" data-target="ranking">랭킹</li><li class="exit" data-target="exit">게임종료</li></ul> <ul class="menu difficulty hide"> <li data-target="0">.쉬움</li><li data-target="1">.보통</li><li data-target="2">.어렵게</li></ul> <div class="popup hide"> <div class="container"> <div class="howto hide">미구현된 게임방법입니다.</div><div class="ranking hide">미구현된 랭킹입니다.</div></div><div class="left"><img src="https://cdn2.iconfinder.com/data/icons/font-awesome/1792/angle-left-512.png"/></div></div></div></div>`;
var rootcss = `<style>#bodyContent{ font-size: 1.8em; }</style>`
var css = `#bodyContent > *{padding:0;margin:0;font-family:'Nanum Pen Script';font-size:1.22em}.main,body,html{width:100%;height:100%}li,ul{list-style:none}.hide{display:none}.flex-center{display:flex;align-items:center;justify-content:center}.opening{text-align:center;line-height:1.2em}.title{text-align:center;margin-bottom:2em;font-size:2em}.menu li{transition:transform .2s,color .2s;transform:translateY(0);display:inline-block;padding:2vw;color:#aaa}.menu li.active{transform:translateY(-20px);color:#000}.menu li .square{display:inline-block;margin:0 .3em;font-size:.5em;font-style:normal;vertical-align:middle}.menu li.active .square{animation:spin 1.5s infinite linear}.popup{position:fixed;top:10%;left:10%;border-radius:1em;border:2px #aaa solid;width:80vw;height:80vh;background:#fff;opacity:.9;font-size:.8em}.popup .container{width:100%;height:70vh;display:flex;justify-content:center;align-items:center}.popup .left{position:absolute;left:.2em;bottom:.2em;opacity:.6;transition:opacity .2s}.popup .left:hover{opacity:1}.popup .left img{width:1em;cursor:pointer}@keyframes spin{100%{transform:rotate(360deg)}}`;
var html = `<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script:400" rel="stylesheet"><div class="tooltip">방향키/esc/enter로 조작해주세요</div><div class="main flex-center"> <div class="opening hide"> <div class="title">제작</div><div class="descript">BANIP</div></div><div class="lobby hide"> <div class="title">UNCYMAZE</div><ul class="menu main"> <li class="start" data-target="start">게임시작</li><li class="howto" data-target="howto">게임방법</li><li class="ranking" data-target="ranking">랭킹</li><li class="exit" data-target="exit">게임종료</li></ul> <ul class="menu difficulty hide"> <li data-target="0">.쉬움</li><li data-target="1">.보통</li><li data-target="2">.어렵게</li></ul> <div class="popup hide"> <div class="container"> <div class="howto hide">미구현된 게임방법입니다.</div><div class="ranking hide">미구현된 랭킹입니다.</div></div><div class="left"><img src="https://static.miraheze.org/libertygamewiki/8/8c/Uncymaze_previous.png"/></div></div></div></div>`;
var css = `.tooltip{font-size:0.8em;}#bodyContent > *{padding:0;margin:0;font-family:'Nanum Pen Script';font-size:1.22em}.main,body,html{width:100%;height:100%}li,ul{list-style:none}.hide{display:none}.flex-center{display:flex;align-items:center;justify-content:center}.opening{text-align:center;line-height:1.2em}.title{text-align:center;margin-bottom:2em;font-size:2em}.menu li{transition:transform .2s,color .2s;transform:translateY(0);display:inline-block;padding:2vw;color:#aaa}.menu li.active{transform:translateY(-20px);color:#000}.menu li .square{display:inline-block;margin:0 .3em;font-size:.5em;font-style:normal;vertical-align:middle}.menu li.active .square{animation:spin 1.5s infinite linear}.popup{position:fixed;top:10%;left:10%;border-radius:1em;border:2px #aaa solid;width:80vw;height:80vh;background:#fff;opacity:.9;font-size:.8em}.popup .container{width:100%;height:70vh;display:flex;justify-content:center;align-items:center}.popup .left{position:absolute;left:.2em;bottom:.2em;opacity:.6;transition:opacity .2s}.popup .left:hover{opacity:1}.popup .left img{width:1em;cursor:pointer}@keyframes spin{100%{transform:rotate(360deg)}}`;
$("#bodyContent > *").fadeOut();
$("#bodyContent > *").fadeOut();
setTimeout(function(){ $.getScript("https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"); },500);
setTimeout(function(){ $.getScript("https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"); },500);
setTimeout(function(){ $.getScript("https://cdn.jsdelivr.net/gh/byongshintv/uncymaze/uncymaze.js"); },1000);
setTimeout(function(){ $.getScript("https://cdn.jsdelivr.net/gh/byongshintv/uncymaze@latest/uncymaze.min.js"); },1000);
setTimeout(function(){ $("#bodyContent").html(html+"<style>"+css+"</style>"); init(); },1500);
setTimeout(function(){ $("#bodyContent").html(html+"<style>"+css+"</style>"+rootcss); init(); },1500);
});
});

2020년 12월 24일 (목) 01:09 기준 최신판

$(".start").on("click",function(){
	$(".start").off("click")
	var rootcss = `<style>#bodyContent{ font-size: 1.8em; }</style>`
	var html = `<link href="https://fonts.googleapis.com/css?family=Nanum+Pen+Script:400" rel="stylesheet"><div class="tooltip">방향키/esc/enter로 조작해주세요</div><div class="main flex-center"> <div class="opening hide"> <div class="title">제작</div><div class="descript">BANIP</div></div><div class="lobby hide"> <div class="title">UNCYMAZE</div><ul class="menu main"> <li class="start" data-target="start">게임시작</li><li class="howto" data-target="howto">게임방법</li><li class="ranking" data-target="ranking">랭킹</li><li class="exit" data-target="exit">게임종료</li></ul> <ul class="menu difficulty hide"> <li data-target="0">.쉬움</li><li data-target="1">.보통</li><li data-target="2">.어렵게</li></ul> <div class="popup hide"> <div class="container"> <div class="howto hide">미구현된 게임방법입니다.</div><div class="ranking hide">미구현된 랭킹입니다.</div></div><div class="left"><img src="https://static.miraheze.org/libertygamewiki/8/8c/Uncymaze_previous.png"/></div></div></div></div>`;
	var css = `.tooltip{font-size:0.8em;}#bodyContent > *{padding:0;margin:0;font-family:'Nanum Pen Script';font-size:1.22em}.main,body,html{width:100%;height:100%}li,ul{list-style:none}.hide{display:none}.flex-center{display:flex;align-items:center;justify-content:center}.opening{text-align:center;line-height:1.2em}.title{text-align:center;margin-bottom:2em;font-size:2em}.menu li{transition:transform .2s,color .2s;transform:translateY(0);display:inline-block;padding:2vw;color:#aaa}.menu li.active{transform:translateY(-20px);color:#000}.menu li .square{display:inline-block;margin:0 .3em;font-size:.5em;font-style:normal;vertical-align:middle}.menu li.active .square{animation:spin 1.5s infinite linear}.popup{position:fixed;top:10%;left:10%;border-radius:1em;border:2px #aaa solid;width:80vw;height:80vh;background:#fff;opacity:.9;font-size:.8em}.popup .container{width:100%;height:70vh;display:flex;justify-content:center;align-items:center}.popup .left{position:absolute;left:.2em;bottom:.2em;opacity:.6;transition:opacity .2s}.popup .left:hover{opacity:1}.popup .left img{width:1em;cursor:pointer}@keyframes spin{100%{transform:rotate(360deg)}}`;
	$("#bodyContent > *").fadeOut();
	setTimeout(function(){ $.getScript("https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"); },500);
	setTimeout(function(){ $.getScript("https://cdn.jsdelivr.net/gh/byongshintv/uncymaze@latest/uncymaze.min.js"); },1000);
	setTimeout(function(){ $("#bodyContent").html(html+"<style>"+css+"</style>"+rootcss); init(); },1500);
});