728x90
반응형

1. 가위바위보

[1] HTML

 

<!DOCTYPE html>
<html lang="ko">
<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="02.practice.css">
</head>
<body>
    <div class="background">
        <div class="userPick"></div>
        <div class="computerPick"></div>
        <div id ="leftround">
            <button id="rock">주먹</button>
            <button id="scissors">가위</button>
            <button id="paper">보</button>
        </div>  
    </div>
    <button id="gameStart">게임 시작하기</button>

    
    <div class="result"></div>
</body>
<script src="02.practice.js"></script>
</html>

[2] css

 

body{
    height: 100vh;
}

.background {
    background-color: blanchedalmond;
    width: 100%;
    height: 50%;
    position: absolute;
}

#gameStart {
    text-align: center;
    width: 200px;
    height: 50px;
    position: relative;
    top: 25%;
    left: 50%;
    transform: translate(-50%,-50%);
}

#leftround button{
    width: 100px;
    height: 50px;
    position: relative;
    top: 200px;
    left: 150px;
}

[3] JavaScript

let computerPick;
let userPick;
let result;
let round = 0;
// 0 = 가위 , 1 = 바위 , 2 = 보

//가위바위보 함수
function rocksp(input){
    computerPick = Math.floor(Math.random()*3)
    return input === computerPick ? "draw" : input+1 === computerPick || input -2 === computerPick ? "lose" : "win"}

//버튼 입력
function buttonEnter(){
    rock.onclick = function(){gameOrder(1)}
    scissors.onclick = function(){gameOrder(0)}
    paper.onclick = function(){gameOrder(2)}
}

//라운드 끝날때 함수
function roundOver(){
    round +=1
    if (round ===10){
        leftround.style.display = "none";
        console.log("10라운드가 지났습니다.")
    }
}

//게임 진행 순서 함수
function gameOrder(input){
    return console.log(rocksp(input)), roundOver();
}
///////////////////////////////////////////////게임 시작

console.log("게임을 시작하시려면 게임 시작하기 버튼을 눌러주세요")
leftround.style.display = "none";

gameStart.addEventListener("click",function(){
    gameStart.style.display = "none";
    leftround.style.display = "block";
    buttonEnter();
});

1-1 가위바위보 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>
    <style>
        .content{
            display: none;
        }
    </style>
</head>
<body>
    <div class="content">
        <button class="scissors">가위</button>
        <button class="rock">바위</button>
        <button class="paper">보</button>
    </div>
    <button id="startBtn">시작</button>
</body>
<script>
    const resultType = ["가위","바위","보"];
    startBtn.onclick = function(){
        startBtn.style.display = "none";
        document.querySelector(".content").style.display = "block";
    }
    
    let playerBtns = document.querySelectorAll(".content button")
    for(let i = 0; i <playerBtns.length;i++){
        playerBtns[i].onclick = function(){
            console.log(gameResult(i));
        };
    };

    function comResult(){
        return Math.floor(Math.random()*3);
    };

    function gameResult(playerResult){
        return playerResult === comResult() ? "무승부" : playerResult < comResult() ? "패배" : "승리"
    }
</script>
</html>

2. 버튼이벤트

 

<!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>
</head>
<body>
    <div id="container"></div>
    <input id = "_input" type="text">
    <button id="createBtn">생성</button>
</body>
<script>
    //createElement 태그를 생성
    //createElement(태그의 이름) div면 div태그가 만들어진다
    let el = document.createElement("div")
    el.innerHTML = "안녕하세요"
    el.className += "test";
    // container.innerHTML 문자열로 태그 추가
    container.innerHTML = "<div class = 'aaa'>안녕하세요</div>";

    let _class = "aaaa";
    let aa = "하이요"
    container.innerHTML += `<div ${_class}>${aa}</div>`

    // appendChild 오브젝트 타입의 태그를 자식 요소로 추가할수 있다. 기존 요소가 있다면 제일 나중에 들어감
    // container 의 자식요소로 추가했음
    container.appendChild(el);
    console.log(el)
    removeBtn.onclick = function(){
        //remveChild는 자식 요소 삭제
        //container안에 있는 자식 요소를 삭제한다.
        //removeChild el 요소를 매개변수로 전달 해놓으면 
        //실행시 el의 요소가 삭제 된다.
        container.removeChild(el);
    }

    createBtn.onclick = function(){
        let text = _input.value;
        let el = document.createElement("div");
        el.innerHTML = text;
        // el.className += "test";

        let removeBtn = document.createElement("button");
        removeBtn.innerHTML = "삭제"
        removeBtn.onclick = function(){
            container.removeChild(el);
            container.removeChild(removeBtn);
        }
        container.appendChild(el);
        container.appendChild(removeBtn);
    }
</script>
</html>

 

2-1 일정 캘린더

<!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>
    <style>


    </style>
</head>
<body>
    <div id="back">
        <div id="nav">
        </div>
    </div>
    <ol id="listNum">
    </ol>
    <div class="inputThings">
    <input id = "inputDate" type="date">
    <input id = "inputTime" type="time">
    <input id = "inputDo" type="text">
    </div>
    <button id = "createBtn">일정 생성</button>
</body>
<script>
    createBtn.onclick = function(){
    let inputDateValue = inputDate.value;
    let inputTimeValue = inputTime.value;
    let inputDoValue = inputDo.value;
    let toDo = document.createElement("li")
    let removeBtn = document.createElement("button")
    removeBtn.innerHTML = "일정 삭제"
    toDo.innerHTML = inputDateValue + "     " + inputTimeValue + "      " + inputDoValue
    listNum.appendChild(toDo)
    listNum.appendChild(removeBtn)


    removeBtn.onclick = function(){
        listNum.removeChild(toDo)
        listNum.removeChild(removeBtn)
    }
    }

    
</script>
</html>
728x90
반응형

'개발 > html, css, js' 카테고리의 다른 글

[JS, HTML, CSS] 이벤트  (0) 2022.06.17
[HTML, CSS] 이벤트리스너  (0) 2022.06.09
[JavaScript] 각종 이벤트  (0) 2022.06.07
[JavaScript, CSS] 콜백, 콜백지옥  (0) 2022.06.03
[JavaScript] 배열 관련 문제 2개  (0) 2022.05.31

티스토리툴바