U E D R , A S I H C RSS
ZeroWiki

2010 Java Script/역전재판

Difference between r1.8 and the current

@@ -3,10 +3,17 @@
<html>
<head>
<title>역전재판</title>
<link rel='stylesheet' type='text/css' href='style.css' media='all'>
</head>
<body>
<div id='basewindow'>
그냥 배경화면임
 
<div id='chugoong'>추궁하장</div>
<div id='jesi'>제시하장</div>
<div id='item_box'><span class='keyword'><br><br><br><br><br>hello</span></div>
<div id='item_pic'></div>
<div id='item_text'></div>
<!--<div id='human'></div>-->


<div id='name'>
@@ -38,13 +45,21 @@
#text { /*대화창*/
width : 460px;
height : 75px;
background-color : blue;
background-color : royalblue;
padding : 10px;
position : absolute;
top : 225px;
left : 0px;
}
#human { /*사람 그림이 나올 화면*/
width : 256px;
height : 285px;
background-color : olive;
position : absolute;
top : 35px;
left : 116px;
}
#name { /*사람이름(텍스트 위에)*/
width : 90px;
@@ -55,12 +70,43 @@
left : 0px;
}
#chugoong { /*좌상단의 추궁하기*/
width : 128px;
height : 32px;
background-color : gray;
position : absolute;
top : 0px;
left : 0px;
}
#jesi{ /*우상단의 제시하기*/
width : 128px;
height : 32px;
background-color : gray;
position : absolute;
top : 0px;
left : 352px;
}
#itembox { /*제시하기를 눌렀을때 나오는 아이템 목록*/
#item_box { /*제시하기를 눌렀을때 나오는 아이템 목록*/ 
width : 480px;
height : 150px;
background-color : green;
position : absolute;
top : 35px;
}
#itempic { /*아이템 목록 안의 아이템 그림*/
#item_pic { /*아이템 목록 안의 아이템 그림*/ 
width : 130px;
height : 130px;
background-color : transparent;
position : absolute;
top : 45px;
left : 10px;
}
#item_text { /*아이템 설명*/
width : 280px;
height : 130px;
background-color : skyblue;
position : absolute;
top : 45px;
left : 170px;
}
span.text { /*대화창의 글자 속성을 지정*/
color : white;
@@ -72,234 +118,84 @@
color : red;
}
span.date { /*날짜와 장소 출력할 때의 속성*/
color : yellow;
}
}}}

