DinausoreGame_canvas.html

<!DOCTYPE html>

<html>

<head>
    <title>공룡 게임</title>

    <style>
        body {
            background-color: #000000;
            margin: 0px;
        }

        canvas {
            background-color: #ffffff;
        } 

        .score{
            color: #ffffff;
            text-align:right;
            margin: 15px 82px 15px 0px;
            font-size: 20px;
        }
    </style>

</head>


<body>
    <div class="score"><span>SCORE : </span><span id="score"></span></div>
    <canvas id="canvas" width="1600" height="770"></canvas>
</body>

<script>

    /*
        canvas 변수
    */
    let canvas;
    let canvasCtx;
    let canvasBuffer;
    let bufferCtx;

    /*
        플레이어(공룡) 변수
    */
    const playerUnit = {x: 300, y: 400}; // 플레이어 시작 위치
    let dinausoreImg; // 플레이어 이미지

    /*
        장애물 변수
    */
    let hurdleImgStack = [];

    /*
        Thread ID
    */
    let gameLoopThread;  //draw view Thread ID
    let walkLoopThread = null; //walk Thread ID
    let scoreThread; //score Thread ID

    /*
        게임 진행 관련 변수
    */
    let startGame =  false;
    let score = 0;

    window.onload = function(){
        init();
    }

    function init() {

        canvas = document.getElementById("canvas");
        canvasCtx = canvas.getContext("2d");
        canvasBuffer = document.createElement("canvas");
        canvasBuffer.width = canvas.width;
        canvasBuffer.height = canvas.height;
        bufferCtx = canvasBuffer.getContext("2d");

        document.onkeydown=getKeyDown;

        setImage();

        gameLoopThread = setInterval(gameLoop, 10);
    }

    function setImage() {
        dinausoreImg = new Image();
        dinausoreImg.src = "./image/DNS_3.png";
    }

    function getKeyDown(e) {

        // 바닥에 있을 떄만 점프 가능
        if(e.which == 32 && playerUnit.y == "400"){ 

            // 점프시 걷기 중지
            if(walkLoopThread != null){
                clearInterval(walkLoopThread);
            }else{
                startGame = true;
                scoreThread = setInterval(showScore,100);
            }

            dinausoreImg.src="./image/DNS_3.png";

            // 위로 이동 구현
            let timer = setInterval(function(){
                if(playerUnit.y>150){
                    playerUnit.y-=10;
                }else{
                    clearInterval(timer);
                }
            },10);

            // 아래로 이동 구현
            setTimeout(function(){
                timer = setInterval(function(){
                    if(playerUnit.y<400){
                        playerUnit.y+=10;
                    }else{
                        walkLoopThread = move();
                        clearInterval(timer);
                    }
                },10);
            },400);
        }  
    }

    function gameLoop() {
        displayAll();
    }

    // 플레이어 걷기 구현
    function move(){
            let pos = 0;
            const DNSArr = ["./image/DNS_1.png","./image/DNS_2.png"];
            const intervalID = setInterval(function(){
                dinausoreImg.src=DNSArr[pos];
                pos == 0?pos=1:pos=0;
            },100);

            return intervalID;
    }

    // 전체 뷰 그리기
    function displayAll() {
        bufferCtx.fillStyle = "#ffffff";
        bufferCtx.fillRect(0, 0, canvas.width, canvas.height);
        bufferCtx.drawImage(dinausoreImg, playerUnit.x, playerUnit.y , 130, 130);

        if(startGame){
            setInterval(displayHurdle(),800);
        }
        
        canvasCtx.drawImage(canvasBuffer, 0, 0);

        if(checkHitPlayer()){
            stopGame();
        }
    }

    // 장애물 생성
    function displayHurdle(){
        if(hurdleImgStack.length==0){
            let hurdleImg = new Image();
            const random = parseInt(Math.random() * 3 + 1);
            imgSrc = `./image/hurdle_${random}.png`;
            hurdleImg.src = imgSrc;
            hurdleImgStack.push({"hurdleImg":hurdleImg, "x": 1500, "y": 450, "imgX":30*random, "imgY":80});
        }

        const loop = hurdleImgStack.length;
        for(var i=0;i<loop;i++){
            if(hurdleImgStack[i].x==0){
                hurdleImgStack.shift();
                continue;
            }
            hurdleImgStack[i].x -= 6;
            bufferCtx.drawImage(hurdleImgStack[i].hurdleImg, hurdleImgStack[i].x, hurdleImgStack[i].y, hurdleImgStack[i].imgX,hurdleImgStack[i].imgY);
        }
    }

    // 점수 표시
    function showScore(){
        score += 1;
        document.getElementById("score").innerText = score;
    }

    // 게임오버 조건 체크 - 장애물에 부딫혔는지
    function checkHitPlayer(){
        let rtnVal = false;

        if(hurdleImgStack.length>0){
            const distanceX = (playerUnit.x +  130/2) - hurdleImgStack[0].x;
            const distanceY = (playerUnit.y +  130/2) - hurdleImgStack[0].y;
            const distance = distanceX*distanceX + distanceY*distanceY;

            if(distance <= 360){
                rtnVal = true;
            }
        } 

        return rtnVal;
    }

    // 게임오버시
    function stopGame(){
        clearInterval(gameLoopThread);
        clearInterval(scoreThread);
    }

</script>