항상 이 블로그를 생각할때마다 '재미'라는 키워드를 우선적으로 생각하게 되는 것 같다.


어떻게하면 구독자들에게 소소하게나마 재미를 줄 수 있을까? 즐겁게할까? 라는 것을 고민했었다.




사람들은 이기는 것을 좋아한다. 내가 응원하는 축구팀이 지는것보단 이기는것을 좋아하고, 내가 응원하는 가수가 1위하거나 상을 타는 것을 좋아하고 등등...


소소하게나마 항상 이기는 즐거움을 느끼게 하는 간단한 프로그래밍을 하면 어떨까? 라는 생각에 다음과 같은 프로그램을 만들어봤다.


일명 <항상 이기는 가위바위보!>




실행 결과는 다음을 참고해 보시라.


https://googledrive.com/host/0Bx1we5sxte1Bam1NYzg0MjhFYXc/130809%20winrps.html


코드는 무척이나 간단하다.


<!DOCTYPE html>


<html lang="en">

<head>

<meta charset="utf-8">

<title>항상 이기는 가위바위보</title>

<script>

var imagecom=document.createElement("img");

var imagena=document.createElement("img");

function start() {

imagecom.src="combined.gif";

imagecom.width=150;

imagecom.height=150;

document.getElementById("computer").appendChild(imagecom);

imagena.src="combined.gif";

imagena.width=150;

imagena.height=150;

document.getElementById("na").appendChild(imagena);


}

function addscissor() {

imagena.src="scissors.gif";

imagena.width=150;

imagena.height=150;

document.getElementById("na").appendChild(imagena);

imagecom.src="paper.gif";

imagecom.width=150;

imagecom.height=150;

document.getElementById("computer").appendChild(imagecom);

celebrate();

}

function addrock() {

imagena.src="rock.gif";

imagena.width=150;

imagena.height=150;

document.getElementById("na").appendChild(imagena);

imagecom.src="scissors.gif";

imagecom.width=150;

imagecom.height=150;

document.getElementById("computer").appendChild(imagecom);

celebrate();

}

function addpaper(){

imagena.src="paper.gif";

imagena.width=150;

imagena.height=150;

document.getElementById("na").appendChild(imagena);

imagecom.src="rock.gif";

imagecom.width=150;

imagecom.height=150;

document.getElementById("computer").appendChild(imagecom);

celebrate();

}

function celebrate()

{

alert("당신이 이겼습니다!");

}

window.setTimeout(

function() {

start();

}

,0

);

</script>

</head>

<body>

<div id="na">

<p>나의 패</p>

<form action="" method="get">

<input type="button" value="가위" onclick="addscissor()" />

<input type="button" value="바위" onclick="addrock()" />

<input type="button" value="보" onclick="addpaper()" />

<input type="button" value="다시 시작" onclick="start()" />

</form>

</div>

<div id="computer"><p>컴퓨터의 패</p></div>

</body>

</html>




이 프로그램은 내가 가위를 내던, 바위를 내던, 보를 내던간에 내가 항상 이기고 컴퓨터가 항상 지게 만든다.


그 방법은 간단하다. 가위/바위/보에 해당하는 이미지를 뿌려주기만 하면 된다. 다만 내가 항상 이기도록 함수를 짜는 것이 관건.


C++같은 언어였으면 따로 변수값을 줘야 했을 것이다. 하지만 javascript의 경우에는 그럴 필요가 없다. 결과론적으로 C++보다 더 간단하게 코드를 짤 수 있다.






아직 CSS를 넣지 않아서 디자인은 허접하다는 사실을 양해 바란다.




이 코드의 html 부분을 보면 다음과 같이, div로 na부분과 computer 부분이 나누어져 있다.


<div id="na">

<p>나의 패</p>

~~~

</div>

<div id="computer"><p>컴퓨터의 패</p></div>


따라서 가위/바위/보 이미지를 뿌려줄때도 na의 div에 들어갈 이미지와 computer의 div에 들어갈 이미지를 구분해줘야 한다.


다음 코드는 내가 가위를 선택했을때 실행되는 함수이다.


imagena.src="scissors.gif";

imagena.width=150;

imagena.height=150;

document.getElementById("na").appendChild(imagena);

imagecom.src="paper.gif";

imagecom.width=150;

imagecom.height=150;

document.getElementById("computer").appendChild(imagecom);


가위에 해당되는 이미지를 가져와서 id가 na인 div에 뿌려주고, 컴퓨터가 지기 위해서 보에 해당되는 이미지를 computer div에 뿌려준다. 이 것을 차근차근 차례로 하면 완성된다. 아주 간단 ^^




이 코드의 관건은 처음 시작할 때 0.1-2초씩 가위바위보가 랜덤으로 반복하는 이미지를 어떻게 생성해내느냐이다. 이를 자바스크립트로 일일히 처리, 특히 timeinverval을 사용하면... 컴퓨터에 엄청난 부하가 걸려서 성능이 낮은 컴퓨터에서는 제대로 실행되지 않는다던지 하는 문제가 발생한다.


따라서 이 부분을 자바스크립트로 전부 처리할 생각을 하면 안된다. 가위,바위,보 이미지를 모두 불러와서 gif로 움직이는 이미지를 만들어 반복시켜라. 그리고 이 반복되는 이미지를 집어넣기만 하면 된다. 이렇게 처리하는 것이 서버는 물론 클라이언트에 걸리는 부하를 줄이는 방법이다.



저작자 표시 비영리 변경 금지
신고

댓글을 달아 주세요

티스토리 툴바