연말까지 매일 지속적으로 웹 사이트를 만드는 대학생~ 54일째 자바스크립트로 가위바위보 게임~

16702 단어 JavaScriptCSS

입문


안녕하세요@70days_js
나는 가위바위보 게임을 만들었다.
여느 때처럼 아무 참고도 없이 했어요.
그러니까 더 좋은 가위바위보 알고리즘이 있으면 알려주세요.
오늘이 54일째다.(2019/12/11)
잘 부탁드립니다.

사이트 URL


한 일


이런 느낌의 가위바위보 게임(gif)↓을 만들었어요.

승리는 빨간색.
파란색으로 졌어요.
무승부는 노란색으로 표현된다.

전체 텍스트


html↓
  <body>
    <section>
      <div id="jankenWord">勝負の刻!</div>
    </section>
    <section>
      <div id="MyjankenImage"></div>
      <div id="jankenImage"></div>
    </section>
    <section>
      <div id="rock" class="jankenButton">グー</div>
      <div id="scissors" class="jankenButton">チョキ</div>
      <div id="paper" class="jankenButton">パー</div>
    </section>
  </body>
css↓
body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section {
  display: flex;
}
div {
  width: 100px;
  height: 100px;
  border: solid 1px black;
  margin: 50px 0 0 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#jankenImage {
  background-size: cover;
}

#MyjankenImage {
  background-size: cover;
}

#jankenImage::before {
  content: "敵";
  margin-top: 130px;
}
#MyjankenImage::before {
  content: "Me";
  margin-top: 130px;
}

.jankenButton {
  border-radius: 50%;
  cursor: pointer;
}

.click-none {
  pointer-events: none;
}
JavaScript↓
let janken = {
  0: "rock",
  1: "paper",
  2: "scissors"
};

let img = {
  rock: "day54/rock.png",
  scissors: "day54/scissors.png",
  paper: "day54/paper.png"
};

let jankenImage = document.getElementById("jankenImage");
let MyjankenImage = document.getElementById("MyjankenImage");
let jankenWord = document.getElementById("jankenWord");
let jankenButton = document.getElementsByClassName("jankenButton");

for (var i = 0; i < jankenButton.length; i++) {
  let jankenChoice = jankenButton[i];
  jankenChoice.addEventListener("click", function() {
    let random = Math.floor(Math.random() * 3);
    jankenImage.style.backgroundImage = "url(" + img[janken[random]] + ")";
    MyjankenImage.style.backgroundImage = "url(" + img[jankenChoice.id] + ")";
    judge(random, jankenChoice.id);
  });
}
//引数はtekidaは乱数、meは選択した要素のid
function judge(tekida, me) {
  let teki = janken[tekida];
  if (teki === me) {
    jankenWord.innerHTML = "ヒキワケ";
    jankenWord.style.backgroundColor = "rgba(255,250,50, .5)";
  } else if (me === "rock" && teki === "scissors") {
    jankenWord.innerHTML = "カチ";
    jankenWord.style.backgroundColor = "rgba(255,50,50, .5)";
  } else if (teki === "rock" && me === "scissors") {
    jankenWord.innerHTML = "マケ";
    jankenWord.style.backgroundColor = "rgba(55,50,250, .5)";
  } else if (me.length > teki.length) {
    jankenWord.innerHTML = "カチ";
    jankenWord.style.backgroundColor = "rgba(255,50,50, .5)";
  } else {
    jankenWord.innerHTML = "マケ";
    jankenWord.style.backgroundColor = "rgba(55,50,250, .5)";
  }
}

가위바위보 알고리즘


중요한 건 여기죠?
이번에 나는 가위바위보를 해쉬로 만들었다.
let janken = {
0: "rock",
1: "paper",
2: "scissors"
};
그때 나는 글자 수에 착안했다.
그래서 록을 제외하고는 글자 수가 클수록 강해지는 법칙을 발견했다.
scissors > paper
paper > rock
그래서 다음과 같이 적었습니다.
if (teki === me) {
데이지
} else if (me === "rock"&& teki === "scissors") {
머리띠
}else if (teki === "rock"&& me === "scissors") {
고기전
} else if (me.length > teki.length) {
머리띠
} else {
고기전
}
글자 수가 아니라 숫자로도 돼요.
다만, 이렇게 가위바위보를 하면 성립할 수 있다.

감상


논리를 생각해서 잘 행동하면 즐겁다.
그러나 나도 너무 정확하거나 최고를 추구하는 것은 자신의 성에 맞지 않는다는 것을 깨달았다.
앞으로도 편하고 즐겁게 했으면 좋겠어요.
HTML·CSS에서 자주 사용하는 기술
OSS의 pressenter를 어두운 테마로 사용자 정의합니다!

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage