HTML,CSS, JavaScript를 이용한 나만의 공룡 게임 (Chrome Dinosaur Game)

HTML,CSS, JavaScript를 이용한 나만의 공룡 게임 (Chrome Dinosaur Game)

2022-10-19 last update

5 minutes reading programming css javascript html
CodeWithRandom 블로그에 오신 것을 환영합니다. 이 기사에서는 Html, Css 및 javascript를 사용하여 공룡 게임을 만드는 방법을 배웁니다. Dino 게임 html 코드를 생성한 다음 css 코드를 생성하고 디노 게임에 대해 기능적으로 javascript 코드를 사용합니다.

저희 블로그가 재미있으시길 바라며, 디노 게임 HTML 코드의 기본 HTML 구조부터 시작하겠습니다.

공룡 게임 HTML 코드

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>The Dinosaur Game</title>
        <link rel="stylesheet" href="assets/style.css" />
    </head>
    <body>
        <div class="game">
            <div id="dino"></div>
            <div id="cactus"></div>
        </div>
        <script src="assets/script.js"></script>
    </body>
</html>


디노 게임에 대한 모든 HTML 코드가 있습니다. 이제 CSS 및 Javascript 없이 출력을 볼 수 있습니다. 그런 다음 디노 게임 코드에 대한 CSS 및 자바 스크립트를 작성합니다.

HTML 출력 디노 게임

                  _Blank Output_

CSS 코드 디노 게임

* {
    padding: 0;
    margin: 0;
}
.game {
    width: 600px;
    height: 200px;
    border: 1px solid #000000;
    margin: auto;
}
#dino {
    width: 70px;
    height: 70px;
    background-image: url(t-rex.png);
    background-size: auto 70px;
    position: relative;
    top: 143px;
}
.jump {
    animation: jump 0.3s linear;
}
@keyframes jump {
    0% {
        top: 143px; /*distance from the top of the parent element*/
    }
    30% {
        top: 115px;
    }
    50% {
        top: 70px;
    }
    80% {
        top: 115px;
    }
    100% {
        top: 143px;
    }
}
#cactus {
    width: 20px;
    height: 40px;
    position: relative;
    top: 91px;
    left: 580px; /*width of frame - width of cactus*/
    background-image: url(cactus.png);
    background-size: 20px 40px;
    animation: cactus-block 1.2s infinite linear;
}
@keyframes cactus-block {
    0% {
        left: 600px;
    }
    100% {
        left: -20px;
    }
}


다음은 업데이트된 출력 CSS For Dino Game입니다. 다음은 Dino 게임에 대한 Html 및 CSS로 업데이트된 출력입니다.

산출



자바스크립트 코드 다이노 게임

const dino = document.getElementById("dino");
const cactus = document.getElementById("cactus");
function jump() {
    if (dispatchEvent.classList != "jump") {
        //first it checks if the dino is mid-jump. If not, it makes it jump.
        dino.classList.add("jump");
        setTimeout(function () {
            dino.classList.remove("jump");
            //removes the jump class from the dino once it has jumped so that it can jump again
        }, 300);
    }
}
let checkAlive = setInterval(function () {
    let dinoTop = parseInt(
        window.getComputedStyle(dino).getPropertyValue("top")
    );
    let cactusLeft = parseInt(
        window.getComputedStyle(cactus).getPropertyValue("left")
    );
    //check for collision
    if (cactusLeft > 0 && cactusLeft < 70 && dinoTop >= 143) {
        dino.style.animationPlayState = "paused";
        cactus.style.animationPlayState = "paused";
        alert("Whoops! Game Over :(");
        window.location.reload();
    }
}, 10);
document.addEventListener("keydown", function (event) {
    jump();
});


최종 출력 디노 게임



이제 디노 게임용 자바스크립트 섹션을 완료했습니다. 다음은 Dino Game용 자바스크립트로 업데이트된 출력입니다. 디노 게임 코드가 마음에 드셨으면 합니다. 출력 비디오와 프로젝트 스크린샷을 볼 수 있습니다. 다른 블로그를 참조하고 프론트엔드 개발에 대한 지식을 얻으십시오. 고맙습니다!

이 포스트에서는 간단한 HTML과 CSS, 자바스크립트를 이용하여 공룡 게임을 만드는 방법을 배웁니다. 우리가 실수하거나 혼란스러운 점이 있으면 댓글을 남겨 답장을 보내거나 쉬운 학습을 도와주세요.

작성자 – Random/Anki가 있는 코드

일부 관련 주제 -

number-guessing-game-javascript-number-guess-game-javascript-game

chat-ui-design-using-html-and-css-chatbot-ui-template-html-free

notes-app-using-html-css-javascript-

category/project

spotify-clone-html-css-javascript