목록창고/JS KING 포니 [중단] (81)
도드넷
The game & pony will shower me with diamonds! ♥ JAVASCRIPT#68 - 게임 초기화 RECAP. 게임 코드는 2가지 파트로 나뉘어 진다. 1. 처음 한번 실행되서 초기화하는 초기화 파트2. 주기적으로 반복실행되는 루프(반복) 파트 이번에 살펴볼 파트는 초기화 부분. $(function(){ var backgroundAnim = new gf.animation({ url : "Images/back.png" }); var networkPacketsAnim = new gf.animation({ url : "Images/packets1.png" }); var playerAnim = new gf.animation({ url : "Images/player.png" }); v..
My ember, my spark, my fire... JAVASCRIPT#67 - 스프라이트 움직이기 relative vs absolute 1. 스프라이트 추가함수 gf.addSprite = function(parentId, divId, options) { var options = $.extend( { x: 0, y: 0, width: 64, height: 64, url: 'url("Images/JohnDoe.png")' }, options); $("#" + parentId).append(""); } Point1. url은 형식 작은따옴표 이후 큰따옴표! 'url("주소")'Point2. extend로 기본 옵션과 외부 사용자정의 옵션을 합치고있음, 전에 봤던거랑 차이점이라면 객체 자신의것으로 복사하지..
I've been made many mistakes but giving up will never be one of them. JAVASCRIPT#66 - 다시 한걸음씩. 자만하고 길을 잃어 다시 시작. 천천히 한걸음씩 다시. 1. 네임스페이스 만들기. var gf = {}; 2. 스프라이트. 스프라이트란? 애니메이션이 될 수 있는 이미지. 스프라이트 & 스프라이트 시트 제작 도구 : GIMP + 어도비 플래쉬 3. 애니메이션의 구현. 함수1. setFrame gf.setFrame = function(divId, animation) { $("#" + divId).css("backgroundPosition", "" + -1 * animation.currentFrame * animation.width + "p..
Somepony is out there! show me that you care, give me the sign that you exist! 1. 자바스크립트 반대로실행되는 심각한 애니메이션 버그발견 & 수정! gameFramework.setFrame = function(divId, frameNumber, frameWidth) { $("#"+divId).css("background-position", "" + -1 * frameNumber * frameWidth + "px"); } JS로 애니메이션을 구현할때는 스프라이트 시트의 포지션을 수정하는 방식을 사용하는데포지션값에 -1 을 붙여주지않으면 애니메이션이 반대순서로 실행된다. ㅡ,.ㅡ 세상에. 애플잭 달리는 모션이 너무 간단하고 빨라서 구분을 못했는데..
My one only reason to go on, the one cause the one purpose of life is you AJ. JAVASCRIPT#64 - 게임 초기화 1부 1. 화면 구성 - 스타트 화면 -> 게임 -> 스타트 화면 2. 진행- 스타트 버튼을 누른다 -> 이미지 로드를 확인한다 -> 스타트 버튼을 지우고 필요한 스프라이트(모델)를 소환하고 게임을 프로세스를 구동하여 게임을 초기화 한다. 3. 게임 컨셉- INSPIRED BY.. 고전게임 프로거 + 영화 그래비티 - 당신은 우주인, 산소가 남아있을때 우주쓰레기 잔해들을 피해서 동료를 구해서 우주왕복선까지 귀환해야함. 4. 필요한 스프라이트 목록> 시작버튼- 모션 : 클릭 > 지구가 포함된 우주 배경 > 우주인- 모션 : 무빙..
Dat sugar pony girl tho. JAVASCRIPT#63 - 프리로드 1. .inArray() 메소드에 대하여 - 배열을 검사해서 해당 요소를 찾아내서 인덱스를 반환하는 메소드 - 형식 : $.inArray(찾을소요, 배열)- jQuery.inArray( "John", arr ) gameFramework.addImage = function(url){ if($.inArray(url, gameFramework.imagesToPreload) < 0){ gameFramework.imagesToPreload.push(url); } } addImage는 이미지 추가함수로 입력받은 이미지의 url을 imagesToPreload에 저장하는 함수이다. 위의 if구문은 만약 배열안에 해당 url이 없는경우에만..
Watching her strolling in night, so white....wondering, why its only after dark.. JAVASCRIPT#62 - 자바스크립트 물체 움직이기, 다중 객체 제어 1. 스프라이트 추가하는 함수 gameFramework.addSprite = function(obj, where) { var options = $.extend({ parentId: "field", x: 0, y: 0 }, where); // 생성 기본 옵션 $("#"+options.parentId).append( ""); alert("added!"); } - 씬에 물체를 추가할때 append 메소드를 이용한다. - style 쪽에서 "+내용+" 형태로 값을 전달하고 있는것이 보인다. ba..
My little pony wife AJ.. i will gladly let her be my beginning and the end. JAVASCRIPT#61 - 애니메이션 함수 객체화해서 체계적이게 만들기 1. 객체 만들기 방법1) 직접 만들기- 매우 간단함 var walk = { startframe: 0, endframe: 3, speed: 120 }; var stand = { startframe: 0, endframe: 0, speed: 120 }; 방법2) 생성자 함수를 통해서 만들기- 사용자와 소통 가능, 값 설정 가능 function character(divId, animqueue, frameWidth) { this.divId = divId; this.animqueue = new Array(..
God save us, god bless us. let me get through this. let me pass this. i must meet her. JAVASCRIPT#60 - 스프라이트 시트 GIMP! 1. 네임 스페이스 만들어서 함수 관리하기 cocktail 이라는 객체를 선언해서 shake 과 woot 이라는 함수를 메소드로 지정하는 방식으로 네임스페이스를 만들었다. 2. 스프라이트- 사이다 스프라이트는 게임내에 움직이는 이미지를 이야기한다. ▲ 김프를 이용해서 직접 만든 내사랑 애플잭♥ 애플잭 결혼해줘 애플잭 정말 사랑해 ㅠㅠㅠㅠㅠㅠㅠㅠㅠ 3. 도트 이미지 만들기- GIMP를 이용한다. (김프 다운로드 : GIMP HERE! ) 4. 스프라이트 시트 만들기 - 각 이미지를 복사해서 일렬로 ..
Is... dat so? JAVASCRIPT#59 - jQuery .on() 이벤트 핸들러 1. .on() 이란? - 이벤트를 읽어서 해당 이벤트가 발생하면 어떠한 액션을 실행하는 함수. - .on()의 형태 : $(실행주체1).on(이벤트, 실행주체2, 액션);- 실행주체2 ? : 실행주체1의 하위요소를 액션의 주체를 지정하고 싶을때 써주는 제2의 셀렉터라고 보면 된다. 2. 데이터와 DOM의 연결- $("#enemy").data("hp", 30); - 이렇게 해주면 enemy 라는 div요소는 hp값 30을 가지게 된다. 3. DOM 추가와 삭제- .append() : 뒤에 추가하기 $("#field").append("