머리 자르기/js: 두 판 사이의 차이
< 머리 자르기
백괴게임>Lemminkäinen 잔글 (일단 ㅓㅂ전업으로 설치하게 해야..) |
백괴게임>Lemminkäinen 잔글편집 요약 없음 |
||
6번째 줄: | 6번째 줄: | ||
{{#vardefine:name|haircut}} | {{#vardefine:name|haircut}} | ||
{{#vardefine:creat|Lemminkäinen}} | {{#vardefine:creat|Lemminkäinen}} | ||
{{#vardefine:version| | {{#vardefine:version|2.0}} | ||
{{#vardefine:descript|게임 진행에 필요합니다.}} | {{#vardefine:descript|게임 진행에 필요합니다.}} | ||
{{#vardefine:local|true}} | {{#vardefine:local|true}} | ||
14번째 줄: | 14번째 줄: | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
// 이부분에 코드 입력 // | // 이부분에 코드 입력 // | ||
/*Elements Load 시작 | /*Elements Load 시작*/ | ||
var cut_res_container=document.getElementById("cut_res_container"); | var cut_res_container=document.getElementById("cut_res_container"); | ||
var cut_container=document.getElementById("cut_container"); | var cut_container=document.getElementById("cut_container"); | ||
var | var cut_linehair=document.getElementById("cut_line"); | ||
var cuthair=document.getElementById("cuthair"); | var cuthair=document.getElementById("cuthair"); | ||
Load 끝*/ | /*Load 끝*/ | ||
var rand=function(r1,r2){ | var rand=function(r1,r2){ | ||
return Math.floor(Math.random()*r1)+r2; | return Math.floor(Math.random()*r1)+r2; | ||
32번째 줄: | 32번째 줄: | ||
cut_res_container.style.display="none"; | cut_res_container.style.display="none"; | ||
cut_container.style.height=cut_now+"px"; | cut_container.style.height=cut_now+"px"; | ||
cut_linehair.style.height=cut_line+"px"; | |||
if(cut_initial<=0) { alert('머리가 너무 짧아 자를 수 없습니다!'); throw("WTF your hair is already short"); } | if(cut_initial<=0) { alert('머리가 너무 짧아 자를 수 없습니다!'); throw("WTF your hair is already short"); } | ||
function cut_again(){ | function cut_again(){ | ||
45번째 줄: | 45번째 줄: | ||
cut_now=pos; | cut_now=pos; | ||
cut_speed=cut_now/cut_diff; | cut_speed=cut_now/cut_diff; | ||
cut_container.style.height=cut_now; | cut_container.style.height=cut_now+"px"; | ||
cuthair.innerHTML=cut_now; | cuthair.innerHTML=cut_now; | ||
} | } | ||
function cut_rescalc(pos){ | function cut_rescalc(pos){ | ||
document.getElementById("cuthair_info").style.display="none"; | |||
cut_container.style.display="none"; | cut_container.style.display="none"; | ||
document.getElementById("cut").style.display="none"; | document.getElementById("cut").style.display="none"; | ||
56번째 줄: | 56번째 줄: | ||
cut_result2=(100*(pos/cut_line)); | cut_result2=(100*(pos/cut_line)); | ||
document.getElementById("cut_result1").innerHTML=cut_result1; | document.getElementById("cut_result1").innerHTML=cut_result1; | ||
document.getElementById(" | document.getElementById("cut_result2").innerHTML=cut_result2; | ||
var cut_stories1=document.getElementsByClassName("cut_story"); | var cut_stories1=document.getElementsByClassName("cut_story"); | ||
var cut_stories2=document.getElementsByClassName("cuts_story"); | var cut_stories2=document.getElementsByClassName("cuts_story"); |
2018년 11월 9일 (금) 03:14 판
응? 이 간단한 게임을, 소스를 뜯어보면 아는 걸 왜 여기에 와서 묻나? 뭐, 알 게 뭐야.
혹시라도 로딩이 오래 걸리면 0으로 나누기나 그에 준하는 계산 작업을 하고 있을 수 있습니다. 그 전에 최신버전 정식판이면 애초에 그럴 리가...??!
그래도 없으리란 보장은 없으니.... 버그가 생기면 기타 사항 참고.
과정
- 처음 가위 애니메이션 시 cut_again을 불러와서 실행합니다. 가위가 딱 한 번만 일방통행하면 그게 게임입니까. 해당 함수는 애니메이션 무한 반복을 위해 만들었습미다.
- 이제 stop 지점(id cut)을 누르면 cut_calc를 불러옵니다. 자르는 거죠.
- 여기에서 님이 경계선 위쪽을 클릭했다는 걸 발견하면 cut_rescalc를 불러옵니다. 그럼 게임하던 거 죄다 숨기고 스토리 불러 옵니다.
cut_diff
id cut_diff 엘리먼트를 불러옵니다. 일단 0과 똑같거나 2보다 클 시 내 맘대로 0.5로 강제 지정합니다. 아, NaN일 때도 강제 지정합니다. 뻘짓하지 마십셔.
cut_diff는 대충 0.x에서 1 사이를 매우 권장합니다.
기타 사항
제가 괴겜에 잘 안 들어오니 버그가 있고 원인이 확실하면 직접 고쳐도 뭐라 하지는 않겠습니다만, 그 외의 수정은 전부 금지하고 있습니다.
// 이부분에 코드 입력 // /*Elements Load 시작*/ var cut_res_container=document.getElementById("cut_res_container"); var cut_container=document.getElementById("cut_container"); var cut_linehair=document.getElementById("cut_line"); var cuthair=document.getElementById("cuthair"); /*Load 끝*/ var rand=function(r1,r2){ return Math.floor(Math.random()*r1)+r2; } var cut_now=rand(400,600); var cut_line=rand(200,300); var cut_initial=cut_now-cut_line; var cdf=document.getElementById("cut_diff").innerHTML; var cut_diff=(cdf<=0 || isNaN(cdf) || cdf>2)?(0.5):(Number(cdf)); var cut_speed=cut_now/cut_diff; var cut_result1=0; var cut_result2=0; cut_res_container.style.display="none"; cut_container.style.height=cut_now+"px"; cut_linehair.style.height=cut_line+"px"; if(cut_initial<=0) { alert('머리가 너무 짧아 자를 수 없습니다!'); throw("WTF your hair is already short"); } function cut_again(){ $('#scissors').animate({ top:"100%" },cut_speed,'linear',function(){ $('#scissors').animate({ top:0 },cut_speed,'linear',function(){ cut_again() }); }); }//animate는 자스로 대체하려니 setInterval이나 setTimeout 등으로 해야 하는데 여어어엉 귀찮아서.. cut_again(); function cut_calc(pos){ if(pos<cut_line){ cut_rescalc(pos); return; } cut_now=pos; cut_speed=cut_now/cut_diff; cut_container.style.height=cut_now+"px"; cuthair.innerHTML=cut_now; } function cut_rescalc(pos){ document.getElementById("cuthair_info").style.display="none"; cut_container.style.display="none"; document.getElementById("cut").style.display="none"; cut_res_container.style.display="block"; cut_result1=(100*(1-(cut_now-cut_line)/cut_initial)); cut_result2=(100*(pos/cut_line)); document.getElementById("cut_result1").innerHTML=cut_result1; document.getElementById("cut_result2").innerHTML=cut_result2; var cut_stories1=document.getElementsByClassName("cut_story"); var cut_stories2=document.getElementsByClassName("cuts_story"); if(cut_result1===0){ cut_stories1[0].style.display="block"; document.getElementById('cuts_story').style.display="none"; } else if(cut_result1<90){ cut_stories1[1].style.display="block"; } else if(cut_result1<95){ cut_stories1[2].style.display="block"; } else if(cut_result1<98){ cut_stories1[3].style.display="block"; } else if(cut_result1<=100){ cut_stories1[4].style.display="block"; } /* story2 (cut_result2, cuts) */ if(cut_result2<90){ cut_stories2[0].style.display="block"; } else if(cut_result2<95){ cut_stories2[1].style.display="block"; } else if(cut_result2<98){ cut_stories2[2].style.display="block"; } else if(cut_result2<=100){ cut_stories2[3].style.display="block"; } } $('#cut').click(function(){ cut_calc($('#scissors').position().top ); });//addEventListener...그냥 생각하길 관두고 // 여기까지 코드 입력 //