가위바위보 게임 구현

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>rsp_answer.html</title>
    </head>
    <body>
    
    	<table border="1">
    		<tr>
    			<td>User</td>
    			<td rowspan="2"><img src="images/win.png" width="100" id="result"></td>
    			<td>Computer</td>
    		</tr>
    		<tr>
    			<td><img src="images/rsp1.png" width="100" id="userImage"></td>
    			
    			<td><img src="images/rsp3.png" width="100" id="comImage"></td>
    		</tr>		
    	</table>
    	
    	<script>
    		//사용자 입력
    		var userInput = prompt("가위 바위 보를 입력하세요");
    		var userNum = 0;
    		if (userInput == "가위") {
    			userNum = 1;
    		} else if (userInput =="바위"){
    			userNum = 2;
    		} else if (userInput == "보"){ 
    			userNum = 3;
    		} else {
    			 usertext = prompt ("다시 정확히 입력하세요: 가위,바위,보")
    		}
    		
    		console.log(userInput);
    		
    		
    		//컴퓨터가 3가지 중의 임의의 1개
    		var comNum = parseInt(Math.random() * 3) + 1; //1 ~ 3 랜덤수
    
    		var userImage = document.getElementById("userImage");
    		console.log(userImage);
    		var comImage = document.getElementById("comImage");
    		userImage.src = "images/rsp" + userNum + ".png";
    		comImage.src = "images/rsp" + comNum + ".png";
    		
    		
    		var elResult = document.getElementById("result");
    		
    		if (userNum == comNum) {
    			console.log("비김");
    			elResult.src = "images/draw.png";
    		} else if(userNum == 1 && comNum == 2) {
    			console.log("짐");
    			elResult.src = "images/lose.png";
    		} else if(userNum == 1 && comNum == 3) {
    			console.log("이김");
    			elResult.src = "images/win.png";
    		} else if(userNum == 2 && comNum == 3) {
    			console.log("짐");
    			elResult.src = "images/lose.png";
    		} else if(userNum == 2 && comNum == 1) {
    			console.log("이김");
    			elResult.src = "images/win.png";
    		} else if(userNum == 3 && comNum == 1) {
    			console.log("짐");
    			elResult.src = "images/lose.png";
    		} else if(userNum == 3 && comNum == 2) {
    			console.log("이김");
    			elResult.src = "images/win.png";
    		} 
    				
    			
    		
    	</script>
    </body>
    </html>

     

    'JavaScript > Vanilla JavaScript' 카테고리의 다른 글

    입력한 수의 합계 구하기  (0) 2023.09.11
    랜덤수 생성  (0) 2023.09.11
    간단한 inline Script  (0) 2023.09.11

    댓글