JS_간단한 게임(당근)

기본적인 html 과 css

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>Document</title>
    <link rel="stylesheet" href="carrot.css">
    <script src="carrot.js" defer></script>
    <script src="https://kit.fontawesome.com/e917cec6a6.js" crossorigin="anonymous"></script>
</head>
<body>
    <section class="game">
        <header class="game_header">
            <button class="btn_st" id="btn_st">
                <i class="fas fa-play"></i>
            </button>
            <div class="game_timer">00:00</div>
            <div class="game_score">9</div>
        </header>

        <section class="game_field">
            

        </section>

</section>
<section class="pop_up pop_up--hide">
    <button class="pup_up_refresh">
        <i class="fas fa-redo"></i>
    </button>
    <span class="pop_up_message">HELLO</span>
</section>
    

</body>
</html>

FontAwsome 사용

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  background-color: black;
}

button {
  border: none;
  outline: none;
  cursor: pointer;
}

.game {
  display: flex;
  flex-direction: column;
  background: url("img/background.png") center/cover;
  width: 900px;
  height: 600px;
  margin: auto;
  border-radius: 20px;
}

.game_header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.btn_st {
  width: 60px;
  height: 60px;
  background-color: wheat;
  border: 4px solid black;
  font-size: 24px;
  transition: transform 300ms ease-in;
}
.btn_st:hover {
  transform: scale(1.1);
}

.game_timer {
  width: 100px;
  background-color: white;
  text-align: center;
  border: 5px solid black;
  font-size: 32px;
  margin-top: 8px;
  border-radius: 20px;
}
.game_score {
  text-align: center;
  margin-top: 8px;
  width: 50px;
  height: 50px;
  font-size: 40px;
  background-color: darksalmon;
  border-radius: 50%;
  border: 3px solid black;
  color: white;
}

.game_field {
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-top: 95px;
  position: relative;
}

.pop_up {
  display: block;
  width: 400px;
  height: 140px;
  background-color: #00000090;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  color: white;
  margin: auto;
  transform: translateY(-150%);
  border-radius: 20px;
}
.pop_up--hide {
  display: none;
}

.pup_up_refresh {
  width: 60px;
  height: 60px;
  background-color: wheat;
  border: 2px solid black;
  font-size: 24px;
  border-radius: 50%;
  transition: transform 300ms ease-in;
}

.pup_up_refresh:hover {
  transform: scale(1.1);
}

.pop_up_message {
  display: block;
  font-size: 20px;
}

.carrot {
  cursor: pointer;
  position: relative;
}
.bug {
  cursor: pointer;
  position: relative;
}

carrot 과 bug는 js 에서 만들어 준다.(img)

JS

'use strict'

const btn_st = document.querySelector('.btn_st');
const pup_up_refresh = document.querySelector('.pup_up_refresh');
const game_field = document.querySelector('.game_field');
let flag_play=0;


function position_top(){
    return Math.floor(Math.random()*125) + "px";
  }
  function position_left(){
    return Math.floor(Math.random()*80) + "px";
  }

function playing() {
    if(flag_play==0){
        flag_play =1;
        document.getElementById("btn_st").innerHTML = '<i class="fas fa-stop"></i>';
        
        for(let i =0; i<10; i++){
            game_field.innerHTML += `
            <img class="carrot carrot${i}" src="./img/carrot.png" alt="carrot">
            <img class="bug bug${i}" src="./img/bug.png" alt="bug">
            `;
            const top = position_top();
            const left = position_left();
            let img_carrot = document.querySelector(`.carrot${i}`);
            let img_bug = document.querySelector(`.bug${i}`);
            console.log(img_carrot);
            img_carrot.setAttribute("style", `top:${top}; left:${left};`);
            img_bug.setAttribute("style", `top:${top}; left:${left};`);
          
        }
        

    }
    

}


btn_st.addEventListener("click", () => {
    playing();
    });

현재 시작버튼을 누르면 시작버튼이 멈춤 버튼으로 바뀌며,
당근 img 와 벌레img 가 랜덤으로 배치 되도록 하는데 까지 진행 하였다.

js 에서 style에 여러개 넣는 구문을 몰라 좀 헤맸지만 해결하였다.

Author And Source

이 문제에 관하여(JS_간단한 게임(당근)_1), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kbs2082/JS간단한-게임당근1

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

JS_간단한 게임(당근)_1

HTML

CSS

JS

Author And Source

좋은 웹페이지 즐겨찾기