[💬] 간단한 모바일 rpg꼠을 만들어보자(4)

[익명(222.121)]

이번에는 맵 크기를 더 늘리고 화면을 스크롤 하는걸 구현해 보자.

http://aaaga.dothome.co.kr/test/index.html

예제의 결과는 여기서 확인할 수 있음.

마찬가지로 main.js의 수정된 부분을 빨갛게 표시할게

enchant();

window.onload = function(){

var winsize = window.innerWidth/window.innerHeight;

var core = new Core(160*winsize.toFixed(2), 160);

core.preload ('img.png','map.png');

core.onload = function(){

core.rootScene.backgroundColor = 'yellow';

var label = new Label('안녕 세계!')

var sprite = new Sprite(16, 16);

sprite.image = core.assets['img.png'];

sprite.moveTo(16, 16);

sprite.frame = [0,0,0,0,1,1,1,1];

var controller0 = new Sprite(32, 32);

controller0.backgroundColor = 'black';

controller0.opacity = 0.2;

var controller1 = new Sprite(16, 16);

controller1.backgroundColor = 'black';

controller1.opacity = 0.3;

var map = new Map(16, 16);

map.image = core.assets['map.png'];

map.loadData([

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]); //맵 크기가 두배로 넓어짐 숫자를 바꿔서 맘대로 맵배치를 해봐도 좋음

map.collisionData = [

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0],

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]]; //맵 크기가 두배로 넓어짐 0은 지나갈수 없는곳 1은 지나갈수 있는곳

var movego ={};

var movend ={};

var angle = 0;

var toward = 0;

var tox = 0; //tox 라는 오브젝트를 만든다. 숫자를 나타냄

var toy = 0; //toy 라는 오브젝트를 만든다. 숫자를 나타냄

core.rootScene.on('touchstart', function(e){

movego.x = e.x;

movego.y = e.y;

core.rootScene.addChild(controller0);

core.rootScene.addChild(controller1);

});

core.rootScene.on('touchmove', function(e){

movend.x = e.x;

movend.y = e.y;

angle = Math.atan2(movego.x-movend.x,movego.y-movend.y);

if (-0.78539<angle && angle<0.78539) {toward = 1};

if (-2.35619<angle && angle<-0.78539) {toward = 2};

if (0.78539<angle && angle <2.35619) {toward = 3};

if (2.35619<angle && angle<3.14159 || -3.14159<angle && angle<-2.35619) {toward = 4}

});

core.rootScene.on('touchend', function(e){

toward = 0;

core.rootScene.removeChild(controller0);

core.rootScene.removeChild(controller1);

});

core.rootScene.on('enterframe', function(){

label.text = toward;

switch(toward){

case 0: break;

case 1: sprite.frame = [6,6,6,6,7,7,7,7];

if (map.hitTest(sprite.x, sprite.y-1)){sprite.moveBy(0,-1);}; break;

case 2: sprite.frame = [2,2,2,2,3,3,3,3];

if (map.hitTest(sprite.x+16, sprite.y)){sprite.moveBy(1,0);}; break;

case 3: sprite.frame = [4,4,4,4,5,5,5,5];

if (map.hitTest(sprite.x-1, sprite.y)){sprite.moveBy(-1,0);}; break;

case 4: sprite.frame = [0,0,0,0,1,1,1,1];

if (map.hitTest(sprite.x, sprite.y+16)){sprite.moveBy(0,1);}; break;

};

tox = Math.min((core.width) / 2 - sprite.x, 0); //tox 에다 화면을 반으로 나눈값에서 sprite의 x좌표값을 뺀값이랑 0을 비교해서 작은걸 집어넣는다.

toy = Math.min((core.height) / 2 - sprite.y, 0); //toy에다 화면을 반으로 나눈값에서 sprite의 y좌표값을 뺀값이랑 0을 비교해서 작은걸 집어넣는다.

tox = Math.max(core.width, tox + map.width) - map.width; //tox에 다시 화면의 가로크기랑 위에서 집어넣은 tox값에 맵전체크기의 가로값을 더한것중에 큰걸 선택해서 그 값에서 맵 가로크기만큼 뺀 수를 집어넣는다

toy = Math.max(core.height, toy + map.height) - map.height; //toy에 다시 화면의 세로크기랑 위에서 집어넣은 toy값에 맵전체크기의 세로값을 더한것중에 큰걸 선택해서 그 값에서 맵 가로크기만큼 뺀 수를 집어넣는다

core.rootScene.x = tox; //게임화면의 가로좌표를 tox로 옮긴다

core.rootScene.y = toy; //게임화면의 세로좌표를 toy로 옮긴다

controller0.moveTo(-tox +movego.x -16,-toy + movego.y-16); //controller0를 해당 좌표로 이동시킨다

controller1.moveTo(-tox +movend.x-8, -toy + movend.y-8); //controller1을 해당 좌표로 이동시킨다

});

core.rootScene.addChild(map);

core.rootScene.addChild(sprite);

core.rootScene.addChild(label);

};

core.start();

};

어때 잘 되가는거 같음? 메모장과 브라우저를 켜놓고 새로고침 해가면서

값을 바꾸고 저장하고 새로고침 이걸 반복하면

텍스트로 되어있어도 직관적으로 이해하기 쉬울거야

이 예제를 이것저것 바꿔가면서 테스트 하면서 이건 왜 이값일까를 고민해보면 좋아