= ShortCut =
}}}
= 대사 파일을 첨부한 HTML = 
위의 HTML파일에다가 JavaScript를 더한것.
{{{
/**
* http://www.openjs.com/scripts/events/keyboard_shortcuts/
* Version : 2.01.B
* By Binny V A
* License : BSD
*/
shortcut = {
'all_shortcuts':{},//All the shortcuts are stored in this array
'add': function(shortcut_combination,callback,opt) {
//Provide a set of default options
var default_options = {
'type':'keydown',
'propagate':false,
'disable_in_input':false,
'target':document,
'keycode':false
}
if(!opt) opt = default_options;
else {
for(var dfo in default_options) {
if(typeof opt[dfo] == 'undefined') opt[dfo] = default_options[dfo];
}
}
 
var ele = opt.target;
if(typeof opt.target == 'string') ele = document.getElementById(opt.target);
var ths = this;
shortcut_combination = shortcut_combination.toLowerCase();
 
//The function to be called at keypress
var func = function(e) {
e = e || window.event;
 
if(opt['disable_in_input']) { //Don't enable shortcut keys in Input, Textarea fields
var element;
if(e.target) element=e.target;
else if(e.srcElement) element=e.srcElement;
if(element.nodeType==3) element=element.parentNode;
 
if(element.tagName == 'INPUT' || element.tagName == 'TEXTAREA') return;
}
 
//Find Which key is pressed
if (e.keyCode) code = e.keyCode;
else if (e.which) code = e.which;
var character = String.fromCharCode(code).toLowerCase();
 
if(code == 188) character=","; //If the user presses , when the type is onkeydown
if(code == 190) character="."; //If the user presses , when the type is onkeydown
 
var keys = shortcut_combination.split("+");
//Key Pressed - counts the number of valid keypresses - if it is same as the number of keys, the shortcut function is invoked
var kp = 0;
 
//Work around for stupid Shift key bug created by using lowercase - as a result the shift+num combination was broken
var shift_nums = {
"`":"~",
"1":"!",
"2":"@",
"3":"#",
"4":"$",
"5":"%",
"6":"^",
"7":"&",
"8":"*",
"9":"(",
"0":")",
"-":"_",
"=":"+",
";":":",
"'":"\"",
",":"<",
".":">",
"/":"?",
"\\":"|"
}
//Special Keys - and their codes
var special_keys = {
'esc':27,
'escape':27,
'tab':9,
'space':32,
'return':13,
'enter':13,
'backspace':8,
 
'scrolllock':145,
'scroll_lock':145,
'scroll':145,
'capslock':20,
'caps_lock':20,
'caps':20,
'numlock':144,
'num_lock':144,
'num':144,
 
'pause':19,
'break':19,
 
'insert':45,
'home':36,
'delete':46,
'end':35,
 
'pageup':33,
'page_up':33,
'pu':33,
 
'pagedown':34,
'page_down':34,
'pd':34,
 
'left':37,
'up':38,
'right':39,
'down':40,
 
'f1':112,
'f2':113,
'f3':114,
'f4':115,
'f5':116,
'f6':117,
'f7':118,
'f8':119,
'f9':120,
'f10':121,
'f11':122,
'f12':123
}
 
var modifiers = {
shift: { wanted:false, pressed:false},
ctrl : { wanted:false, pressed:false},
alt : { wanted:false, pressed:false},
meta : { wanted:false, pressed:false} //Meta is Mac specific
};
 
if(e.ctrlKey) modifiers.ctrl.pressed = true;
if(e.shiftKey) modifiers.shift.pressed = true;
if(e.altKey) modifiers.alt.pressed = true;
if(e.metaKey) modifiers.meta.pressed = true;
 
for(var i=0; k=keys[i],i<keys.length; i++) {
//Modifiers
if(k == 'ctrl' || k == 'control') {
kp++;
modifiers.ctrl.wanted = true;
 
} else if(k == 'shift') {
kp++;
modifiers.shift.wanted = true;
 
} else if(k == 'alt') {
kp++;
modifiers.alt.wanted = true;
} else if(k == 'meta') {
kp++; 
modifiers.meta.wanted = true;
} else if(k.length > 1) { //If it is a special key
if(special_keys[k] == code) kp++; 
 
} else if(opt['keycode']) {
if(opt['keycode'] == code) kp++;
 
} else { //The special keys did not match
if(character == k) kp++;
else {
if(shift_nums[character] && e.shiftKey) { //Stupid Shift key bug created by using lowercase
character = shift_nums[character];
if(character == k) kp++;
}
}
}
}
 
if(kp == keys.length &&
modifiers.ctrl.pressed == modifiers.ctrl.wanted &&
modifiers.shift.pressed == modifiers.shift.wanted &&
modifiers.alt.pressed == modifiers.alt.wanted &&
modifiers.meta.pressed == modifiers.meta.wanted) {
callback(e); 
 
if(!opt['propagate']) { //Stop the event
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = false;
 
//e.stopPropagation works in Firefox.
if (e.stopPropagation) { 
e.stopPropagation();
e.preventDefault();
}
return false;
}
}
}
this.all_shortcuts[shortcut_combination] = {
'callback':func,
'target':ele,
'event': opt['type']
};
//Attach the function with the event
if(ele.addEventListener) ele.addEventListener(opt['type'], func, false);
else if(ele.attachEvent) ele.attachEvent('on'+opt['type'], func);
else ele['on'+opt['type']] = func;
},
 
//Remove the shortcut - just specify the shortcut and I will remove the binding
'remove':function(shortcut_combination) {
shortcut_combination = shortcut_combination.toLowerCase();
var binding = this.all_shortcuts[shortcut_combination];
delete(this.all_shortcuts[shortcut_combination])
if(!binding) return;
var type = binding['event'];
var ele = binding['target'];
var callback = binding['callback'];
 
if(ele.detachEvent) ele.detachEvent('on'+type, callback);
else if(ele.removeEventListener) ele.removeEventListener(type, callback, false);
else ele['on'+type] = false;
<;html>
<;head>
&lt;title>역전재판</title>
<link rel='stylesheet' type='text/css' href='style.css' media='all'>
<;!--여기서 부터 첨가한 부분.-->
<;SCRIPT Language="JavaScript">
&lt;!--
contents=new Array(); //대사 내용이 들어있는 javascript파일 안에 있는 배열의 이름.
i=0;
function changetext(){ // 글자가 나오는 text부분에 내용을 바꾸는 함수.
document.getElementById('text').innerHTML = contents[i]
i++
}
}
--></Script>
<script language="javascript" SRC="./contents.js"></script> //대사 내용을 넣은 javascript파일('contents.js')을 첨부.
<!--여기까지-->
</head>
<body>
<div id='basewindow'>
그냥 배경화면임
<div id='chugoong'>추궁하장</div>
<div id='jesi'>제시하장</div>
<div id='item_box'></div>
<div id='item_pic'></div>
<div id='item_text'></div>
 
<div id='name'>
이름임
</div>
<div id='text' Onclick="changetext()">
글자가 나오는 화면임. 혼잣말은
<span class='think'>(span 을 사용했음)</span><br>
키워드는 <span class='keyword'>키워드!!</span>요렇게 ㅎㅎ
</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
에뮬레이터 화면크기의 x2 임.
</body>
</html>
}}}
= 대사파일 (contents.js)=
{{{
contents[0] = "내용1"
contents[1] = "내용2"
contents[2] = "내용3"
contents[3] = "내용4"
contents[4] = "내용5"
contents[5] = "내용6"
contents[6] = "내용7"
contents[7] = "내용8"
contents[8] = "내용9"
contents[9] = "내용10"
contents[10] = "내용11"
contents[11] = "내용12"
contents[12] = "내용13"
contents[13] = "내용14"
contents[14] = "내용15"
contents[15] = "내용16"
contents[16] = "내용17"
contents[17] = "내용18"
contents[18] = "내용19"
contents[19] = "내용20"
contents[20] = "내용21"
.
.
.
}}}
 
= ShortCut =
* [http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js]
----
[2010JavaScript]

html 파일 

<html>
<head>
<title>역전재판</title>
<link rel='stylesheet' type='text/css' href='style.css' media='all'>
</head>
<body>
<div id='basewindow'>

<div id='chugoong'>추궁하장</div>
<div id='jesi'>제시하장</div>
<div id='item_box'><span class='keyword'><br><br><br><br><br>hello</span></div>
<div id='item_pic'></div>
<div id='item_text'></div>
<!--<div id='human'></div>-->

	
	<div id='name'>
	이름임
	</div>
	<div id='text'>
	글자가 나오는 화면임. 혼잣말은
	<span class='think'>(span 을 사용했음)</span><br>
	키워드는 <span class='keyword'>키워드!!</span>요렇게 ㅎㅎ
	
	</div>
</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
에뮬레이터 화면크기의 x2 임.
</body>
</html>

css 파일 

#basewindow {		/*기본 화면*/
width : 480px;
height : 320px;
background-color : black;
color : white;
position : absolute;
top : 0px;
left : 0px;
}
#text {		/*대화창*/
width : 460px;
height : 75px;
background-color : royalblue;
padding : 10px;
position : absolute;
top : 225px;
left : 0px;

}
#human {		/*사람 그림이 나올 화면*/
width : 256px;
height : 285px;
background-color : olive;
position : absolute;
top : 35px;
left : 116px;

}
#name {		/*사람이름(텍스트 위에)*/
width : 90px;
height : 25px; 
background-color : gray;
position : absolute;
top : 200px;
left : 0px;
}
#chugoong {		/*좌상단의 추궁하기*/
width : 128px;
height : 32px; 
background-color : gray;
position : absolute;
top : 0px;
left : 0px;
}
#jesi{		/*우상단의 제시하기*/
width : 128px;
height : 32px; 
background-color : gray;
position : absolute;
top : 0px;
left : 352px;
}
#item_box {		/*제시하기를 눌렀을때 나오는 아이템 목록*/
width : 480px;
height : 150px; 
background-color : green;
position : absolute;
top : 35px;
}
#item_pic {		/*아이템 목록 안의 아이템 그림*/
width : 130px;
height : 130px; 
background-color : transparent;
position : absolute;
top : 45px;
left : 10px;
}
#item_text {		/*아이템 설명*/
width : 280px;
height : 130px; 
background-color : skyblue;
position : absolute;
top : 45px;
left : 170px;
}
span.text {		/*대화창의 글자 속성을 지정*/
color : white;
}
span.think {		/*대화 중 주인공이 혼자 말할때의 속성을 지정*/
color : #FB84E9;
}
span.keyword {		/*키워드의 속성을 지정*/
color : red;
}
span.date { /*날짜와 장소 출력할 때의 속성*/
color : yellow;
}

