메모장

JavaScript 03 < JS 실습문제 > 본문

JavaScript/개념정리

JavaScript 03 < JS 실습문제 >

Itchild 2024. 4. 22. 22:35
728x90
반응형

 

JS 실습문제

 

Q1.) 컴퓨터와 내가 주사위를 굴렸을때 랜덤으로 나오는 숫자가 더 큰쪽이 승리라고 출력해주기 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS 최종 실습 예제</title>

============================================================

순서 2. 스타일 지정해주기 

<style type="text/css">
   #title { 게임시작 버튼을 꾸며 주기 위한 세팅
      width: 450px; 넓이 450
      height: 30px; 높이 30
      margin: 5px; 테두리와 테두리 사이의 간격 5
      background-color: lightgreen; 배경색
      cursor: pointer; 여기에 커서를 올렸을때 마우스 포인터가 클릭 버튼처럼 바뀌도록 
      line-height: 30px; 글 안의 폭 
      text-align: center; 텍스트 가운데 정렬
   }
   #content { 컴퓨터와 나 (id는 # ,class는 . 으로 표시)
      width: 450px; 넓이 450
      height: 200px; 높이 200
      margin: 5px; 테두리와 테두리 사이 간격
      background-color: lightblue; 배경색
   }
   span, img { 이미지와 컴퓨터와 나 사이의 <span>태그의 간격 
      margin: 5px; 
   }
</style>
============================================================

</head>
<body>

============================================================

순서 1. 먼저 틀을 만들어 준다. 게임을 진행할 때 게임시작을 눌러야 하므로 게임시작 네모박스
컨텐츠 게임 내용이 들어갈 "content" 안에 컴퓨터와 내가 경기를 해야되니까 둘이 들어간다. 
<div>,<span> 태그 모두 의미가 필요없을때 사용하는데 <div>태그는 블록 레벨 엘리멘탈이라서 한줄을
다 차지하는데 <span>태그는 인라인 엘리멘탈 이라서 자기 자신의 값 공간의 크기만큼만 차지한다. 
나란히 놓을 예정 이므로 <span> 태그를 사용하여 컴퓨터와 나의 게임을 만들어 준다. 

<div id="title">게 임 시 작</div>
<div id="content">
   <span>COM</span>
   <img id="com" alt="COM 이미지" src="images/dice01.png">
   <span>ME</span>
   <img id="me" alt="ME 이미지" src="images/dice01.png">
</div>
============================================================

순서 3. 자바스크립트

<script type="text/javascript">
   document.querySelector('#title').onclick = function(){ title의 박스를 클릭 딱 눌렀을때 
      if(this.firstChild.nodeValue == '게 임 시 작'){ -- 그 값이 게임시작 이라고 되어있다면 
      '#title'의 첫번째 자식의 자식노드값을 선택  '#title'에는 하나의 값 밖에 없으므로
      첫번째 자식의 자식노드 값이라지만 값이 하나라서 상관이 없다. 

         this.firstChild.nodeValue = '결 과 확 인';  -- 클릭했으면 결과 확인이라고 바꿔줘 
         this.style.backgroundColor = 'green';   배경도 green으로 바꿔줘 
         this.style.color = 'white'; 글씨는 white
         
         play();  -- 그리고 play()라는 함수 실행시켜줘 / 게임을 실행하는 함수 !
      }
      else{ -- 결과 확인으로 바뀌어 있다면 
         this.firstChild.nodeValue = '게 임 시 작'; 다시 게임시작으로 바꿔줘 
         this.style.backgroundColor = 'lightgreen'; 다시 배경색
         this.style.color = 'black'; 다시 글씨 
         
         stop(); -- 그리고 stop()이라는 함수 실행시켜줘 / 게임을 마치는 함수 !
      }
   };

============================================================
   
순서 4. 함수 기능 만들기 

   function play(){ 게임을 실행하는 함수 
      document.querySelector('#com').src='images/dice.gif'; 'com'라는 이름의 이미지엔 이 gif가
      document.querySelector('#me').src='images/dice.gif'; 'me'라는 이름의 이미지에도 이 gif가
   } title 버튼을 딱 누르면 실행되는것 
   
   function stop(){ 게임을 종료하려고 할때 
      var comNum=Math.floor(Math.random()*6)+1; 컴퓨터의 랜덤 숫자
      var meNum=Math.floor(Math.random()*6)+1; 나의 랜덤 숫자
      
      document.querySelector('#com').src='images/dice0'+comNum+'.png'; 
      'com'이라는 이름의 이미지엔 'images/dice0'랜덤숫자'.png' 랜덤숫자 1~6까지 존재 
      document.querySelector('#me').src='images/dice0'+meNum+'.png';
      'me'이라는 이름의 이미지엔 'images/dice0'랜덤숫자'.png' 랜덤숫자 1~6까지 존재 
     예시 ) 'images/dice01.png'

