[Javascript / Cavas] 크롬 공룡게임 따라서 게임 만들기 #2 - 조작, 캐릭터 디자인, 움직이는 배경

이번 글에서는 게임의 기본 조작인 점프와 캐릭터(캐릭터, 장애물)디자인과 가로로 지나가는 배경을 만들어보고자 한다.

---

1. 조작

1) 점프

게임의 기본 조작은 캐릭터가 점프다. 캐릭터가 장애물을 점프해서 피하거나, 점프하지 않고 지나가는 것이다.

조작키는 '스페이스바(spacebar)'로 지정하여 조작키를 누를때 마다 캐릭터가 일정 높이를 점프한 후 원래 지면으로 돌아오도록 한다.

let timer =0;
let jumpTimer =0;
let jumping=false;
function frameRepeatd(){
    requestAnimationFrame(frameRepeatd);
    timer++;
    ctx.clearRect(0,0,canvas.width,canvas.height);
    
    //------생략

    if(jumping==true){
        dino.y--;
        jumpTimer++;
    }
    if(jumping==false){
        if(dino.y<165){
            dino.y++;
        }
    }
    if(jumpTimer>100){
        jumping=false;
        jumpTimer=0;
    }

    dino.draw();
}
frameRepeatd()


document.addEventListener('keydown', function(e){
    if(e.code==='Space'){
        jumping=true;
    }
})

jumping 변수를 사용해 캐릭터의 점프 상태 유무를 체크한다. 스페이스바를 누르면 jumping=true로 점프상태로 바꾼다.

점프 상태일 동안 캐릭터를 위로 상승시키고 jumpingTimer변수를 사용해 캐릭터가 얼마만큼의 시간동안 점프를 할 지 지정한다.

정해진 시간동안 점프를 하면 jumping을 false로 바꿔 점프를 하지 않는 상태로 바꾼다. 이후 캐릭터를 하강시켜 원래 위치(지면 위)로 이동시킨다.

 

무한점프(무한 상승)되는 문제점

위의 코드를 작성하면 한가지 문제점이 생긴다.

스페이스바를 누를때 마다 무제한으로 점프가 되어 y축으로 캐릭터가 계속 상승한다.

이를 수정하고자 document.addEventListener('keydown', function(e)에 아래 코드를 추가한다.

 

document.addEventListener('keydown', function(e){
    if(e.code==='Space'){
        if(dino.y==165){
        jumping=true;
        }
    }
})

위의 코드를 통해 캐릭터가 지면위(처음 기본 위치)에 있을때만 스페이스가 허용되도록한다.

스페이스바를 여러번 눌러도 1번만 점프가 되도록한다.

 

 

2. 캐릭터 디자인

사진 이미지를 입히기 전에 사용할 이미지를 불러온다.

const imgCharacter1 = new Image();
imgCharacter1.src = "image/character1.png";
const imgCharacter2 = new Image();
imgCharacter2.src = "image/character2.png";
const imgCharacter3 = new Image();
imgCharacter3.src = "image/character3.png";
const flower = new Image();
flower.src = "image/flower1.png";
const imgBackground = new Image();
imgBackground.src = "image/background3.png";
const imgBranch = new Image();
imgBranch.src = "image/branch.png";
const imgTree = new Image();
imgTree.src = "image/tree.png";
const icRestart = new Image();
icRestart.src = "image/ic_restart.png";

 

1) 캐릭터

캐릭터는 걷는 동작1,2 와 점프 동작으로 총 3가지 이미지가 사용된다.

걷기 모션

걷는 동작의 경우 두개의 이미지를 일정 시간마다 교차하며 나타낸다. 이를 위해 chacracterTimer변수를 사용한다.

characterTimer	image
0	character1.png
1	character2.png

일정시간마다 characterTimer를 0 -> 1 ->0 으로 반복해서 바꿔주면된다.

시간은 적용해보고 늘리거나 줄이면서 마음에 들도록 맞추면된다.

 

