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

[익명(222.121)]

이번에는 초간단 아이템 획득이랑 몬스터랑 전투를 구현해봄

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

이번 예제 결과물은 여기를 클릭하면 볼수 있음

똑같이 변경된 부분을 빨갛게 표시해서 설명해 줄게

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]];

var movego ={};

var movend ={};

var angle = 0;

var toward = 0;

var tox = 0; 

var toy = 0;

var item = {count: 0};  //item이라는 오브젝트를 만들고 그안에 count속성을 추가

var mon = {}; // mon이라는 오브젝트를 만듬. 속성을 가지고있음.

var hp = 10; // hp라는 오브젝트에 숫자를 입력함 초기값은 10

var box0 = new Sprite(16, 16); //box0 이라는 오브젝트를 생성 그림임 사이즈는 16.16

box0.image = core.assets['map.png']; //box0의 파일을 지정

box0.frame =23; // box0의 그림번호를 지정

box0.moveTo (80, 80); //box0의 위치를 지정

var box1 = new Sprite(16, 16); //box1 이라는 오브젝트를 생성 그림임 사이즈는 16.16

box1.image = core.assets['map.png']; //box1의 파일을 지정

box1.frame =23; // box1의 그림번호를 지정

box1.moveTo (160, 160);  //box1의 위치를 지정

var mon0 = new Sprite(16, 16); //mon0 이라는 오브젝트를 생성 그림임 사이즈는 16.16

mon0.image = core.assets['img.png']; //mon0의 파일을 지정

mon0.frame =[16,16,17,17,18,18]; // mon0의 그림번호를 지정

mon0.moveTo (192, 80);  //mon0의 위치를 지정

var mon1 = new Sprite(16, 16); //mon1 이라는 오브젝트를 생성 그림임 사이즈는 16.16

mon1.image = core.assets['img.png']; //mon1의 파일을 지정

mon1.frame =[16,16,17,17,18,18]; // mon1의 그림번호를 지정

mon1.moveTo (64, 192);  //mon1의 위치를 지정

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 = '아이템 ' + item.count + '개' +'<br>체력 '+hp; //label의 텍스트 내용을 해당 내용으로 변경

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); 

toy = Math.min((core.height) / 2 - sprite.y, 0); 

tox = Math.max(core.width, tox + map.width) - map.width; 

toy = Math.max(core.height, toy + map.height) - map.height; 

core.rootScene.x = tox; 

core.rootScene.y = toy; 

controller0.moveTo(-tox +movego.x -16,-toy + movego.y-16);

controller1.moveTo(-tox +movend.x-8, -toy + movend.y-8);

label.moveTo(-core.rootScene.x, -core.rootScene.y) //label이 게임화면을 따라오게 설정

if(box0.x-16 <= sprite.x && sprite.x <box0.x+16 && box0.y-16 <= sprite.y && sprite.y <box0.y+16){ //sprite의 좌표가 지정된 위치에 올 경우 {}안의 내용을 실행함 {가 열려있는것에 주의

if(!item.box0){ //item.box0이라는 값이 지정되지 않았을때 {}안의 내용을 실행 {가 열려있는것에 주의

item.count++ // item.count 값을 1더한다

item.box0 =1; // item.box0에 1이라는 값을 입력한다.

core.rootScene.removeChild(box0); //box0을 보이지 않게 한다.

}; //if(!item.box0){를 닫는 괄호

}; //if(box0.x-16...box0.y+16){ 를 닫는 괄호

if(box1.x-16 <= sprite.x && sprite.x <box1.x+16 && box1.y-16 <= sprite.y && sprite.y <box1.y+16){ //sprite의 좌표가 지정된 위치에 올 경우 {}안의 내용을 실행함 {가 열려있는것에 주의

if(!item.box1){ //item.box1이라는 값이 지정되지 않았을때 {}안의 내용을 실행 {가 열려있는것에 주의

item.count++ // item.count 값을 1더한다

item.box1 =1; // item.box1에 1이라는 값을 입력한다.

core.rootScene.removeChild(box1); //box1을 보이지 않게 한다.

};  //if(!item.box1){를 닫는 괄호

}; //if(box1.x-16...box1.y+16){ 를 닫는 괄호

