<HTML.CSS.JS> 개미 생일 가위바위보 게임

시간 지연 -- setInterval / setTime

setTimeout과 setInterval을 이용한 호출 스케줄링

ko.javascript.info

object / entey

Object.entries() - JavaScript | MDN

Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다).

developer.mozilla.org

var imageWhere = 0
var dictionary = { //딕셔너리자료구조
  rock : '0',
  scissor : '-10px',
  paper :'-20px'
};


function comChoice(imageWhere){
  return Object.entries(dictionary).find(function(v) {
    return v[1] ===imageWhere;
  })[0];
};

var intervaling;
function intervalMaker() {
  intervaling = setInterval(function() {
    if(imageWhere === dictionary.rock){
      imageWhere === scissor;
    }else if(imageWhere === dictionary.scissor){
      imageWhere === dictionary.paper;
    }else{
      imageWhere === dictionary.rock;
    }
    document.querySelector('#computer').style.background = 'url(./image/rrem1.jpg)' + imageWhere + '0';
  }, 500);
};
intervaling = intervalMaker();

document.querySelectorAll('.btn').forEach(function(btn) {
  btn.addEventListener('click',function() {
    clearInterval(intervaling)
    setTimeout(function(){
      intervalMaker();
    }, 1000)
    var myChoice = this.textContent;
    console.log( myChoice, comChoice(imageWhere));
    if (myChoice ==='rock'){
      if (comChoice(imageWhere) ==='rock'){
        console.log("비겼네!")
      }else if(comChoice(imageWhere) ==='scissor'){
        console.log("이겼다!")
      }else{
        console.log("졌다..")
      }
    }if (myChoice ==='scissor'){
      if (comChoice(imageWhere) ==='rock'){
        console.log("졌다..")
      }else if(comChoice(imageWhere) ==='scissor'){
        console.log("비겼네!")
      }else{
        console.log("이겼다!")
      }
    }if (myChoice ==='paper'){
      if (comChoice(imageWhere) ==='rock'){
        console.log("이겼다!")
      }else if(comChoice(imageWhere) ==='scissor'){
        console.log("졌다..")
      }else{
        console.log("비겼네!")
      }
    }
  });
});

제로초님의 강의를 보고 짰습니다..만 이미지조차 나오지 않아요.. 왜..?

폐기..

맨날 잘 안 되는..위치 조정하기 css가 anthand만 적용됨. 왜..? 그냥 HTML 태그에 스타일로 넣었다..

[CSS] CSS Position (relative, absolute) 한 방에 정리!

목차 1. Position 속성 1-1. Relative 1-2. Absolute 1-2-1. 부모 relative & 자식 absolute 1-2-2. 조상 relative & 자식 absolute 1-2-3. 조상 position 없음 & 자식 absolute 1-3. Fixed CSS Position CS..

creamilk88.tistory.com

.anthand {
    position: fixed;
    top: 50px;
    left: 30px;
};

.ramhand {
    position: fixed;
    top: 50px;
    left: 300px;
};

.main {
    position: fixed;
    top : 100px;
    left: 50px;
};

완성본

HTML+CSS

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>replit</title>
  <link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
  <script src="script.js"></script>
  <script src="https://replit.com/public/js/replit-badge.js" theme="blue" defer></script> 

  <div style="position: fixed; top: 50px; left: 10px;">
    <img id="img" src="./image/rrem1.GIF" height="150px" width="150px" />
  </div>

   <div  style="position: fixed; top: 50px; right: 10px;">
    <img id="img2" src="./image/ram1.GIF" height="150px" width="150px"/>
  </div>
  
   <div style="position: fixed; top: 200px; left: 110px;">
     <h4>       *개미 생일 축하 프로그램*</h4>
   </div>
  
  <div style="position: fixed; top: 230px; left: 80px;">
     <h5>        계속 도전할 수 있음 / 개미 입장으로 진행</h5>
  </div>
   <div style="position: fixed; top: 250px; left: 120px;">
    <h5>        ~~반응 속도가 느립니다~~</h5>
   </div>
  
  <div class="button" style="position: fixed; top: 300px; left: 50px;">
    <button onclick="rockImg()" style='font-size:20px; padding:10px;'>rock</button>
    <button onclick="sciImg()" style='font-size:20px; padding:10px;'>scissor</button>
    <button onclick="papImg()" style='font-size:20px; padding:10px;'>paper</button>
  </div>
  
  <div class="main" style="position: fixed; bottom: 30px; left: 0px;">
    <img id="img3" src="./image/fight.jpg" height="190px" width="380px" />
  </div>
  
