JankenPon

Famoso jogo, pedra papel ou tesoura.

by Angelo Rogério Rubin

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="container">
    <div class="row">
         <div class="col-xs-12 col-md-12 col-sm-12 text-center">
            <h2>JanKenPon 
                <small>(Jogo da pedra, papel ou tesoura)</small>
            </h2>
            <a class="btn btn-primary" href="http://pt.wikipedia.org/wiki/Pedra,_papel_e_tesoura" target="_blank">Saber Mais</a>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-xs-12 col-md-4 col-sm-4">
            <button class="btn btn-primary" type="button">
                Jogador 
                <span class="badge pontos-jogador">0</span>
            </button>
        </div>
        <div class="col-xs-12 col-md-4 col-sm-4">
            <h4 class="text-center">Clique sobre a carta escolhida.</h4>
        </div>
        <div class="col-xs-12 col-md-4 col-sm-4">
            <div class="pull-right">
            <button class="btn btn-primary" type="button">
                <span class="badge pontos-computador">0</span>
                Computador
            </button>
            </div>
        </div>
    </div>
    <hr/>
    <div class="row">
        <div class="col-xs-12 col-md-12 col-sm-8 col-sm-offset-3">
            <div class="col-xs-3 col-md-3 col-sm-3">
                <button id="pedra" class="carta salmon text-center btn">
                    <image src="http://www.4shared.com/download/udej4_WVba/pedra.png?lgfp=3000" width="55">
                </button>
            </div>
            <div class="col-xs-3 col-md-3 col-sm-3">
                <button id="papel" class="carta salmon text-center btn">
                    <image src="http://www.4shared.com/download/fyOP-ezbba/papel.png?lgfp=3000" width="60">
                </button>
            </div>
            <div class="col-xs-3 col-md-3 col-sm-3">
                <button id="tesoura" class="carta...

CSS

fieldset.scheduler-border {
    border: 1px groove #ddd !important;
    padding: 0 1.4em 1.4em 1.4em !important;
    -webkit-box-shadow:  0px 0px 0px 0px #000;
    box-shadow:  0px 0px 0px 0px #000;
}
legend.scheduler-border {
    font-weight: bold !important;
    text-align: left !important;
    width:auto;
    border-bottom:none;
}
.carta {
    z-index: 2;
    width: 80px;
    height: 100px;
    color: white;
    border: 2px solid black;
}
.brown {
    background-color: brown;
}
.salmon {
    background-color: salmon;
}
.gray {
    background-color: gray;
}
.legend-small {
   font-size: 1em; 
}
.mesa-jogador {
    margin: 40px 0 0 0;
    border: 1px dotted black;
    height: auto;
    min-height: 160px;
}
.mesa-computador {
    margin: 40px 0 0 0;
    border: 1px dotted black;
    height: auto;
    min-height: 160px;
}

JavaScript

var pontosJog = 0;
var pontosComp = 0;
var carta = $('#pedra').clone();
var cartas = ['pedra','papel','tesoura'];

// Ação ao clicar na carta desejada.
$( ".carta" ).on('click', function(){
   
   // Limpando as mesas
   $('.mesa-jogador button, .mesa-computador button').remove();
   
   // Clonando a carta escolhida pelo jogador
   var cartaJog = $(this).clone();
   
   // Colocando a carta escolhida pelo jogador na mesa dele
   $('.mesa-jogador').append(cartaJog);
   
   // Escolhendo aleatóriamente uma carta para o computador
   var cartaComp = cartas[Math.floor(Math.random() * cartas.length)];
   
   // Clonando a carta escolhida pelo jogador
   var imagemCartaComp = $('#'+cartaComp).clone();
   
   // Colocando a carta escolhida pelo computador na mesa dele
   $('.mesa-computador').append(imagemCartaComp);
   
   // Pegando os id's das cartas escolhidas que estão nas mesas
   var idJog = $('.mesa-jogador button').prop('id');
   var idComp = $('.mesa-computador button').prop('id');
    
    // Regra de verificação em caso de empate
    if(idJog == idComp)
    {
        $('.carta').prop('disabled','disabled');
        $('#dialog p').empty().append('EMPATE! Ninguém pontuou.');
        $('#dialog').dialog({
            modal: true,
            close: function( event, ui ) {
                $('.carta').prop('disabled','');
                $('.mesa-jogador button, .mesa-computador button').remove();
            }
        });
    }
    
    // Regra de verificação
    if(idJog == 'pedra' && idComp == 'tesoura')
    {
        $('.carta').prop('disabled','disabled');
        $('#dialog p').empty().append(' O Jogador Venceu ! Pedra amassa a Tesoura.');
        $('#dialog').dialog({
            modal: true,
            close: function( event, ui ) {
                $('.carta').prop('disabled','');
                $('.mesa-jogador button, .mesa-computador button').remove();
                   pontosJog = pontosJog + 1;
               ...