경영학도의 IT 일지

[자바스크립트] 컴퓨터랑 가위바위보 본문

JavaScript & JQuery

[자바스크립트] 컴퓨터랑 가위바위보

그래서 대체 얼마야! 2022. 4. 1. 00:42
<script>
	document.write("<h1>컴퓨터 가위, 바위, 보 맞추기</h1>"); //사실 이기는 거 아니고 똑같이 내는 거임
	
	let game = prompt("가위, 바위, 보 중 무엇을 낼까요?", "가위");
	let gameNum;
	switch(game) { // 입력한 값과 컴퓨터가 출력하는 값을 비교하기 위해서 gameNum 이라는 변수에 숫자를 넣는다.
		case "가위": 
			gameNum = 1;
		break;
		case "바위":
		  gameNum = 2;
		break;
		case "보":
			gameNum = 3;
		break;
		default: alert("잘못 작성하였습니다.");
		location.reload(); //새로고침(참고)
		}

		let com = Math.ceil(Math.random()*3); //컴퓨터가 0~1에서 난수를 산출하여 해당 숫자에 3을 곱한다. 그리고 소수점을 지우기 위해서 올림작업을하면 1이나 2나 3만 나온다.

		document.write("<img src=images/math_img_" + com + ".jpg>"); //컴퓨터가 출력한 값에 따라 이미지를 다르게 출력한다.

		if ( gameNum == com ) { 	// 같으면 같다고 얘기(이미지출력)하고, 아니면 아니라고(이미지)출력.
				 document.write("<img src=images/game_1.jpg>");
		}
		else document.write("<img src=images/game_2.jpg>");

</script>

이건 이미지 파일이 없으면, 확인하기가 어렵기 때문에 여기다가 저장한다.

참고로 이미지파일은 "images" 라는 명칭의 폴더 안에 넣어서 실행한다.

 

`math_ob2_test.html
0.00MB
game_1.jpg
0.01MB
game_2.jpg
0.01MB
math_img_1.jpg
0.01MB
math_img_2.jpg
0.01MB
math_img_3.jpg
0.01MB

 

 

* 핵심 : Switch구문 쓰는게 아직 어설픈데, 쓸수 있도록 다시 복습한다.

      ( 변수 설정, switch(변수) { case "변수값" : 변수2 = 결과값; break; 문구 반복 후, default : alert(); }

      location.href 는 접속 / location.reload(); 는 새로고침.

      난수 생성은 Math.random(); / 0~1사이의 소수점 생성!

Comments