자바스크립트로 게임 만들기(2)

그러면 계속해서 자바스크립트로 벽돌깨기 게임을 만들어 보겠습니다. 저번에는 canvas의 기본 세팅을 하고 벽돌을 만들어보았고 이번에는 제일 하단에서 좌우로 움직이는 수평 바를 만들어 보겠습니다.

 

수평 바 생성

먼저 bar.js를 만든 뒤 아래와 같이 입력합니다.

 

bar.js

export class Bar {
    constructor(x, canvasWidth, canvasHeight){
        this.width = 100;
        this.height = 10;

        this.x = x;
        this.y = canvasHeight - this.height;

        this.vx = 0;
        this.canvasWidth = canvasWidth;

        this.fillColor = "#3b81eb";
    }

    draw(ctx){
        ctx.fillStyle = this.fillColor;
        ctx.beginPath();
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

수평 바는 canvas 제일 아래에서 수평으로만 움직이기 때문에 x방향의 속력 vx 만 초기화해주었습니다. 

 

그런 뒤 app.js에서 Bar 객체를 생성한 뒤 canvas에 그려줍니다. 아직까지는 eventListener를 등록하지 않았기에 키보드를 움직여도 아무런 움직임이 없습니다.

 

app.js

import { Block } from "./block.js";
import { Bar } from "./bar.js";

class App{
    constructor(){
        this.canvas = document.getElementById("gameCanvas");
        this.ctx = this.canvas.getContext("2d");

        const blockWidth = 50;
        const blockHeight = 20;
        
        this.blocks = [];
        for(let i = 0; i <= this.canvas.width - blockWidth; i += blockWidth){
            for(let j = 50; j <= 200; j += blockHeight){
                this.blocks.push(new Block(i, j));
            }
        }

        this.bar = new Bar(100, this.canvas.width, this.canvas.height);

        window.requestAnimationFrame(this.animate.bind(this));
    }

    draw(){
        this.ctx.fillStyle = "#102330";
        this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

        this.blocks.forEach((block) => {
            block.draw(this.ctx);
        });

        this.bar.draw(this.ctx);
    }

    animate(){
        this.draw();

        window.requestAnimationFrame(this.animate.bind(this));
    }
}

window.onload = () => {
    new App();
}

 

수평 바 움직임 구현

수평 바 움직임을 구현하기 위해서 먼저 app.js에 'keydown'과 'keyup' eventListener를 설정해주겠습니다. app.js의 constructor() 부분을 아래와 같이 바꿔주세요.

 

app.js - constructor()

class App{
    constructor(){
        this.canvas = document.getElementById("gameCanvas");
        this.ctx = this.canvas.getContext("2d");

        const blockWidth = 50;
        const blockHeight = 20;
        
        this.blocks = [];
        for(let i = 0; i <= this.canvas.width - blockWidth; i += blockWidth){
            for(let j = 50; j <= 200; j += blockHeight){
                this.blocks.push(new Block(i, j));
            }
        }

        this.bar = new Bar(100, this.canvas.width, this.canvas.height);

        const moveSpeed = 10;

        window.addEventListener('keydown', (e) => {
            // 오른쪽
            if(e.key === "ArrowRight"){ this.bar.vx = moveSpeed; }
            // 왼쪽
            if(e.key === "ArrowLeft"){ this.bar.vx = -moveSpeed; }
        });

        window.addEventListener('keyup', (e) => {
            if(e.key === "ArrowRight" || e.key == "ArrowLeft"){ this.bar.vx = 0; }
        });

        window.requestAnimationFrame(this.animate.bind(this));
    }

전에 사용하던 e.keyCode는 deprecated 되었기 때문에 e.key로 대체해서 사용합니다.

 

이제 실제로 수평 바가 움직이도록 bar.js를 수정하겠습니다. 간단하게 x에 vx를 더하면 되는데, canvas 밖으로 나가지 않도록 경계조건을 잘 설정해주어야 합니다.

 

bar.js

export class Bar {
    constructor(x, canvasWidth, canvasHeight){
        this.width = 100;
        this.height = 10;

        this.x = x;
        this.y = canvasHeight - this.height;

        this.vx = 0;
        this.canvasWidth = canvasWidth;

        this.fillColor = "#3b81eb";
    }

    draw(ctx){
        this.x += this.vx;

        if(this.x < 0){ this.x = 0; }
        if(this.x + this.width > this.canvasWidth){ this.x = this.canvasWidth - this.width; }

        ctx.fillStyle = this.fillColor;
        ctx.beginPath();
        ctx.fillRect(this.x, this.y, this.width, this.height);
    }
}

 

실행한 화면은 아래와 같습니다.

 

수평 바가 움직이는 모습

 

자바스크립트로 게임 만들기 시리즈

• 자바스크립트로 게임 만들기(1)
• 자바스크립트로 게임 만들기(3)