Daily coding

Java Script : 예제4 - 랜덤하게 주사위 돌리기 본문

Front-end/Java Script

Java Script : 예제4 - 랜덤하게 주사위 돌리기

sunnnkim 2020. 1. 9. 19:44

< Key Point >

1. Math.random() 함수를 이용해서 랜덤 숫자를 뽑는다.

2. Math.ceil()함수를 이용해서 정수화한다.

3. setInterval을 통해서 함수를 반복하여 애니메이션을 준다.

 

 

 




<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<h1>2개의 주사위</h1>
버튼을 클릭하면 2개의 주사위가 랜덤으로 나옵니다.<br><br>
<table>
<tr>
	<td style="padding-right: 15px;"><img alt="" src="./images/sai_1.gif"> </td>
	<td><img alt="" src="./images/sai_6.gif"> </td>
</tr>
</table>
<br>
<button type="button" onclick="randomDice()">주사위를 굴린다.</button>


<script type="text/javascript">
	var diceNum = 1;
	var diceNum2 = 6;
	var count = 5;
	var time = 0;
	
	
function throwDice() {
	count = count - 1; // 타이머 선택 숫자에서 -1씩 감산함(갱신되기 때문)
	
	if(count != 0) { 
		// 그림1
		diceNum = diceNum+1;
		if(diceNum == 7) {
			diceNum = 1;
		}
		var imgsrc = document.getElementsByTagName("img")[0];
		var str = "./images/sai_"+diceNum+".gif";
		imgsrc.src = str;
		
		// 그림1
		diceNum2 = diceNum2 - 1;
		if(diceNum2 == 0) {
			diceNum2 = 6;
		}
		var imgsrc2 = document.getElementsByTagName("img")[1];
		var str2 = "./images/sai_"+diceNum2+".gif";
		imgsrc2.src = str2;
	}
	else if(count==0){
		clearInterval(time);
		// 난수 생성
		var num = Math.floor(Math.random()*6)+1;
		var num2 = Math.floor(Math.random()*6)+1;
		//alert(num + " " + num2);
		
		// 주사위1바꾸기
		var imgsrc = document.getElementsByTagName("img")[0];
		var str = "./images/sai_"+num+".gif";
		imgsrc.src = str;
		
		// 주사위2 바꾸기
		var imgsrc2 = document.getElementsByTagName("img")[1];
		var str2 = "./images/sai_"+num2+".gif";
		imgsrc2.src = str2;
		
		
	}
	
}
function randomDice() {
	count = 10;
	clearInterval(time);
	time = setInterval("throwDice()",50);
	
}



</script>
</body>
</html>

 

'Front-end > Java Script' 카테고리의 다른 글

Java Script : 예제6 - 마우스이벤트(onmouseover)  (0) 2020.01.09
Java Script : 예제5 - 현재 시간 출력하기  (0) 2020.01.09
Java Script : 예제3 - select 태그를 사용하여 링크 이동  (0) 2020.01.09
Java Script : 예제 2 - 퀴즈 맞추기  (0) 2020.01.09
Java Script : 예제1  (0) 2020.01.09
'Front-end/Java Script' Related Articles more