HTML, CSS, 자바 스크립트를 통해 간단한 자동차 레이싱 게임 코딩 만들기

날짜:

웹 페이지에서 구현할 수 있는 간단한 레이싱 게임을 HTML, CSS, JavaScript를 사용하여 만드는 방법을 설명하겠습니다. 이 게임은 기본적인 자동차가 경로를 따라 이동하면서 장애물을 피하는 간단한 형태로 구성됩니다. 사용자는 키보드의 좌우 방향키를 사용하여 자동차를 조종할 수 있습니다.

HTML

HTML은 게임의 구조를 만드는 데 사용됩니다. index.html 파일을 생성하고 다음 코드를 추가하세요:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Racing Game</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="gameArea">
        <div id="car"></div>
        <div id="obstacle"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

CSS는 게임의 시각적 요소를 스타일링하는 데 사용됩니다. styles.css 파일을 생성하고 다음 코드를 추가하세요:

ea {
    width: 300px;
    height: 500px;
    border: 1px solid black;
    position: relative;
    overflow: hidden;
    background-color: grey;
}

#car {
    width: 30px;
    height: 50px;
    position: absolute;
    bottom: 10px;
    left: 135px; /* 중앙 위치 */
    background-color: red;
}

#obstacle {
    width: 30px;
    height: 50px;
    position: absolute;
    top: -50px; /* 시작 위치 */
    left: 135px; /* 중앙 위치 */
    background-color: black;
}
}

JavaScript

JavaScript는 게임 로직과 상호작용을 처리합니다. script.js 파일을 생성하고 다음 코드를 추가하세요:

const car = document.getElementById("car");
const gameArea = document.getElementById("gameArea");
const obstacle = document.getElementById("obstacle");

let gamePlay = false;
let player = { speed: 5, score: 0 };

document.addEventListener("keydown", moveCar);
setInterval(moveObstacle, 20);

function moveCar(e) {
    if (e.key === "ArrowLeft" && car.offsetLeft > 0) {
        car.style.left = car.offsetLeft - player.speed + "px";
    } else if (e.key === "ArrowRight" && car.offsetLeft < (gameArea.offsetWidth - car.offsetWidth)) {
        car.style.left = car.offsetLeft + player.speed + "px";
    }
}

function moveObstacle() {
    if (!gamePlay) return;
    obstacle.style.top = obstacle.offsetTop + player.speed + "px";
    if (obstacle.offsetTop > gameArea.offsetHeight) {
        obstacle.style.top = "-50px";
        obstacle.style.left = Math.floor(Math.random() * (gameArea.offsetWidth - obstacle.offsetWidth)) + "px";
        player.score++;
        console.log("Score: " + player.score);
    }
    if (collision(car, obstacle)) {
        gamePlay = false;
        alert("Game Over! Score: " + player.score);
    }
}

function collision(a, b) {
    const aRect = a.getBoundingClientRect();
    const bRect = b.getBoundingClientRect();
    return !(
        aRect.bottom < bRect.top ||
        aRect.top > bRect.bottom ||
        aRect.right < bRect.left ||
        aRect.left > bRect.right
    );
}

document.addEventListener("click", startGame);

function startGame() {
    gamePlay = true;
    obstacle.style.top = "-50px";
    player.score = 0;
}

이 코드는 자동차의 움직임, 장애물의 움직임, 충돌 감지, 게임 오버 처리를 포함하고 있습니다. 게임은 사용자가 화면을 클릭하면 시작되며, 점수는 장애물을 피할 때마다 증가합니다.

위 코드를 각각의 파일에 넣고, 모든 파일을 같은 폴더에 저장한 후 index.html 파일을 웹 브라우저에서 열면 간단한 레이싱 게임을 플레이할 수 있습니다. 게임의 난이도나 디자인을 사용자의 요구에 맞게 조정할 수 있습니다.

Location: 대한민국