자바의 쓰레드 같은 기능을 하는 setTimeout ( 함수(), 느리게 할 시간(1000 = 1초) );

      setTimeout(function(){
         if(comNum < meNum){ 내 숫자가 더 크다면
            alert('승리!'); 승리
         }
         else if(comNum == meNum){ 동률이라면 
            alert('무승부'); 무승부
         }
         else{ 둘 다 아니라면 
            alert('패배...'); 패배
         }
      },1000); 1초 뒤에 
   }
</script>

</body>
</html>
 

Q2.) 컴퓨터와 내가 가위바위보 내기를 한다 . 똑같이 승부를 판결 해준다. 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>가위바위보 실습</title>

============================================================
순서 2. 스타일 지정해주기

<style>
	#title{
	width: 450px;
	height: 50px;
	margin: 5px;
	background-color: lightblue;
	cursor: pointer;
	line-height: 50px;
	text-align: center;
	}
	#content{
	width: 450px;
	height: 200px;
	margin: 5px;
	background-color: lightgreen;
	text-align: center;
	}
	span, img{
		margin: 5px;
		text-align: center;
	}

</style>
============================================================
</head>
<body>

============================================================
순서 1. 틀 먼저 잡아주기	

    <div id="title">게 임 시 작</div>
	<div id="content">
		<span>COM</span> 
		<img id="com" alt="COM 이미지" src="images/scissors.png"> 
		<span>ME</span> 
		<img id="me" alt="ME 이미지" src="images/scissors.png">
	</div>
============================================================
3. 자바스크립트 실행 시켜주기

<script type="text/javascript">
	document.querySelector('#title').onclick = function(){
		if(this.firstChild.nodeValue == '게 임 시 작'){
			this.firstChild.nodeValue = '결 과 확 인';
			this.style.backgroundColor = 'pink';
			this.style.color = 'white';
			
			play();
		}else{
			this.firstChild.nodeValue = '게 임 시 작';
			this.style.backgroundColor = 'lightblue';
			this.style.color = 'black';
			
			stop();
		}	
	};

============================================================
순서 4. 함수 실행

배열을 만들었다. 	
   var images = ["rock","scissors","paper"];
	
	function play(){
		document.querySelector('#com').src='images/가위바위보.gif';
		document.querySelector('#me').src='images/가위바위보.gif';
	}
	function stop(){
		var comNum = Math.floor(Math.random()*3); //배열이 0~2 까지 시작하므로 아까 (랜덤*2)+1 실수 하지 말 것
		var meNum = Math.floor(Math.random()*3); // 배열이 0~2 까지 시작하므로 아까 (랜덤*2)+1 실수 하지 말 것
		
		 document.querySelector('#com').src='images/'+images[comNum]+'.png'; // 혹시 나중에 배열글씨를 쓸일이 있을지 모르므로 png빼기  // 배열에 이미 .png가 존재하므로 뒤에 .png를 또 붙이지 말 것
	     document.querySelector('#me').src='images/'+images[meNum]+'.png';  // 혹시 나중에 배열글씨를 쓸일이 있을지 모르므로 png빼기   // 배열에 이미 .png가 존재하므로 뒤에 .png를 또 붙이지 말 것
	     
	     setTimeout(function(){
	    	 if(images[comNum]<images[meNum]){  //크다 작다 부등호로 하면 잘못된 값 출력 될 수 있음// (comNum+2)%3 == meNum --> 실무에서 많이 쓰는 코드
	    		 alert('승리!');    // 0번이 주먹이고 2번이 가위라 주먹과 가위 인데 내가 이겼다고 나온다 ,,,
	    	 }else if(images[comNum]==0 && images[meNum]==2){
	    		 alert('패배...');
	    	 }
	    	 else if(images[comNum] == images[meNum]){
	    		 alert('무승부');
	    	 }else{
	    		 alert('패배...');
	    	 }
	     },1000);
	}
	
	



</script>


</body>
</html>
 
결과가 잘못 나오는 오류
내가 이기고도 패배가 출력되고 내가 졌는데 승리가 출력되는 오류 발생으로 
하나하나 조건을 달아야 하나 했으나 공식 같이 많이 쓰이는 코드가 있어서 알게 되었다. 

setTimeout(function(){
	    	 if((comNum+2)%3 == meNum){ 컴퓨터 랜덤숫자에 +2를 한 후 %3을 했을 때 내 숫자와 같으면
					alert('승리!');
				}
				else if(comNum == meNum){
					alert('무승부');
				}
				else{
					alert('패배...');
				}
	     },1000);
 

 

 

728x90
반응형

'JavaScript > 개념정리' 카테고리의 다른 글

SweetAlert 꾸미기  (0) 2024.04.24
JavaScript 05 < ajax() 메서드 >  (0) 2024.04.23
JavaScript 04 <jQuery>  (0) 2024.04.23
JavaScript 02 < 입력 이벤트 >  (0) 2024.04.22
JavaScript 01 < 스크립트 기초 >  (0) 2024.04.22
'JavaScript/개념정리' Related Articles more