대사 파일을 첨부한 HTML

위의 HTML파일에다가 JavaScript를 더한것.
<html>
 <head>
  <title>역전재판</title>
  <link rel='stylesheet' type='text/css' href='style.css' media='all'>
  <!--여기서 부터 첨가한 부분.-->
  <SCRIPT Language="JavaScript">
   <!--
    contents=new Array(); //대사 내용이 들어있는 javascript파일 안에 있는 배열의 이름.
	i=0;
	function changetext(){ // 글자가 나오는 text부분에 내용을 바꾸는 함수.
	 document.getElementById('text').innerHTML = contents[i]
	 i++
	}
   --></Script>
  <script language="javascript" SRC="./contents.js"></script> //대사 내용을 넣은 javascript파일('contents.js')을 첨부.
  <!--여기까지-->
 </head>
 <body>
  <div id='basewindow'>
  그냥 배경화면임
  <div id='chugoong'>추궁하장</div>
  <div id='jesi'>제시하장</div>
  <div id='item_box'></div>
  <div id='item_pic'></div>
  <div id='item_text'></div>

	
  	<div id='name'>
	이름임
	</div>
	<div id='text' Onclick="changetext()">
	글자가 나오는 화면임. 혼잣말은
	<span class='think'>(span 을 사용했음)</span><br>
	키워드는 <span class='keyword'>키워드!!</span>요렇게 ㅎㅎ
	
	</div>
  </div>
  <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  에뮬레이터 화면크기의 x2 임.
  </body>
</html>
= 대사파일 (contents.js)=
contents[0] = "내용1"
contents[1] = "내용2"
contents[2] = "내용3"
contents[3] = "내용4"
contents[4] = "내용5"
contents[5] = "내용6"
contents[6] = "내용7"
contents[7] = "내용8"
contents[8] = "내용9"
contents[9] = "내용10"
contents[10] = "내용11"
contents[11] = "내용12"
contents[12] = "내용13"
contents[13] = "내용14"
contents[14] = "내용15"
contents[15] = "내용16"
contents[16] = "내용17"
contents[17] = "내용18"
contents[18] = "내용19"
contents[19] = "내용20"
contents[20] = "내용21"
.
.
.

ShortCut

Valid XHTML 1.0! Valid CSS! powered by MoniWiki
last modified 2021-02-07 05:22:11
Processing time 0.0698 sec