[JS] 바닐라 JS로 게임 만들기

노마드코더의 바닐라 JS로 게임 만들기 강의를 정리하는 글입니다.

Github Commit

const canvas = document.getElementById('jsCanvas');
const ctx = canvas.getContext('2d');
const colors = document.getElementsByClassName('jsColor');
const range = document.getElementById('jsRange');
const mode = document.getElementById('jsMode');
const saveBtn = document.getElementById('jsSave');

// options
const initialColor = '#2c2c2c';
const canvasSize = 700;

canvas.width = canvasSize;
canvas.height = canvasSize;

// initialize
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, canvasSize, canvasSize);

ctx.strokeStyle = initialColor;
ctx.fillStyle = initialColor;
ctx.lineWidth = 2.5;

let painting = false;
let filling = false;

function stopPainting() {
    painting = false;
};

function startPainting() {
    painting = true;
};

function onMouseMove(e) {
    const x = e.offsetX;
    const y = e.offsetY;
    // 해당 영역 내에서의 좌표값 : offsetX, Y
    // 전체 window 내에서의 좌표값 : clientX, Y
    if(!painting) {
        ctx.beginPath();
        ctx.moveTo(x, y);
    } else {
        ctx.lineTo(x, y);
        ctx.stroke();
    }
};

function handleColorClick(e) {
    const color = e.target.style.backgroundColor;
    ctx.strokeStyle = color;
    ctx.fillStyle = color;
};

function handleRangeChange(e) {
    const size = e.target.value;
    ctx.lineWidth = size;
};

function handleModeClick() {
    if (filling === false) { // fill mode
        filling = true;
        mode.innerText = 'Paint';
    } else { // paint mode
        filling = false;
        mode.innerText = 'Fill';
    }
};

function handleCanvasClick() {
    if(filling) {
        ctx.fillRect(0, 0, canvasSize, canvasSize);
    }
};

function handleContextMenu(e) {
    e.preventDefault();
};

function handleSaveClick() {
    const image = canvas.toDataURL();
    const link = document.createElement('a');
    link.href = image;
    link.download = 'paint-js-img🐶';
    link.click();
};

if(canvas) {
    canvas.addEventListener('mousemove', onMouseMove);
    canvas.addEventListener('mousedown', startPainting);
    canvas.addEventListener('mouseup', stopPainting);
    canvas.addEventListener('mouseleave', stopPainting);
    canvas.addEventListener('click', handleCanvasClick);
    canvas.addEventListener('contextmenu', handleContextMenu); // 마우스 우클릭해서 context menu가 생길 때 발생하는 이벤트
}

const colorArray = Array.from(colors).forEach(color => color.addEventListener('click', handleColorClick));
// Array.from : 유사배열 객체 또는 반복 가능한 객체(iterable object)를 복사해 배열로 생성
// arrow function 안에 사용된 'color'라는 변수는 각각의 배열 요소를 가리키는 역할을 하는 변수일뿐이라 다른 어떤 이름을 넣어도 상관 없다. 

if(range) {
    range.addEventListener('change', handleRangeChange);
    // 강의에서 니꼴라스는 change 대신 input을 사용
}

if(mode) {
    mode.addEventListener('click', handleModeClick);
}

if(saveBtn) {
    saveBtn.addEventListener('click', handleSaveClick);
}

너무 재밌어서 하루만에 후딱 들었다.

처음에 바닐라 JS로 구글 크롬앱 만들기 강의를 볼 땐 강의를 보고 그냥 따라하는 방식으로 공부 했었는데,
이번엔 강의를 보기 전, 먼저 강의 제목에 써있는 기능을 구현해보고 그 이후에 강의를 보며 확인하는 방식으로 공부해봤다.

답을 맞추면 맞추는대로 짜릿한 기분이! 느껴지고, 답을 몰랐을 땐 강의를 들으며 새로운 걸 알아가는 과정이 참 재밌다.

사실 이번 주는 Git으로 버전 관리하고 Github에 push하는 재미로 공부하는 중 :) ㅎㅎㅎ
이번 주 스터디 준비를 마치면 Git에 대해 조금 더 자세히 공부할 계획이다.

뿌듯한 주말!