JavaScript

[JavaScript] 승부차기 게임 만들기

DevHwanㅤ

·

2018. 8. 10. 00:19

이번 아시안 게임에서 한일전이 한번 나오지 않을까 하는 마음에 승부차기 게임을 만들었다.  순서대로 슛을 쏘아서 스코어를 갱신.

마지막엔 스코어를 비교해서 3가지의 결과를 도출하는 게임이다. 팀은 한국과 일본이며

우선 구조부터 보자.


HTML





1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<body>
  <div class="wrap">
    <div class="score-board">
      <div class="korea-shots">
        <span>한국 남은슛</span>
        <span id="kr-number">5</span>
        <span>번</span>
      </div>
      <div class="japen-shots">
        <span>일본 남은슛</span>
        <span id="jp-number">5</span>
        <span>번</span>
      </div>
      <div class="korea-score">
        <div class="score-name"><img src="./img/kor-flag.jpg" alt="flag" width="40%">한국<span id="kr-score" class="panel-score">0</span></div>        
      </div>
      <div class="japen-score">
        <div class="score-name"><span id="jp-score" class="panel-score">0</span>일본<img src="./img/japen-flag.jpg" alt="flag" width="40%"></div>        
      </div>
      <div id="score-text">
      Shoot 버튼을 클릭해서 진행합니다.
      </div>
    </div>
    <div class="control-panel">
      <div class="div-korea">
        <div class="panel-name">한국</div>
        <button onclick="onKoreaShoot()" class="btn-korea"> Shoot</button>
      </div>
      <div class="div-japen">
        <div class="panel-name">일본</div>
        <button onclick="onJapenShoot()" class="btn-japen" disabled> Shoot</button>
      </div>
    </div>
  </div>
</body>
 
cs


구성은 간단하다. 아래에 슛버튼을 누를수있는 컨트롤 패널이 있으며 위에는 스코어가 표시될 점수 , 남은슛 횟수 , 아래에 상황을

보여줄 상황판이 있다. 그리고 자세히 보면 컨트롤 패널에 일본 슛 버튼이 disabled 되있는걸 볼 수가 있다. 한국팀이 먼저 슈팅을

시작한다는 뜻이다. 레이아웃도 간단히 구성하였고 다음 CSS를 보자.


CSS


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
body{
  font-family: sans-serif;
}
img{
  vertical-align: middle;
}
  .panel-score{
    font-size: 30px;
    margin: 25px;
  }
  .wrap{
    width: 100%;
  }
  .korea-shots{
    display: inline-block;
    width: 45%;
    text-align: center;
    background: white;
  }
  .japen-shots{
    display: inline-block;
    width: 45%;
    text-align: center;
    background: white;
  }
  .score-board{
    width: 500px;
    height: 400px;
    margin: 0 auto;
  }
  .korea-score{
    width: 45%;
    float: left;
    margin-top:20%;
    text-align: center;
    font-size: 18px;
  }
  .japen-score{
    width:45%;
    float: right;
    margin-top:20%;
    text-align: center;
    font-size: 18px;
    }
  #score-text{
    height: 30px;
    background-color: #fcfcfc;
    text-align: center;
    margin-top:60%;
    border-radius: 10px;
    border :2px solid steelblue;
  }
  .control-panel{
    width: 500px;
    margin: 0 auto;
    height: 200px;
  }
  .div-korea{
    width: 50%;
    float: left;
    margin: 0 auto;
    text-align: center;
    margin-top:10%;
  }
  .div-japen{
    width: 50%;
    float: left;
    margin: 0 auto;
    text-align: center;
    margin-top:10%;
  }
  button{
    padding: 20px 40px;
    border-radius: 10px;
    background-color: #fcfcfc;
    border: 1px solid #dddddd;
  }
  button:hover{
    border : 1px solid steelblue;
    color: steelblue;
    transition: 0.8s;
  }
  button:enabled{
    color: steelblue;
    font-weight: bold;
  }
 
cs

딱히 특별한건 없지만 처음에 시작할때 한국팀이 먼저 시작한다는걸 알리기 위해 enabled에 컬러와 bold를 주었다. 브라우저에서 

실행해 보자.

위와 같은 결과가 나온다. 배경으로 축구장 배경도 넣고 해봤는데.. 별로였다. 역시 디자인은 어려운 것 같다..

여튼 제법 승부차기 게임 같은 화면 구성을 가진다. 저기서 바뀌는건 상황판 , 스코어 , 남은슛 이다. 

Script는 다음에 조금 더 알아보자.

반응형
저작자표시 비영리 변경금지

'JavaScript' 카테고리의 다른 글

Eslint 초기 설정하기  (0) 2021.02.01
Vue.js 인스턴스 & 컴포넌트  (0) 2018.09.09
Ajax 와 JSON 서버와 통신하기  (0) 2018.08.23
[javaScript] 승부차기 게임 만들기 - 3  (0) 2018.08.19
[JavaScript] 승부차기 게임 만들기 - 2  (0) 2018.08.14

JavaScript 카테고리와 연관된 콘텐츠