if(mon0.x-16 <= sprite.x && sprite.x <mon0.x+16 && mon0.y-16 <= sprite.y && sprite.y <mon0.y+16){ //sprite의 좌표가 지정된 위치에 올 경우 {}안의 내용을 실행함 {가 열려있는것에 주의

if(!mon.mon0){  //mon.mon0이라는 값이 지정되지 않았을때 {}안의 내용을 실행 {가 열려있는것에 주의

if(Math.random()>0.2){hp --;} // 랜덤으로 생성한 수가 0.2보다 클경우 hp를 1줄인다

if(Math.random()<=0.2){ //랜덤으로 생성한 수가 0.2보다 작거나 같을경우 {}안의 내용을 실행. {가 열려있음에 주의

mon.mon0 =1; //mon.mon0에 1이라는 값을 입력한다.

core.rootScene.removeChild(mon0); //mon0을 보이지 않게 한다.

}; //if(Math.random()<=0.2){ 를 닫는 괄호

}; // if(!mon.mon0){ 를 닫는 괄호

}; //if(mon0.x-16...mon0.y+16){을 닫는 괄호 

if(mon1.x-16 <= sprite.x && sprite.x <mon1.x+16 && mon1.y-16 <= sprite.y && sprite.y <mon1.y+16){ //sprite의 좌표가 지정된 위치에 올 경우 {}안의 내용을 실행함 {가 열려있는것에 주의

if(!mon.mon1){  //mon.mon1이라는 값이 지정되지 않았을때 {}안의 내용을 실행 {가 열려있는것에 주의

if(Math.random()>0.2){hp --;} // 랜덤으로 생성한 수가 0.2보다 클경우 hp를 1줄인다

if(Math.random()<=0.2){  //랜덤으로 생성한 수가 0.2보다 작거나 같을경우 {}안의 내용을 실행. {가 열려있음에 주의

mon.mon1 =1; //mon.mon1에 1이라는 값을 입력한다.

core.rootScene.removeChild(mon1); //mon1을 보이지 않게 한다

}; //if(Math.random()<=0.2){ 를 닫는 괄호

}; // if(!mon.mon1){ 를 닫는 괄호

}; //if(mon1.x-16...mon1.y+16){을 닫는 괄호 

});

core.rootScene.addChild(map);

core.rootScene.addChild(box0); //box0을 화면에 나타낸다

core.rootScene.addChild(box1); //box1을 화면에 나타낸다

core.rootScene.addChild(mon0); //mon0을 화면에 나타낸다

core.rootScene.addChild(mon1); //mon1을 화면에 나타낸다

core.rootScene.addChild(sprite);

core.rootScene.addChild(label);

};

core.start();

};

이렇게 아주 간단한 rpg 게임을 만들어 봤어 ㅋㅋㅋㅋ

전부 다해서 200줄도 안되는 아주 간단한 구조임

지금까지의 글을 보고 따라한 사람은 아마 응용해서 여러가지 다르게 만들어 볼수 있을거야

혹시라도 궁금한점이 있으면 1번글의 라이브러리 다운받았으면 그안에 text라는 폴더가 있는데

거기에 설명서가 있으니 필요한걸 찾아보도록 하고

구글에도 아주 적지만 enchant.js 관련 문서가 있으니 참조해보는것도 좋을거 같음

다음에는 이렇게 만들어진 html파일을 apk로 만들어서 스마트폰에 설치하는법을 쓸거 같음

[익명(112.214)]

코드가 이건 진짜 옛날 게임엔진 없던 시절에 개발하던 방식이다

[익명(222.121)]

더 깔끔하게도 충분히 될텐데 내가 자바스크립트를 잘 모름