</body>
</html>

// 버튼 클릭시 이미지 바뀜 함수
function rockImg() {
  document.getElementById("img").src = "./image/11.PNG";
  var RamNum = Ramchoice();
  // console.log("rockImg:" + RamNum);
  var antNum = 1;
  WhoWin(antNum, RamNum);
};
function sciImg() {
  document.getElementById("img").src = "./image/22.PNG";
  var RamNum = Ramchoice();
  var antNum = 2;
  WhoWin(antNum, RamNum);
};
function papImg() {
  document.getElementById("img").src = "./image/33.PNG";
  var RamNum = Ramchoice();
  var antNum = 3;
  WhoWin(antNum, RamNum);
};

//람쥐이미지 랜덤선택-> 이미지바꾸기 함수
function Ramchoice() {
  var comNum = Math.floor(Math.random() * (4 - 1) + 1)
  if (comNum == 1) {
    document.getElementById("img2").src = "./image/1.PNG";
  } else if (comNum == 2) {
    document.getElementById("img2").src = "./image/2.PNG";
  } else {
    document.getElementById("img2").src = "./image/3.PNG";
  }
  return comNum;
};

// 승부 판별 함수
function WhoWin(a, b) {
  if (a == b) {
    console.log("비겼습니다")
    document.getElementById("img3").src = "./image/fight.jpg";
  } else if (a == 1 && b == 2) {
    console.log("이겼습니다")
    document.getElementById("img3").src = "./image/rrem2.jpg";
  } else if (a == 2 && b == 3) {
    console.log("이겼습니다")
    document.getElementById("img3").src = "./image/rrem2.jpg";
  } else if (a == 3 && b == 1) {
    console.log("이겼습니다")
    document.getElementById("img3").src = "./image/rrem2.jpg";
  } else if (a == 1 && b == 3) {
    console.log("졌습니다")
    document.getElementById("img3").src = "./image/ram2.jpg";
  } else if (a == 1 && b == 3) {
    console.log("졌습니다")
    document.getElementById("img3").src = "./image/ram2.jpg";
  } else {
    console.log("졌습니다")
    document.getElementById("img3").src = "./image/ram2.jpg";
  };
};

[Javascript] Math.random() 난수 생성, 랜덤 숫자/번호 추출

자바스크립트 랜덤으로 숫자를 추출해야 할 경우가 종종 있다. 이러한 난수를 생성하기 위해 사용하는 Math.random() 매서드에 대해 알아보자. 목차 Math.random() 숫자 범위 지정하고, 소수점을 자연수

fromnowwon.tistory.com

var comNum = Math.floor(Math.random() * (4 - 1) + 1)

실행이미지

모바일로 플레이해야 합니다~

https://antBirthday.goldchae.repl.co

replit

*개미 생일 축하 프로그램* 계속 도전할 수 있음 / 개미 입장으로 진행 ~~반응 속도가 느립니다~~ rock scissor paper

antBirthday.goldchae.repl.co

저작자표시

'🖥️ Frontend > Frontend 프로젝트' 카테고리의 다른 글

<HTML.CSS.JS>로또 추첨 게임 (0)	2022.08.04
<HTML.CSS.JS> 아빠 생일 프로그램 (0)	2022.07.28
<HTML.CSS.JS>람지 키우기 (0)	2022.07.28
<HTML.CSS.JS>틱택토 게임-미완 (0)	2022.07.28
<HTML.CSS.JS> 구구단게임 (0)	2022.07.26