API tools faq
paste
Advertisement
TheManatee

Jogo da Forca - Desafio CFBCursos

TheManatee
Apr 5th, 2018
449
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 12.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="pt-br">
  3.  
  4. <head>
  5.     <meta charset="utf-8" />
  6.  
  7.     <style>
  8.         #btnDica {
  9.             position: absolute;
  10.             top: 10px;
  11.             left: 10px;
  12.         }
  13.  
  14.         #cabeca {
  15.             display: none;
  16.             position: absolute;
  17.             left: 180px;
  18.             top: 40px;
  19.             width: 55px;
  20.             height: 55px;
  21.             -webkit-border-radius: 25px;
  22.             -moz-border-radius: 25px;
  23.             border-radius: 25px;
  24.             background: rgb(255, 230, 184);
  25.             border: 1px solid black;
  26.         }
  27.  
  28.         #braco_dir {
  29.             display: none;
  30.             position: absolute;
  31.             left: 140px;
  32.             top: 100px;
  33.             width: 18px;
  34.             height: 60px;
  35.             background: rgb(255, 230, 184);
  36.             border: 1px solid black;
  37.             transform: rotate(30deg);
  38.         }
  39.  
  40.         #braco_es {
  41.             display: none;
  42.             position: absolute;
  43.             left: 260px;
  44.             top: 100px;
  45.             width: 18px;
  46.             height: 60px;
  47.             background: rgb(255, 230, 184);
  48.             border: 1px solid black;
  49.             transform: rotate(-30deg);
  50.         }
  51.  
  52.         #perna_dir {
  53.             display: none;
  54.             position: absolute;
  55.             left: 168px;
  56.             top: 175px;
  57.             width: 22px;
  58.             height: 72px;
  59.             background: cornflowerblue;
  60.             border: 1px solid black;
  61.             transform: rotate(15deg);
  62.         }
  63.  
  64.         #perna_es {
  65.             display: none;
  66.             position: absolute;
  67.             left: 228px;
  68.             top: 175px;
  69.             width: 22px;
  70.             height: 72px;
  71.             background: cornflowerblue;
  72.             border: 1px solid black;
  73.             transform: rotate(-15deg);
  74.         }
  75.  
  76.         #corpo {
  77.             display: none;
  78.             position: absolute;
  79.             left: 179px;
  80.             top: 100px;
  81.             width: 58px;
  82.             height: 70px;
  83.             background: #f70;
  84.             border: 1px solid black;
  85.         }
  86.  
  87.         #forca_poste {
  88.             position: absolute;
  89.             left: 310px;
  90.             top: 3px;
  91.             width: 50px;
  92.             height: 480px;
  93.             background: rgb(71, 13, 3);
  94.         }
  95.  
  96.         #forca_aste {
  97.             position: absolute;
  98.             left: 150px;
  99.             top: 3px;
  100.             height: 30px;
  101.             width: 200px;
  102.             background: rgb(71, 13, 3);
  103.         }
  104.  
  105.         #corda1 {
  106.             position: absolute;
  107.             left: 202px;
  108.             top: 3px;
  109.             height: 35px;
  110.             width: 10px;
  111.             background: rgb(221, 202, 115);
  112.         }
  113.  
  114.         #corda2 {
  115.             position: absolute;
  116.             left: 183px;
  117.             top: 45px;
  118.             width: 40px;
  119.             height: 40px;
  120.             -webkit-border-radius: 25px;
  121.             -moz-border-radius: 25px;
  122.             border-radius: 25px;
  123.             background: white;
  124.             border: 5px solid rgb(221, 202, 115);
  125.         }
  126.  
  127.         #main_container {
  128.             position: absolute;
  129.             left: 10px;
  130.             top: 400px;
  131.             border: 5px solid rgb(71, 13, 3);
  132.             width: 600px;
  133.             height: 360px;
  134.             background-color: rgb(119, 45, 23);
  135.         }
  136.  
  137.         .keyboard_container {
  138.             position: absolute;
  139.             display: block;
  140.             left: 370px;
  141.             top: 100px;
  142.             border: 1px solid rgb(119, 45, 23);
  143.             width: 200px;
  144.             height: 250px;
  145.             background-color: rgb(119, 45, 23);
  146.         }
  147.  
  148.         #wordContainer {
  149.             top: 10px;
  150.             left: 10px;
  151.             width: 355px;
  152.             height: 345px;
  153.         }
  154.  
  155.         #tries_container {
  156.             left: 30px;
  157.         }
  158.  
  159.         .btn_erro {
  160.             background-color: red;
  161.         }
  162.  
  163.         .btn_acerto {
  164.             background-color: green;
  165.         }
  166.  
  167.         .lbl_palavra {
  168.             left: 15px;
  169.             top: 10px;
  170.             margin-left: 15px;
  171.             text-align: center;
  172.             color: rgb(221, 202, 115);
  173.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  174.             font-size: 35px;
  175.             font-weight: bolder;
  176.         }
  177.  
  178.         .lbl_chances {
  179.             left: 150px;
  180.             top: 265px;
  181.             position: absolute;
  182.             text-align: center;
  183.             color: orange;
  184.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  185.             font-size: 40px;
  186.             font-weight: bolder;
  187.         }
  188.  
  189.         #lblChances1 {
  190.             left: 10px;
  191.             top: 230px;
  192.         }
  193.  
  194.         .lbl_resultado {
  195.             position: absolute;
  196.             left: 240px;
  197.             top: 40px;
  198.             text-align: left;
  199.             color: green;
  200.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  201.             font-size: 55px;
  202.             font-weight: bolder;
  203.         }
  204.  
  205.         #welcomeScreen {
  206.             position: absolute;
  207.             left: 0px;
  208.             top: 0px;
  209.             width: 800px;
  210.             height: 1000px;
  211.             display: block;
  212.             background-color: rgba(0, 0, 0, 0.89);
  213.         }
  214.  
  215.         #lblDescription {
  216.             margin-top: 80px;
  217.             margin-left: 15px;
  218.             margin-right: 15px;
  219.             position: absolute;
  220.             text-align: center;
  221.             word-wrap: normal;
  222.             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  223.             font-size: 40px;
  224.             color: #f70;
  225.         }
  226.  
  227.         .btnGame {
  228.             width: 80px;
  229.             height: 50px;
  230.             color: white;
  231.             background-color: orangered;
  232.             border: none;
  233.             cursor: pointer;
  234.         }
  235.  
  236.         #btnStart {
  237.             width: 300px;
  238.             height: 100px;
  239.             position: absolute;
  240.             left: 200px;
  241.             top: 500px;
  242.         }
  243.     </style>
  244.  
  245.     <script>
  246.         var palavras = ["PERIGO", "AMIZADE", "TROVÃO", "TENEBROSO",
  247.             "TESTAMENTO", "MOSTARDA", "MORANGO", "IMPRESSORA", "AQUISIÇÃO", "EQUIVALÊNCIA",
  248.             "HOMOSSEXUALIDADE", "MILÍCIA", "BRUSQUETA", "ALFAJOR", "CRUSTÁCEO", "PIPOCA", "HOMOGÊNEO",
  249.             "FORÇA", "FORCA", "FACA", "ABACAXI", "INCOMPREESÍVEL", "TABULEIRO", "PARTICULAR", "ADIANTAMENTO", "TÉRMICA",
  250.             "REGISTRADORAS", "DINHEIRO", "FOLHA", "CAMAFEU", "COELHO", "TÓTEM", "MOUSE", "CAVIDADES", "ORIFÍCIO", "EXPERIMENTOS",
  251.             "SOBREVIVÊNCIA", "DITADURA", "VIBRAÇÃO", "PEGADAS", "MOSQUITO", "PÉROLA", "MANDIOCA", "BÚSSULA", "NOTÍCIA", "IMAGINAÇÃO",
  252.             "PENDRIVE", "GATO", "FLUTUANDO", "BABACA", "VISCOSIDADE", "MUCO", "CATARRO", "GARGANTA", "BARRIGA", "PENAS", "CALCANHAR",
  253.             "MANDALA", "MUDANÇA", "PESCADORES", "EMPREITADA", "PLAUSÍVEL"];
  254.         var letras = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l",
  255.             "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
  256.  
  257.         var sorteada, sorteadaCharArr;
  258.         var chances = 6;
  259.  
  260.         function sortear() {
  261.             var sort_num = Math.floor(Math.random() * palavras.length);
  262.             return palavras[sort_num];
  263.         }
  264.  
  265.         function muda_display(obj, deveMostrar) {
  266.             if (deveMostrar == true) {
  267.                 obj.style.display = "block";
  268.             } else {
  269.                 obj.style.display = "none";
  270.             }
  271.         }
  272.  
  273.         function muda_btn(btn, acertou, clicavel) {
  274.  
  275.             if (acertou == true) {
  276.                 if (btn.hasAttribute("class")) {
  277.                     btn.removeAttribute("class");
  278.                 }
  279.                 btn.setAttribute("class", "btn_acerto");
  280.             } else {
  281.                 if (btn.hasAttribute("class")) {
  282.                     btn.removeAttribute("class");
  283.                 }
  284.                 btn.setAttribute("class", "btn_erro");
  285.             }
  286.  
  287.             if (clicavel == true) {
  288.                 btn.style.pointerEvents = "visible";
  289.             } else {
  290.                 btn.style.pointerEvents = "none";
  291.             }
  292.         }
  293.  
  294.         function retiraAcento(letra) {
  295.             if (letra.toUpperCase() == "Ç") {
  296.                 return "C";
  297.             }
  298.             if (letra.toUpperCase() == "Ã" || letra.toUpperCase() == "Á" || letra.toUpperCase() == "Â" || letra.toUpperCase() == "À") {
  299.                 return "A";
  300.             }
  301.             if (letra.toUpperCase() == "É" || letra.toUpperCase() == "Ê") {
  302.                 return "E";
  303.             }
  304.             if (letra.toUpperCase() == "Í") {
  305.                 return "I";
  306.             }
  307.             if (letra.toUpperCase() == "Õ" || letra.toUpperCase() == "Ô" || letra.toUpperCase() == "Ó") {
  308.                 return "O";
  309.             }
  310.             if (letra.toUpperCase() == "Ú") {
  311.                 return "U";
  312.             }
  313.             return letra;
  314.         }
  315.  
  316.         function diminuiAsChances() {
  317.             chances--;
  318.             let lblChances = document.getElementById("lblChances2");
  319.             lblChances.innerText = chances;
  320.  
  321.             if (chances == 5) {
  322.                 let parte = document.getElementById("corpo");
  323.                 parte.style.display = "inline";
  324.             } else if (chances == 4) {
  325.                 let parte = document.getElementById("braco_dir");
  326.                 parte.style.display = "inline";
  327.             } else if (chances == 3) {
  328.                 let parte = document.getElementById("braco_es");
  329.                 parte.style.display = "inline";
  330.             } else if (chances == 2) {
  331.                 let parte = document.getElementById("perna_dir");
  332.                 parte.style.display = "inline";
  333.             } else if (chances == 1) {
  334.                 let parte = document.getElementById("perna_es");
  335.                 parte.style.display = "inline";
  336.             } else {
  337.                 let parte = document.getElementById("cabeca");
  338.                 parte.style.display = "inline";
  339.                 let lblGanhou = document.getElementById("lblResult");
  340.                 lblGanhou.innerHTML = "PERDEU<br>A palavra era: <br>" + sorteada;
  341.                 lblGanhou.style.color = "#f00";
  342.                 showWelcome(false);
  343.             }
  344.         }
  345.  
  346.         function verificaVitoria() {
  347.             let retorno = true;
  348.             for (let index = 0; index < sorteadaCharArr.length; index++) {
  349.                 if (document.getElementById("id" + index).innerText == "-") {
  350.                     retorno = false;
  351.                     //alert("falso");
  352.                 }
  353.             }
  354.             return retorno;
  355.         }
  356.  
  357.         function aLetraExiste(letr) {
  358.  
  359.             let retornoBool = false;
  360.             for (let index = 0; index < sorteadaCharArr.length; index++) {
  361.                 let letra = retiraAcento(sorteadaCharArr[index]);
  362.                 if (letra == letr.toUpperCase()) {
  363.  
  364.                     let theLbl = document.getElementById("id" + index);
  365.                     theLbl.innerText = sorteadaCharArr[index];
  366.                     retornoBool = true;
  367.                 }
  368.             }
  369.  
  370.             return retornoBool;
  371.         }
  372.  
  373.         function valida_click(btn) {
  374.             if (aLetraExiste(btn.innerText)) {
  375.                 muda_btn(btn, true, false);
  376.  
  377.                 if (verificaVitoria()) {
  378.                     let lblGanhou = document.getElementById("lblResult");
  379.  
  380.                     lblGanhou.innerText = "GANHOU";
  381.                     showWelcome(false);
  382.                 }
  383.  
  384.             } else {
  385.                 muda_btn(btn, false, false);
  386.                 diminuiAsChances();
  387.             }
  388.         }
  389.  
  390.         function recria_teclado() {
  391.  
  392.             let keyboardContainer = document.getElementById("keyboardContainer");
  393.  
  394.             while (keyboardContainer.firstChild) {
  395.                 keyboardContainer.removeChild(keyboardContainer.firstChild);
  396.             }
  397.  
  398.  
  399.             for (let index = 0; index < letras.length; index++) {
  400.                 let curChar = letras[index];
  401.                 let btnNew = document.createElement("button");
  402.                 btnNew.style.width = "40px";
  403.                 btnNew.style.height = "40px";
  404.                 btnNew.style.top = "10px";
  405.                 btnNew.style.display = "inline";
  406.                 btnNew.addEventListener("click", function (event) {
  407.                     valida_click(btnNew);
  408.                 });
  409.                 btnNew.innerText = curChar.toUpperCase();
  410.  
  411.                 keyboardContainer.appendChild(btnNew);
  412.  
  413.                 if (curChar == "e" || curChar == "j" || curChar == "o" || curChar == "t" || curChar == "y") {
  414.                     keyboardContainer.appendChild(document.createElement("br"));
  415.                 }
  416.             }
  417.         }
  418.  
  419.         function recria_palavra() {
  420.             sorteada = sortear();
  421.             sorteadaCharArr = sorteada.split('');
  422.             let container = document.getElementById("wordContainer");
  423.  
  424.             while (container.firstChild) {
  425.                 container.removeChild(container.firstChild);
  426.             }
  427.  
  428.             for (let index = 0; index < sorteadaCharArr.length; index++) {
  429.                 let lblNew = document.createElement("label");
  430.  
  431.                 lblNew.setAttribute("class", "lbl_palavra");
  432.                 lblNew.setAttribute("id", "id" + index);
  433.                 lblNew.innerText = "-";
  434.                 container.appendChild(lblNew);
  435.             }
  436.         }
  437.  
  438.         function showWelcome(primeiraVez) {
  439.             if (!primeiraVez) {
  440.                 document.getElementById("lblDescription").style.display = "none";
  441.             }
  442.             document.getElementById("welcomeScreen").style.display = "block";
  443.         }
  444.         function hideWelcome() {
  445.             document.getElementById("welcomeScreen").style.display = "none";
  446.         }
  447.  
  448.         function start() {
  449.             showWelcome(true);
  450.         }
  451.  
  452.         function startGame() {
  453.             hideWelcome();
  454.             recria_palavra();
  455.             recria_teclado();
  456.  
  457.             document.getElementById("lblChances2").innerText = chances = 6;
  458.             document.getElementById("lblResult").innerText = "";
  459.             document.getElementById("lblResult").style.color = "#0F0";
  460.             let parte = document.getElementById("cabeca");
  461.             parte.style.display = "none";
  462.             parte = document.getElementById("braco_dir");
  463.             parte.style.display = "none";
  464.             parte = document.getElementById("braco_es");
  465.             parte.style.display = "none";
  466.             parte = document.getElementById("perna_dir");
  467.             parte.style.display = "none";
  468.             parte = document.getElementById("perna_es");
  469.             parte.style.display = "none";
  470.             parte = document.getElementById("corpo");
  471.             parte.style.display = "none";
  472.         }
  473.  
  474.         function darDica() {
  475.             alert(sorteada);
  476.         }
  477.  
  478.         window.addEventListener("load", start);
  479.     </script>
  480.  
  481. </head>
  482.  
  483. <body>
  484.  
  485.     <label id="lblChances1" class="lbl_chances">Chances:</label>
  486.     <label id="lblChances2" class="lbl_chances">6</label>
  487.  
  488.  
  489.     <button id="btnDica" onclick="darDica()" class="btn_dica btnGame">Dica</button>
  490.     <div id="forca_poste"></div>
  491.     <div id="forca_aste"></div>
  492.     <div id="corda1"></div>
  493.     <div id="corda2"></div>
  494.     <div id="corpo"></div>
  495.     <div id="cabeca"></div>
  496.     <div id="braco_dir"></div>
  497.     <div id="braco_es"></div>
  498.     <div id="perna_dir"></div>
  499.     <div id="perna_es"></div>
  500.     <div id="main_container">
  501.         <div id="wordContainer" class="keyboard_container"></div>
  502.         <div id="keyboardContainer" class="keyboard_container"></div>
  503.     </div>
  504.  
  505.     <div id="welcomeScreen" class="welcome_screen">
  506.         <label id="lblResult" class="lbl_resultado"></label>
  507.         <label id="lblDescription">Seja bem-vindo ao jogo da forca!
  508.             <br>Você terá 6 chances para acertar a palavra...
  509.             <br>
  510.             <br>Desenvolvido por Gustavo Kuze</label>
  511.         <button id="btnStart" class="btnGame" onclick="startGame()">Jogar</button>
  512.     </div>
  513.  
  514. </body>
  515.  
  516. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!