1. 문제 안내
교재 8장 Open Challenge 08를 구현하시오.
드디어 한 학기가 끝났다. 제일 어리석은 변명은 "시간이 없어서"라는 변명이라지만, 개인적으로 바쁜 한학기를 보내 블로그 업로드에 신경을 쓰지 못하였다. 지금이라도 과제들을 정리하여 한번에 꾸준하게 업로드 했으면 좋겠다.
2. 코드 작성
- CSS
과제를 제출하고 나서 알게 된 사실이지만, 교수님께서 CSS를 따로 주셨다고 한다... (심지어 몇가지 기능의 답까지.) 점수취득이 목적이 아니라 공부를 위한 것이기에 상관 없었지만 화면구성과 기능 구현에 많은 어려움을 느낀 것은 사실이다. 다음은 CSS코드이다.
<style>
.num {
color: blue;
margin: 0px;
padding: 0px;
display: inline-block;
font-size: 100px;
height: 150px;
width: 150px;
text-align: center;
}
.display{
padding: 0px;
background-color: pink;
width: 465px;
border: 3px solid red;
}
</style>
각각의 카드들을 div태그로 구현하였다. 따라서 세개의 div태그를 옆에 나란히 두어야 하기에 display를 inline-block으로 설정하였다. 또한 카드가 붙어있는 것처럼 보이기 위해 margin과 padding을 0px로 두어 서로 붙어 있게 하였다. 다음은 HTML 코드이다.
- HTML코드
<body>
<h1>갬블링 게임</h1>
<p>각 숫자를 클릭하면 0에서 2사이의 난수로 바뀝니다. 모두 같은 수가 나오면 승리합니다.</p>
<hr>
<div id="test">
</div>
<div class="display">
<div onclick='change(this)' class='num' id='num1'>0</div>
<div onclick='change(this)' class='num' id='num2'>0</div>
<div onclick='change(this)' class='num' id='num3'>0</div>
</div>
<p id="result"></p>
</body>
id가 test인 div태그는 디버깅을위한 확인용 태그이니 신경스지 않아도 좋다. p태그는 결과를 출력하기 위한 태그이다. 다음은 JavaScript태그이다.
- JavaScript
각 div태그의 리스너에 다른 함수를 넣는 방법도 생각했지만, 다른 id값을 주고 이를 함수안에서 비교해 구별하는 방법을 생각하였다. 다음은 JavaScript코드이다.
<script>
var num = new Array();
var numInt1;
var numInt2;
function randomInt(){
return Math.floor(Math.random()*3);
}
function change(obj){
var t = document.getElementById("test");
var divTag = document.getElementById("test");
var tag = document.getElementById("num3");
var num = randomInt();
divTag.innerHTML = "실행됨 ㅋ" + divTag.innerHTML;
if(obj == tag){
divTag.innerHTML = "실행됨3";
var pTag = document.getElementById("result");
obj.innerHTML ="<div onclick='change(this)' class='num' id='num3'>" + String(num) + "</div>";
if(numInt1 == numInt2 && num == numInt1){
divTag.innerHTML = String(numInt1);
var pTag = document.getElementById("result");
pTag.innerHTML = "승리!";
}else{
pTag.innerHTML = "패배!";
}
}
if(obj == document.getElementById("num2")){
divTag.innerHTML = "실행됨2";
obj.innerHTML = "<div onclick='change(this)' class='num' id='num2'>" + String(num) + "</div>";
numInt2 = num;
divTag.innerHTML = String(numInt2);
}
if(obj == document.getElementById("num1")){
divTag.innerHTML = "실행됨1";
obj.innerHTML = "<div onclick='change(this)' class='num' id='num1'>" + String(num) + "</div>";
numInt1 = num;
}
}
</script>
3. 결어
코드를 보면 알겠지만, 중구난방의 코드이다. 그래도 과제를 푸는 과정 그대로를 올리기위해 많이 고치지는 않았다. 조금씩 코드를 깔끔하게 작성해나가는 방법을 스스로 터득하고 그 과정을 올리고 싶다.
'대학교 과제 > 웹 프로그래밍 기초 [ 2 - 2 ]' 카테고리의 다른 글
| [명품 HTML5+CSS3+Javascript 웹 프로그래밍] - Open Challenge 01 (0) | 2020.09.26 |
|---|