728x90

 

canvas 기초 사용법에 대한 간단한 영상으로, 해당 영상을 완료하면 간단한 공룡 게임이 만들어진다.

나중에 이걸 활용해서 다른 재밌는 웹게임을 만들어 볼 생각으로 작업하게 되었다.

 

아래는 해당 영상을 참고로 수정한 소스 코드이다.

 

 

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src="main.js"></script>
</body>
</html>

 

 

main.js

let canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');

canvas.width = window.innerWidth - 100;
canvas.height = window.innerHeight - 100;

let dinoImg = new Image();
dinoImg.src = "dino.png";
let dino = {
    x : 10,
    y : 200,
    width : 25,
    height : 25,
    draw() {
        // ctx.fillStyle = 'green';
        // ctx.fillRect(this.x, this.y, this.width+25, this.height+25);
        ctx.drawImage(dinoImg, this.x, this.y, this.width+25, this.height+25);
    }
}

let cactusImg = new Image();
cactusImg.src = "cactus.png";
class Cactus {
    constructor() {
        this.x = 400;
        this.y = 190;
        this.width = 25;
        this.height = 30;
    }

    draw() {
        // ctx.fillStyle = 'red';
        // ctx.fillRect(this.x , this.y, this.width+25, this.height+30);
        ctx.drawImage(cactusImg, this.x, this.y, this.width+25, this.height+30);
    }
}

let timer = 0;
let cactuses = [];
let isJump = false;
let jumpTimer = 0;
let animation;

function init() {
    animation = requestAnimationFrame(init);
    timer++;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    if (timer % 200 == 0) {
        let cactus = new Cactus();
        cactuses.push(cactus);
    }

    cactuses.forEach((cactus, i, o)=>{
        // x 좌표가 0 미만이면 제거
        if (cactus.x < 0) {
            o.splice(i, 1);
        }
        cactus.x -= 2;

        collisionDetect(dino, cactus);

        cactus.draw();
    })

    if (isJump == true) {
        dino.y -= 2;
        jumpTimer++;
    }

    if (isJump == false) {
        if (dino.y < 200) {
            dino.y += 2;
        }
    }
    
    if (jumpTimer > 50) {
        isJump = false;
        jumpTimer = 0;
    }
    
    dino.draw();
}

init();

//충돌 확인
function collisionDetect(dino, cactus) {
    let xDiff = cactus.x - (dino.x + dino.width);
    let yDiff = cactus.y - (dino.y + dino.height);

    if (xDiff < 0 && yDiff < 0) {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        cancelAnimationFrame(animation);
    }
}

document.addEventListener('keydown', function(e) {
    if (e.code === 'Space' && isJump == false && dino.y == 200) {
        isJump = true;
    }
});

 

dino.png
cactus.png

 

스페이스 바로 간단하게 할 수 있는 게임이 만들어진다.

 

아래는 또 다른 크롬 디노 게임인데, 게임의 동작 원리에 대해 알았으니 아래 소스 코드를 보고 참고해 볼 수 있을 것 같다.

 

https://chromedino.com/ 

 

Chrome Dino Game

Chrome T-Rex dinosaur game online with scores (records)

chromedino.com

 

반응형