점프 모션

점프모션의 경우 jumping이 true일 경우에 이미지를 적용시켜주면된다.

 

코드

걷기와 점프 모션을 적용하는 코드는 아래와 같다.

const character = {
    x:16,
    y:165,
    width:45,
    height:85,
    draw(){
    	//점프 모션
        if(jumping==true){
            ctx.drawImage(imgCharacter3, this.x, this.y);
        }
        //걷기 모션 1, 2
        else if(chacacterTimer==0){
            ctx.drawImage(imgCharacter2, this.x, this.y);
        }else{
            ctx.drawImage(imgCharacter1, this.x, this.y);
        }
    }
}
let chacacterTimer= 0;
function frameRepeatd(){
//------생략
    if(timer%30==0){
        if(chacacterTimer==1){
            chacacterTimer=0;
        }else{chacacterTimer=1;}
    }
}

 

 

2) 장애물

하단, 상단 이미지와 추가적으로 꾸미기 위한 배경을 사용한다.

아래의 코드는 이미지를 입히는 코드이며 draw는 frameRepeatd()에서 적용한다.

 

하단, 상단 장애물 이미지

장애물은 각각 1개의 이미지를 사용하기 때문에 이미지만 지정하여 적용하면된다.

class Flower{
    constructor(){
        this.name="flower";
        this.x =600;
        this.y = 200;
        this.width =45;
        this.height =50;
    }
    draw(){
        ctx.drawImage(flower, this.x-10   , this.y-12, this.width+12, this.height+12);
    }
}

class Branch{
    constructor(){
        this.name="branch";
        this.x =600;
        this.y = 65 ;
        this.width =45;
        this.height =50;
    }
    draw(){
        ctx.drawImage(imgBranch, this.x, 60, 70, 55);
    }
}

 

추가적인 이미지

상단 장애물인 나뭇가지를 꾸며주기 위해 배경으로 나무를 추가했다.

const tree={
    x:0,
    y:0,
    width:800,
    height:260,
    draw(){
        ctx.drawImage(imgTree, this.x, this.y, this.width, this.height);
    }
}

 

 

3. 배경

배경은 오른쪽에서 왼쪽으로 이동되도록한다. 이때 동일한 이미지가 반복되게 한다. 배경의 움직임을 통해 캐릭터가 달리는 듯한 효과를 준다.

const bg1={
    x:0,
    y:0,
    width:800,
    height:260,
    draw(){
        ctx.drawImage(imgBackground, this.x, this.y, this.width, this.height);
    }
}
const bg2={
    x:800,
    y:0,
    width:800,
    height:260,
    draw(){
        ctx.drawImage(imgBackground, this.x, this.y, this.width, this.height);
    }
}

function frameRepeatd(){
//------생략
    if(timer%1==0){
        
        bg1.x--;
        bg2.x--;
        if(bg1.x<=-800){
            bg1.x=0;
            bg2.x=800;
        }
        
    }
    backgroundDraw();
}

function backgroundDraw(){
    bg1.draw();
    bg2.draw();
    tree.draw();
}

두개의 동일한 이미지 파일을 불러와 각각 bg1, bg2로 지정한다.

두개의 이미지를 이어붙여 사용한다.

bg1은 시작위치를 x=0, bg2는 x=800 (게임 캔버스 사이즈)지정하여 하나로 이어준다.

배경 두개의 x값이 각각 시간이 지남에 따라 감소시킨다.

이때 bg1의 x가 -800값이 되면 bg1과 bg2의 x값을 처음으로 초기화 해준다.

---

❔한 개의 이미지만 사용하면 안되나?

하나만 사용할 경우 이미지 하나가 이동하면서 우측은 흰색 배경으로 바뀐다.

두번째 이미지가 흰색 배경을 채워주는 역할을 한다.

아래 이미지는 최종본에서 배경을 하나 없앤 모습이다.