머리 자르기/js: 두 판 사이의 차이

리버티게임, 모두가 만들어가는 자유로운 게임
백괴게임>Lemminkäinen
잔글 (너무 커도 문제가 생기는...)
잔글 ("머리 자르기/js" 문서를 보호했습니다: 많이 쓰이는 틀이나 코드 ([편집=자동 인증된 사용자만 허용] (무기한) [이동=자동 인증된 사용자만 허용] (무기한)))
 
(다른 사용자 한 명의 중간 판 6개는 보이지 않습니다)
6번째 줄: 6번째 줄:
{{#vardefine:name|haircut}}
{{#vardefine:name|haircut}}
{{#vardefine:creat|Lemminkäinen}}
{{#vardefine:creat|Lemminkäinen}}
{{#vardefine:version|1.0}}
{{#vardefine:version|2.0}}
{{#vardefine:descript|게임 진행에 필요합니다.}}
{{#vardefine:descript|게임 진행에 필요합니다.}}
{{#vardefine:local|true}}
{{#vardefine:local|true}}
14번째 줄: 14번째 줄:
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
  // 이부분에 코드 입력 //
  // 이부분에 코드 입력 //
var cut_now=$('#cuthair').text();
/*Elements Load 시작*/
var cut_line=$('#cutline').text();
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 cut_initial=cut_now-cut_line;
var cut_diff=($('#cut_diff').text()==0 || isNaN($('#cut_diff').text()) || $('cut_diff').text()>2)?(0.5):($('#cut_diff').text());
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_speed=cut_now/cut_diff;
var cut_result1=0; var cut_result2=0;
var cut_result1=0; var cut_result2=0;
$('#cut_res_container').hide();
cut_res_container.style.display="none";
$('#cut_container').height(cut_now);
cut_container.style.height=cut_now+"px";
$("#cut_line").height(cut_line);
cut_linehair.style.height=cut_line+"px";
if(cut_initial<=0) { alert('실행할 없는 코드입니다.'); return; }
if(cut_initial<=0) { alert('머리가 너무 짧아 자를 없습니다!'); throw("WTF your hair is already short"); }
function cut_again(){
function cut_again(){
$('#scissors').animate({ top:"100%" },cut_speed,'linear',function(){ $('#scissors').animate({ top:0 },cut_speed,'linear',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();
cut_again();
function cut_calc(pos){
function cut_calc(pos){
35번째 줄: 45번째 줄:
cut_now=pos;
cut_now=pos;
cut_speed=cut_now/cut_diff;
cut_speed=cut_now/cut_diff;
$("#cut_container").height(cut_now);
cut_container.style.height=cut_now+"px";
$("#cuthair").text(cut_now);
cuthair.innerHTML=cut_now;
}
}
function cut_rescalc(pos){
function cut_rescalc(pos){
$('#cuthair_info').hide();
        document.getElementById("cuthair_info").style.display="none";
$('#cut_container').hide();
cut_container.style.display="none";
$('#cut').hide();
document.getElementById("cut").style.display="none";
$('#cut_res_container').show();
cut_res_container.style.display="block";
cut_result1=(100*(1-(cut_now-cut_line)/cut_initial));
cut_result1=(100*(1-(cut_now-cut_line)/cut_initial));
cut_result2=(100*(pos/cut_line));
cut_result2=(100*(pos/cut_line));
$('#cut_result1').text(cut_result1);
document.getElementById("cut_result1").innerHTML=cut_result1;
$('#cut_result2').text(cut_result2);
document.getElementById("cut_result2").innerHTML=cut_result2;
if(cut_result1===0){ $('#cut_story0').show(); $('#cuts_story').hide(); }
var cut_stories1=document.getElementsByClassName("cut_story");
else if(cut_result1<90){ $('#cut_story1').show(); }
var cut_stories2=document.getElementsByClassName("cuts_story");
else if(cut_result1<95){ $('#cut_story2').show(); }
if(cut_result1===0){ cut_stories1[0].style.display="block"; document.getElementById('cuts_story').style.display="none"; }
else if(cut_result1<98){ $('#cut_story3').show(); }
else if(cut_result1<90){ cut_stories1[1].style.display="block"; }
else if(cut_result1<=100){ $('#cut_story4').show(); }
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) */
/* story2 (cut_result2, cuts) */
if(cut_result2<90){ $('#cuts_story1').show(); }
if(cut_result2<90){ cut_stories2[0].style.display="block"; }
else if(cut_result2<95){ $('#cuts_story2').show(); }
else if(cut_result2<95){ cut_stories2[1].style.display="block"; }
else if(cut_result2<98){ $('#cuts_story3').show(); }
else if(cut_result2<98){ cut_stories2[2].style.display="block"; }
else if(cut_result2<=100){ $('#cuts_story4').show(); }
else if(cut_result2<=100){ cut_stories2[3].style.display="block"; }
}
}
$('#cut').click(function(){ cut_calc($('#scissors').position().top ); });
$('#cut').click(function(){ cut_calc($('#scissors').position().top ); });//addEventListener...그냥 생각하길 관두고
  // 여기까지 코드 입력 //
  // 여기까지 코드 입력 //
</syntaxhighlight>
</syntaxhighlight>

2024년 7월 12일 (금) 10:41 기준 최신판

요령 => 아래 변수들의 첫번째 인자들을 내용에 맞게 자르고 붙여넣어주세요

!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 윗부분은 만지지 마시오 절대로!!!!!!!!!!!!!!!!!






!!!!!!!!!!!!!!!! 플러그인 정보 입력 구간 끝 아래는 만지지 마시오!!!!!!!!!!!!!!!!!

응? 이 간단한 게임을, 소스를 뜯어보면 아는 걸 왜 여기에 와서 묻나? 뭐, 알 게 뭐야.

혹시라도 로딩이 오래 걸리면 0으로 나누기나 그에 준하는 계산 작업을 하고 있을 수 있습니다. 그 전에 최신버전 정식판이면 애초에 그럴 리가...??!

그래도 없으리란 보장은 없으니.... 버그가 생기면 기타 사항 참고.

과정

  1. 처음 가위 애니메이션 시 cut_again을 불러와서 실행합니다. 가위가 딱 한 번만 일방통행하면 그게 게임입니까. 해당 함수는 애니메이션 무한 반복을 위해 만들었습미다.
  2. 이제 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...그냥 생각하길 관두고
 // 여기까지 코드 입력 //