티스토리 뷰

수업문제

[문제] 1월 5일 (js, jquery 가위바위보 게임)

WhaleTREE 2022. 1. 5. 18:28

학습정리-01-05.txt
0.00MB

1. 가위 바위보 게임을 아래의 고객 요구 사항에 따라 짜시오.
- js, jquery 문법으로 작성 할것(JSP 문법 필요 없음)
- 최대한 생성자 객체를 만들어서 할것.
- 우선 기능 위주로 하고, UI 는 크게 신경 안쓰셔도 됩니다. (우선 이미지 정도만 나오게 할것) 
- 기존에 짠 UI 소스 그대로 사용 해도됨

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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
<!DOCTYPE html>
<html>
 
   <head>
      <title>Javascript</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
      <script>
         
         function RSPGame(uRsp, comRsp){
            this.uRsp = uRsp;
            this.comRsp = comRsp;
 
            
            this.playResult = () => {
               if(this.uRsp == '가위' && this.comRsp == '가위'){
                  return '비겼습니다.';
               }
               else if(this.uRsp == '바위' && this.comRsp == '바위'){
                  return "비겼습니다.";
               }
               else if(this.uRsp == '보' && this.comRsp == '보'){
                  return "비겼습니다.";
               }
               else if(this.uRsp == '가위' && this.comRsp == '보'){
                  return "이겼습니다.";
               }
               else if(this.uRsp == '바위' && this.comRsp == '가위'){
                  return '이겼습니다.';
               }
               else if(this.uRsp == '보' && this.comRsp == '바위'){
                  return '이겼습니다.';
               }
               else if(this.uRsp == '가위' && this.comRsp == '바위'){
                  return '졌습니다.';
               }
               else if(this.uRsp == '바위' && this.comRsp == '보'){
                  return '졌습니다.';
               }
               else if(this.uRsp == '보' && this.comRsp == '가위'){
                  return '졌습니다.';
               }
 
            };
 
         };
 
         function makeComRsp(){
            let rspNum = Math.floor(Math.random() * 3); // 0, 1, 2
 
               if(rspNum == 1){
                  return '가위';
               }
               else if(rspNum == 2){
                  return '바위';
               }
               else{
                  return '보';
               }
         }
 
         function eventHandler(uRsp){
            $("#result").empty();
 
            let comRsp = makeComRsp();
 
            let playRsp = new RSPGame(uRsp, comRsp);
            
            let resultRsp = playRsp.playResult();
 
            $("#result").append("<h3>유저 : " + uRsp + "</h3>");
            $("#result").append("<h3>컴퓨터 : " + comRsp + "</h3>");
            $("#result").append("<h3>" + resultRsp + "</h3>");
 
            if(uRsp == '가위'){
               $("#user").attr("src", "rsp_img/black_sicssor.png");
            }
            else if(uRsp == '바위'){
               $("#user").attr("src", "rsp_img/black_rock.png");
            }
            else{
               $("#user").attr("src", "rsp_img/black_paper.png");
            }
 
 
            if(comRsp == '가위'){
               $("#com").attr("src", "rsp_img/black_sicssor.png");
            }
            else if(comRsp == '바위'){
               $("#com").attr("src", "rsp_img/black_rock.png");
            }
            else{
               $("#com").attr("src", "rsp_img/black_paper.png");
            }
 
 
            if(resultRsp == '이겼습니다.'){
               $("#result").append(" <img src='rsp_img/win.png'>");
            }
            else if(resultRsp == '졌습니다.'){
               $("#result").append(" <img src='rsp_img/lose.png'>");
            }
            else {
               $("#result").append(" <img src='rsp_img/sad.png'>");
            }
 
         };
 
         $(document).ready(function(){
            $("#siss").click( () => {
               eventHandler($("#siss").val())
            } );
           
            $("#rock").click( () => {
               eventHandler($("#rock").val())
            } );
 
            $("#paper").click( () => {
               eventHandler($("#paper").val())
            } );
 
         });
         
      </script>
 
      <style>
         body{
            text-align: center;
         }
 
         img{
            width: 200px;
            height: 200px;
            margin: 20px;
         }
 
         input{
            margin: 10px;
         }
      </style>
        
   </head>
 
   <body>
      <h1>가위바위보 게임</h1>
 
      <img src="rsp_img/hacker.png" id="user">
      <img src="rsp_img/com.png" id="com">
 
      <h2>유저 VS 컴퓨터</h2>
 
      <form action="">
         <input type="button" id="siss" value="가위">
         <input type="button" id="rock" value="바위">
         <input type="button" id="paper" value="보">
      </form>
 
      <div id="result">
 
      </div>
 
   </body>
 
</html>
 cs

 

내일 아래 한번더 돌리도록 하겠습니다.

1. jS - 국영수를 입력하는 3개의 input 박스를 생성후 , 

-국영수를 입력하는 3개의 input 박스를 생성
-총점 과 리셋 버튼을 생성
-총점 버튼을 누루면 총점과 평균이 나타남

'수업문제' 카테고리의 다른 글

[문제] React 게시판 TO DO LIST  (0) 2022.02.04
[문제] 1월 11일 (DB 설계 - 모델링)  (0) 2022.01.11
[문제] 1월 4일 (js- 국영수 생성자 & jQurey 이벤트)  (0) 2022.01.04
[문제] 1월 3일(js-가위 바위 보, 스프링 시큐리티, security-context.xml, 인증과 권한)  (0) 2022.01.03
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
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
글 보관함