열심히 끝까지
[코딩 과제] - 7/26 주사위 게임 본문
오후에 과제검사 + 각 팀 브리핑
과제
주사위게임
시작 버튼 누르면-> 화면에 주사위 굴러감
> 1~6 주사위 사진
일정 시간이 흐르면
컴 사용자
주사위 출력 주사위 출력
-> 이겼다! 비겼다. 졌다...
>>> 내 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주사위게임</title>
<style type="text/css">
table{
width : 60%;
height:100px;
margin:auto;
text-align : center;
border : 1px solid white;
background : lightblue;
}
td{
font-size:20px;
}
</style>
</head>
<body>
<!--
컴퓨터 주사위 이미지 : comImg
내 주사위 이미지 : myImg
결과 : result
주사위 게임 시작 : gameStart()
-->
<table>
<thead>
<!-- 주사위게임 -->
<tr>
<td colspan="2"><h4>주사위 게임</h4></td>
</tr>
</thead>
<tbody>
<tr>
<td>컴퓨터</td>
<td>사용자</td>
</tr>
<tr>
<td><img src="images/1.png" id="comImg"></td>
<td><img src="images/1.png" id="myImg"></td>
</tr>
<tr>
<td id ="result" colspan="2"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<input type="button" value="주사위 던지기" onclick="gameStart();">
</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
// 배열에 사진 집어넣기
var imgArr= new Array();
for(var i = 0; i<=5; i++){
imgArr[i]='images/'+(i+1)+'.png';
}
var result; // 결과 출력(이겼다!, 비겼다., 졌다...)
var num=["comnum", "mynum"]; // 컴퓨터의 주사위 숫자, 사용자의 주사위 숫자
var images=["comImg", "myImg"]; // 이미지 저장
function gameStart(){// 버튼 누르면 시작
beforeResult(); // gif 이미지 시작
setTimeout(function(){ // 딜레이 후 랜덤으로 숫자주사위 이미지 출력
showImg();
},3000);
}
function beforeResult(){ // 결과 나오기 전에 이미지에 gif(움짤) 배치
for(var i=0; i < 2; i++){
document.getElementById(images[i]).src="images/movegif.gif";
}
}
function showImg(){ // 골라진 주사위 이미지 각 배치
for(var i=0; i<2; i++){
num[i]=Math.floor(Math.random()*5); // 랜덤으로 돌리기
document.getElementById(images[i]).src=imgArr[num[i]];
// 이미지 저장하는 곳에 골라진 이미지 값 저장(랜덤 숫자)
}
result = document.getElementById("result"); // 결과를 저장할 값
if(num[0]<num[1]){ // 컴퓨터의 숫자보다 내 숫자가 크면?
result.innerText = "이겼다!";
}
else if(num[0]==num[1]){ // 동일하면?
result.innerText="비겼다.";
}
else{ // 작으면?
result.innerText="졌다...";
}
}
</script>
</body>
</html>
>> 강사님 코드
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>주사위 게임</title>
<style type="text/css">
#title{
width:500px;
height:50px;
background-color:lightpink;
line-height:50px;
text-align:center;
cursor:pointer;
margin : 0 auto;
}
#content {
width:500px;
height:400px;
background-color:lightgreen;
margin : 0 auto;
}
#com{
float : left;
}
#guest{
float : right;
}
</style>
</head>
<body>
<div id="title">게임시작!</div>
<div id="content">
<img id="com" alt="컴퓨터" src="images/1.png">
<img id="guest" alt="사용자" src="images/1.png">
</div>
<script type="text/javascript">
document.querySelector('#title').onclick=function(){
// true false boolean, 혹은 0 1 boolean 처리 둘중 하나 했었음
// 강사님은 '시작'이라는 textnode 가리켜서 묻기
if(this.firstChild.nodeValue=='게임시작!'){ // 시작상태라면? - title의 상태가 게임시작이니?
this.firstChild.nodeValue='결과 확인하기';
// 색 바꾸기
this.style.backgroundColor='lightblue';
startgame();
}
else{ // 아니라면?
this.firstChild.nodeValue='게임시작!';
this.style.backgroundColor='lightpink';
endgame();
}
}
function startgame(){
document.querySelector('#com').src='images/movegif.gif';
document.querySelector('#guest').src='images/movegif.gif';
}
function endgame(){
var com=Math.floor(Math.random()*6)+1;
var guest=Math.floor(Math.random()*6)+1;
document.querySelector('#com').src='images/'+com+'.png';
document.querySelector('#guest').src='images/'+guest+'.png';
// 시간 설정하는 법
// setTimeout, setTimeInterval
setTimeout(function(){
if(com<guest){
alert('이겼다!!! :D');
}
else if(com==guest){
alert('비김 ㅇㅅㅇ');
}
else{
alert('졌다...');
}
},1000);
}
</script>
</body>
</html>>> 훨씬 더 짧고 보기 편하다
강사님의 방법 잘 기억해 놓을 것!
'디바이스 융합 자바(Java)기반 풀스택 개발자 양성과정(과제)' 카테고리의 다른 글
| [코딩 과제] - 8/4 강사님 문제 (0) | 2022.08.04 |
|---|---|
| [코딩 과제] - 8/2 강사님 문제 (0) | 2022.08.02 |
| [코딩 과제] - 7/26 강사님 문제 (0) | 2022.07.26 |
| [코딩 과제] - 7/25 강사님 문제 (0) | 2022.07.25 |
| [10분 테코톡] 콜린의 Flex Layout (0) | 2022.07.23 |