CÓDIGO FONTE

Baixe o projeto

DOWNLOAD


HTML
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <title>Pedra, Papel e Tesoura</title> <!-- Bootstrap core CSS --> <link href="frameworks/bootstrap/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom styles for this template --> <link href="css/blog-post.css" rel="stylesheet"> </head> <body> <!-- Navigation --> <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top"> <div class="container"> <a class="navbar-brand" href="#">CURSO JAVASCRIPT GENIAL CURSOS</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav ml-auto"> <li class="nav-item active"> <a class="nav-link" href="index.html">Jogo <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="codigo.html">Código</a> </li> </ul> </div> </div> </nav> <!-- Page Content --> <div class="container" id="TelaEscolha"> <div class="row"> <div class="col-lg-12"><br><br><br> <h1 class="text-center"><b>PEDRA, PAPEL OU TESOURA</b></h1> <h2 class="text-center" style="color:gray"><b>Selecione sua opção:</b></h2> <br><br> </div> <!-- Sidebar Widgets Column --> <div class="col-lg-4"> <div class="card" onclick="selecionar('pedra')" style="cursor:pointer;"> <div class="card-header text-center"> <b>Pedra</b> </div> <div class="card-body text-center"> <img src="img/pedra-reverse.jpg" class="img-responsive"> </div> </div> </div> <div class="col-lg-4"> <div class="card" onclick="selecionar('papel')" style="cursor:pointer;"> <div class="card-header text-center"> <b>Papel</b> </div> <div class="card-body text-center"> <img src="img/papel-reverse.jpg" class="img-responsive"> </div> </div> </div> <div class="col-lg-4"> <div class="card" onclick="selecionar('tesoura')" style="cursor:pointer;"> <div class="card-header text-center"> <b>Tesoura</b> </div> <div class="card-body text-center"> <img src="img/tesoura-reverse.jpg" class="img-responsive"> </div> </div> </div> </div> <!-- /.row --> </div> <!-- Page Content --> <div class="container d-none" id="TelaJogo"> <div class="row"> <div class="col-lg-12"><br><br><br> <h1 class="text-center"><b>PEDRA, PAPEL OU TESOURA</b></h1> <br><br> </div> <!-- Sidebar Widgets Column --> <div class="col-lg-5"> <div class="card"> <div class="card-header text-center"> <b id="topicoJogador">JOGADOR</b> </div> <div class="card-body text-center"> <img id="imagemJogador" src="img/pedra-papel-tesoura-reverse.gif" class="img-responsive"> </div> </div> </div> <div class="col-lg-2"> <div class="card"> <div class="card-body"> <h1 class="text-center"><b id="TimeVs">3</b></h1> </div> </div> <br> <h1><b id="resultadoLuta"></b></h1> <button id="botaoReset" onclick="jogarNovamente()" class="btn btn-success d-none">Jogar Novamente</button> </div> <!-- Post Content Column --> <div class="col-lg-5"> <div class="card"> <div class="card-header text-center"> <b id="topicoComputador">COMPUTADOR</b> </div> <div class="card-body text-center"> <img id="imagemComputador" src="img/pedra-papel-tesoura.gif" class="img-responsive"> </div> </div> </div> </div> <!-- /.row --> <div class="row"> <div class="col-lg-5"> <div class="card"> <div class="card-body"> <h1 style="font-size:60px;" class="text-center" id="contadorJogador">0</h1> </div> </div> </div> <div class="col-lg-2"> </div> <div class="col-lg-5"> <div class="card"> <div class="card-body"> <h1 style="font-size:60px;" class="text-center" id="contadorComputador">0</h1> </div> </div> </div> </div> </div> <!-- /.container --> <br><br><br> <br><br><br> <br><br><br><br> <!-- Footer --> <footer class="py-5 bg-dark"> <div class="container"> <p class="m-0 text-center text-white">Copyright &copy; Genial Cursos 2019</p> </div> <!-- /.container --> </footer> <!-- Bootstrap core JavaScript --> <script src="projeto.js"></script> <script src="frameworks/jquery/jquery.min.js"></script> <script src="frameworks/bootstrap/js/bootstrap.bundle.min.js"></script> </body> </html>
JAVASCRIPT / JQUERY
//FUNÇÃO PARA SELECIONAR OPÇÃO DO JOGADOR function selecionar(opcao){ opcaoJogador=opcao; $("#TelaEscolha").addClass('d-none'); $("#TelaJogo").removeClass('d-none'); sorteiaComputador(); } //FUNÇÃO PARA SORTEAR ESCOLHA DO COMPUTADOR function sorteiaComputador(){ //GERAR UM NUMERO ALEATORIO DE 1-3 var sorteio= Math.floor(Math.random() * 3) + 1; //SE FOR 1 ENTAO PEDRA if (sorteio==1){ opcaoComputador="pedra"; } //SE FOR 2 ENTAO PEDRA if (sorteio==2){ opcaoComputador="papel"; } //SE FOR 3 ENTAO PEDRA if (sorteio==3){ opcaoComputador="tesoura"; } //COMEÇAR CONTAGEM DOS SEGUNDOS segundos = 2; AtivaTimer = setInterval("cronometro()",1000); } //ATIVAR UM CRONOMETRO REGRESSIVO DE 3 SEGUNDOS PARA CRIAR EXPECTATIVA function cronometro(){ $("#TimeVs").html(segundos); segundos = segundos - 1; //QUANDO O TEMPO ACABAR if (segundos == -1) { segundos = 0; //PARAR A REPETICAO clearInterval(AtivaTimer); $("#TimeVs").html('Vs.'); resultado(); } } //VERIFICAR O RESULTADO E DAR PONTO function resultado(){ //VERIFICAR A DISPUTA //*************** RESULTADOS COM PEDRA ***************// //PEDRA VS PEDRA (EMPATE) if (opcaoJogador=="pedra"&&opcaoComputador=="pedra"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/pedra-reverse.jpg'); $("#topicoJogador").html('PEDRA!'); $("#imagemComputador").attr('src', 'img/pedra.jpg'); $("#topicoComputador").html('PEDRA!'); //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:gray"); $("#resultadoLuta").html('Empate!'); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } //PEDRA VS PAPEL (DERROTA) if (opcaoJogador=="pedra"&&opcaoComputador=="papel"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/pedra-reverse.jpg'); $("#topicoJogador").html('PEDRA!'); $("#imagemComputador").attr('src', 'img/papel.jpg'); $("#topicoComputador").html('PAPEL!'); var PlacarPC = $("#contadorComputador").html(); var resultado = parseInt(PlacarPC) + 1; //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:red"); $("#resultadoLuta").html('Perdeu!'); //DAR PONTO PARA COMPUTADOR $("#contadorComputador").html(resultado); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } //PEDRA VS TESOURA (VITÓRIA) if (opcaoJogador=="pedra"&&opcaoComputador=="tesoura"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/pedra-reverse.jpg'); $("#topicoJogador").html('PEDRA!'); $("#imagemComputador").attr('src', 'img/tesoura.jpg'); $("#topicoComputador").html('TESOURA!'); var PlacarJogador = $("#contadorJogador").html(); var resultado = parseInt(PlacarJogador) + 1; //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:green"); $("#resultadoLuta").html('Ganhou!'); //DAR PONTO $("#contadorJogador").html(resultado); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } //*************** RESULTADOS COM PAPEL ***************// //PAPEL VS PAPEL (EMPATE) if (opcaoJogador=="papel"&&opcaoComputador=="papel"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/papel-reverse.jpg'); $("#topicoJogador").html('PAPEL!'); $("#imagemComputador").attr('src', 'img/papel.jpg'); $("#topicoComputador").html('PAPEL!'); //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:gray"); $("#resultadoLuta").html('Empate!'); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } //PAPEL VS TESOURA (DERROTA) if (opcaoJogador=="papel"&&opcaoComputador=="tesoura"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/papel-reverse.jpg'); $("#topicoJogador").html('PAPEL!'); $("#imagemComputador").attr('src', 'img/tesoura.jpg'); $("#topicoComputador").html('TESOURA!'); var PlacarPC = $("#contadorComputador").html(); var resultado = parseInt(PlacarPC) + 1; //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:red"); $("#resultadoLuta").html('Perdeu!'); //DAR PONTO PARA COMPUTADOR $("#contadorComputador").html(resultado); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } //PAPEL VS PEDRA (VITÓRIA) if (opcaoJogador=="papel"&&opcaoComputador=="pedra"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/papel-reverse.jpg'); $("#topicoJogador").html('PAPEL!'); $("#imagemComputador").attr('src', 'img/pedra.jpg'); $("#topicoComputador").html('PEDRA!'); var PlacarJogador = $("#contadorJogador").html(); var resultado = parseInt(PlacarJogador) + 1; //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:green"); $("#resultadoLuta").html('Ganhou!'); //DAR PONTO $("#contadorJogador").html(resultado); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } //*************** RESULTADOS COM TESOURA ***************// //TESOURA VS TESOURA (EMPATE) if (opcaoJogador=="tesoura"&&opcaoComputador=="tesoura"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/tesoura-reverse.jpg'); $("#topicoJogador").html('TESOURA!'); $("#imagemComputador").attr('src', 'img/tesoura.jpg'); $("#topicoComputador").html('TESOURA!'); //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:gray"); $("#resultadoLuta").html('Empate!'); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } //TESOURA VS PEDRA (DERROTA) if (opcaoJogador=="tesoura"&&opcaoComputador=="pedra"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/tesoura-reverse.jpg'); $("#topicoJogador").html('TESOURA!'); $("#imagemComputador").attr('src', 'img/pedra.jpg'); $("#topicoComputador").html('PEDRA!'); var PlacarPC = $("#contadorComputador").html(); var resultado = parseInt(PlacarPC) + 1; //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:red"); $("#resultadoLuta").html('Perdeu!'); //DAR PONTO PARA COMPUTADOR $("#contadorComputador").html(resultado); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } //TESOURA VS PAPEL (VITÓRIA) if (opcaoJogador=="tesoura"&&opcaoComputador=="papel"){ //MOSTRAR GRAFICAMENTE A ESCOLHA $("#imagemJogador").attr('src', 'img/tesoura-reverse.jpg'); $("#topicoJogador").html('TESOURA!'); $("#imagemComputador").attr('src', 'img/papel.jpg'); $("#topicoComputador").html('PAPEL!'); var PlacarJogador = $("#contadorJogador").html(); var resultado = parseInt(PlacarJogador) + 1; //ESCREVER RESULTADO $("#resultadoLuta").removeClass('d-none'); $("#resultadoLuta").attr("style", "color:green"); $("#resultadoLuta").html('Ganhou!'); //DAR PONTO $("#contadorJogador").html(resultado); //LIBERAR PARA JOGAR NOVAMENTE $("#botaoReset").removeClass('d-none'); } } function jogarNovamente(){ //VOLTAR AO NORMAL TÓPICO SUPERIOR $("#topicoJogador").html('JOGADOR'); $("#topicoComputador").html('COMPUTADOR'); //VOLTAR CRONOMETRO PARA 3 $("#TimeVs").html('3'); //VOLTAR IMAGENS DE SORTEIO $("#imagemJogador").attr('src', 'img/pedra-papel-tesoura-reverse.gif'); $("#imagemComputador").attr('src', 'img/pedra-papel-tesoura.gif'); //APARECER TELA INICIAL E SAIR TELA DO JOGO $("#TelaEscolha").removeClass('d-none'); $("#TelaJogo").addClass('d-none'); //DESAPARECER BOTAO DE JOGAR NOVAMENTE E O RESULTADO $("#resultadoLuta").addClass('d-none'); $("#botaoReset").addClass('d-none'); }