[2015.09.21] jQuery, font-awesome를 활용한 가위바위보 게임

jQuery 활용하여 플러그인화 해놨네요.

가위바위보 손모양은 font-awesome 아이콘을 활용,

코딩도 심플하게 모듈화도 잘 되어있고~ 참고할만합니다.

* 가위바위보 수행 후 결과를 등록하는 함수...

function recordScore($type, $player, $cpu) {

        $('aside').prepend('<div class="history-item ' + $type + '"><i class="fa fa-hand-' + $player + '-o"></i><i class="fa fa-hand-' + $cpu + '-o"></i></div>');

        $('.scoreboard .win span').text($winCount);

        $('.scoreboard .tie span').text($tieCount);

        $('.scoreboard .loss span').text($lossCount);

}




 : DOM 요소를 text로 직접 생성(<div ~~~ </div>)하여 <aside> 태그에 추가하는 함수로 prepend 사용




참고 : 2014/12/04 - [Dev. 웹/JavaScript/jQuery] - [ jQuery 핵심정리 ] DOM 조작 메서드

2012/09/11 - [Dev. 웹] - JavaScript and HTML DOM(Document Object Model) - 웹의 객체 구조화




  







간단한 사용 예제 및 Demo







See the Pen Rock, Paper, Scissors, Lizard, Spock by Mur (@mur) on CodePen.