snowdeer's Code Holic

HTML5 Tetris 게임 만들기 - (1) 뼈대 만들기

07 Jan 2020 | javascript html5

Tetris 게임 뼈대 구현

테트리스 게임을 만들기 전에 먼저 HTML5 canvas 위에 작은 박스를 그려보고, Keyboard 화살표 입력을 이용해서 이동을 할 수 있는 코드를 작성해보도록 하겠습니다.


tetris.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>;Tetris</title>

    <script src="/js/tetris.js"></script>
</head>
<body>
    <canvas id="canvas" width="240" height="480">
        이 브라우저는 HTML5 Canvas를 지원하지 않습니다.
    </canvas>

    <br>

    <script>
        window.onload = function() {
            init();

            draw();
        }
    </script>
</body>
</html>


js/tetris.js

var canvas;
var ctx;

var x, y;

function init() {
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    x = canvas.width / 2;
    y = 20;
}

function draw() {
    drawBackground();
    drawBlock();
}

function drawBackground() {
    ctx.fillStyle = 'black';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
}

function drawBlock() {
    ctx.fillStyle = 'orange';
    ctx.fillRect(x-10, y-10, 20, 20);
}

여기까지 코드를 작성하면 화면에 캔버스를 그리고 검정색 백그라운드에 오렌지색 박스를 하나 그리게 됩니다.


키보드 입력 이벤트 리스너 등록

function addKeyEventListener() {
    addEventListener('keydown', function(event) {
        switch(event.key) {
            case 'ArrowLeft':
                console.log("Left");
                x -=20;

                draw();
                break;

            case 'ArrowRight':
                console.log("Right");
                x += 20;

                draw();
                break;

            case 'ArrowUp':
                console.log("Up");
                y -= 20;

                draw();
                break;

            case 'ArrowDown':
                console.log("Down");
                y += 20;

                draw();
                break;
        }
    });
}