Winds Diary

미로게임(HTML5 + Javascript)

화살표키로 오각형을 이동 시킨다.
(화살표키로 오각형이 움직이지 않을 경우 여기를 클릭한 뒤 다시 해보자.)
미로를 새로 그리려면 우선 '미로 지우기' 버튼을 누르고 난 뒤
화면위에서 마우스 왼쪽 버튼을 클릭 드래그한 뒤 손을 떼면 벽이 그려진다.
다 그리고 난 뒤 이름을 쓰고 '미로 저장' 버튼을 클릭하면 그린 미로가 저장된다.
자신이 작성하고 저장한 미로를 불러올 때는
저장할 때 지정한 이름을 쓰고 '미로 불러오기'를 클릭하면 된다.

책보고 HTML5 + javascript로 미로게임 따라하기.
시작시 기본 미로 띄우기, 미로 지우기 기능 추가.

키보드 이벤트 적용하기:
window.addEventListener('keydown',getKeyAndMove,false);

function getKeyAndMove(ev){ //키보드 입력처리
	var keyCode;
	if(ev==null){
		keyCode=window.event.keyCode; //눌려진 키코드 받아오기
		window.event.preventDefault(); //키의 브라우저 기본동작 중지하기
	}else{ 
		keyCode=event.keyCode;
		event.preventDefault();
	}
	switch(keyCode){
		case 37: myPent.moveIt(-unit, 0); break; //왼쪽 화살표
		case 38: myPent.moveIt(0, -unit); break; //위쪽
		case 39: myPent.moveIt(unit, 0); break; //오른쪽
		case 40: myPent.moveIt(0, unit); break; //아래쪽
		//키눌림 감시 중단
		default: window.removeEventListener('keydown',getKeyAndMove,false);
	}
}

local Storage에 저장,불러오기:
localStorage.setItem("saveName",oldData); //저장하기
sWalls=localStorage.getItem("saveName"); //저장소에서 불러오기
localStorage.removeItem("saveName"); //지우기

크롬의 경우 설정 및 관리메뉴-도구-개발자 도구의 Resources 탭을 클릭한 뒤 아래쪽 Local Storage-Local Files 부분을 보면 Local Storage에 저장된 파일들의 이름과 내용이 나오고 수정도 가능하다.

13/03/23 토