웹 개발 이것저것 - 프로젝트 - 가위 바위 보 도마뱀 스폭 게임

가위, 바위, 보 업데이트 버전 게임이라고 합니다.

index.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>Rock...</title>

  <script src="https://kit.fontawesome.com/833be080c6.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="./main.css">
  <script defer type="module" src="./index.js"></script>  
</head>

<body>
  <div class="card">
    <h1>rock paper scissors and so on</h1>

    <h2 class="user-score-text"><span class="score-you"></span></h2>
    <div class="player-one">
      <i class="far fa-hand-rock fa-3x"></i>
      <i class="far fa-hand-paper fa-3x"></i>
      <i class="far fa-hand-scissors fa-3x"></i>
      <i class="far fa-hand-lizard fa-3x"></i>
      <i class="far fa-hand-spock fa-3x"></i>
    </div>
    
    <h2 class="pc-score-text"><span class="score-pc"></span></h2>
    <div class="player-two">
      <i class="far fa-hand-rock fa-3x"></i>
      <i class="far fa-hand-paper fa-3x"></i>
      <i class="far fa-hand-scissors fa-3x"></i>
      <i class="far fa-hand-lizard fa-3x"></i>
      <i class="far fa-hand-spock fa-3x"></i>
    </div>

    <div class="refresh-box">
      <i class="refresh fas fa-sync-alt fa-2x"></i>
    </div>

    <h3 class="result"></h3>
  </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');

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

body {
  height: 100vh;  
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-family: 'Poppins';
}

.card {
  min-height: 400px;
  width: 450px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;
}

h1 {
  background-color: lightblue;
  height: 60px;
  width: 100%;
  border-radius: 10px 10px 0 0;
  padding: 10px;
  text-transform: capitalize;
  font-size: 1.7rem;
  text-align: center;
}

.player-one {
  color: red;
}

.player-two {
  height: 70px;
  width: 70px;
  color: blue;  
  position: relative;
}

i {
  margin: 5px;
  cursor: pointer;
}

i:hover {
  filter: brightness(60%);
}

i:active {
  transform: scale(0.98);
}

h2 {  
  display: flex;
  justify-content: space-between;
  position: absolute;  
  bottom: 160px;
}

.user-score-text {    
  left: 50px;  
  color: red;
}

.pc-score-text {  
  right: 50px;
  color: blue;
}

.player-two i {
  height: 100%;
  width: 100%;
  position: absolute;  
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: cubic-bezier(0.075, 0.82, 0.165, 1);
}

.player-two i.show {
  transform: scale(1);
}

.result {  
  height: 40px;
  width: 100%;    
  text-align: center;
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

index.js

// Elements
const playerChoices = document.querySelectorAll('.player-one i')
const pcChoices = document.querySelectorAll('.player-two i')

// Game rule
const rule = {
  0: [2, 3],
  1: [0, 4],
  2: [1, 3],
  3: [1, 4],
  4: [2, 0],
}

// Variables
let playerScore = 0
let pcScore = 0

// Event handlers
playerChoices.forEach((choice, idx) => {
  choice.addEventListener('click', () => {
    showResult(idx)
  })
})

document.querySelector('.refresh').addEventListener('click', () => {
  if (document.querySelector('.result').textContent !== '') {
    playerScore = 0
    pcScore = 0
    showMessage('reset')
    clearPcChoices()        
  }
})

// functions
function showResult(idx) {  
  let flag = 0
  const pcChoice = choseRandom()
  clearPcChoices()
  pcChoices[pcChoice].classList.add('show')

  rule[idx].forEach((i) => {
    if (i === pcChoice) {
      playerScore++
      showMessage('Won')
      flag = 1
    }
  })
  rule[pcChoice].forEach((i) => {
    if (i === idx) {
      pcScore++
      showMessage('Lost')
      flag = 1
    }
  })
  if (flag === 0) {
    showMessage('Tie')
  }
  flag = 0
}

function choseRandom() {
  return Math.floor(Math.random() * 5)
}

function showMessage(msg) {
  document.querySelector('.score-you').textContent =
    msg === 'reset' ? '' : playerScore
  document.querySelector('.score-pc').textContent =
    msg === 'reset' ? '' : pcScore
  document.querySelector('.result').textContent = msg === 'reset' ? '' : msg
}

function clearPcChoices() {
  pcChoices.forEach((pc) => {
    pc.classList.remove('show')
  })
}

데모

Rock...

rock paper scissors and so on

jin-co-jcg.vercel.app

프로젝트 출처

https://www.udemy.com/course/javascript-web-projects-to-build-your-portfolio-resume/

728x90

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

배열 안에 객체 밸류 바꾸기 (0)	2022.12.27
드래그 앤 드랍 (0)	2022.12.26
프로젝트 - 계빨 게임 (Math Sprint) (0)	2022.12.24
연산자 (Operators) (0)	2022.12.24
모듈 (Module) (0)	2022.12.21

프로젝트 - 가위 바위 보 도마뱀 스폭 게임

'프론트엔드 > 자바스크립트' 카테고리의 다른 글

'프론트엔드/자바스크립트' Related Articles

티스토리툴바