HOW TO MAKE BREAK THE CODE GAME USING HTML, JS, AND CSS
Code: _______________________________________________________________ <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>Break The Code</title> </head> <body> <style> #frame001 { padding: 11px; border-radius: 17px; background-color: rgb(245, 245, 245); border: 4px solid black; } .buttons001 { background-color: blue; border: none; color: white; padding: 7px 17px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 2px 2px; border-radius: 9px; cursor: pointer; width: 178px; } .buttons002 { background-color: yellow; border: 2px solid black; color: black; font-size: 14px; padding: 6px; text-align: center; display: inline-block; margin: 2px; border-radius: 4px; cursor: context-menu; } .buttons003 { background-color: white; border: 2px solid black; color: black; font-size: 14px; padding: 6px; text-align: center; display: inline-block; margin: 2px; border-radius: 4px; cursor: context-menu; width: 16px; height: 16px; } #font003 { color: black; font-size: large; cursor: context-menu; } #align001 { text-align: center; } </style> <div id="frame001"> <div id="font003"> <div id="align001"> <div id="disappear001"> <p>Click BEGIN to start the game</p> <button class="buttons001" onclick="begin001()">BEGIN</button></div> <p id="numberedBoxes"></p> <p id="yourInput"></p> <p id="submitButton"></p> </div> </div> </div> <script> // C o d i n g I s N i c e 12 letters > 12 boxes // 3 15 4 9 14 7 9 19 14 9 3 5 var numbers1 = ["<button class=buttons002>03</button><button class=buttons002>15</button><button class=buttons002>04</button><button class=buttons002>09</button><button class=buttons002>14</button><button class=buttons002>07</button>   <button class=buttons002>09</button><button class=buttons002>19</button>   <button class=buttons002>14</button><button class=buttons002>09</button><button class=buttons002>03</button><button class=buttons002>05</button>"]; var playerInput = ["<input class=buttons003 type=text id=box001 maxlength=1 /><input class=buttons003 type=text id=box002 maxlength=1 /><input class=buttons003 type=text id=box003 maxlength=1 /><input class=buttons003 type=text id=box004 maxlength=1 /><input class=buttons003 type=text id=box005 maxlength=1 /><input class=buttons003 type=text id=box006 maxlength=1 />   <input class=buttons003 type=text id=box007 maxlength=1 /><input class=buttons003 type=text id=box008 maxlength=1 />  <input class=buttons003 type=text id=box009 maxlength=1 /><input class=buttons003 type=text id=box010 maxlength=1 /><input class=buttons003 type=text id=box011 maxlength=1 /><input class=buttons003 type=text id=box012 maxlength=1 />"]; var letters1 = ["c", "o", "d", "i","n", "g", "i", "s","n", "i", "c", "e"]; function begin001() { document.getElementById("disappear001").innerHTML = ""; document.getElementById("numberedBoxes").innerHTML = numbers1; document.getElementById("yourInput").innerHTML = playerInput; document.getElementById("submitButton").innerHTML = "<button class=buttons001 onclick=submit001()>SUBMIT</button>"; } function submit001() { a01 = box001.value; a02 = box002.value; a03 = box003.value; a04 = box004.value; a05 = box005.value; a06 = box006.value; a07 = box007.value; a08 = box008.value; a09 = box009.value; a10 = box010.value; a11 = box011.value; a12 = box012.value; // The below variables are points for each correct letter var n01; var n02; var n03; var n04; var n05; var n06; var n07; var n08; var n09; var n10; var n11; var n12; if (a01 == letters1[0]) { n01 = 1; } else { box001.value = ""; } if (a02 == letters1[1]) { n02 = 1; } else { box002.value = ""; } if (a03 == letters1[2]) { n03 = 1; } else { box003.value = ""; } if (a04 == letters1[3]) { n04 = 1; } else { box004.value = ""; } if (a05 == letters1[4]) { n05 = 1; } else { box005.value = ""; } if (a06 == letters1[5]) { n06 = 1; } else { box006.value = ""; } if (a07 == letters1[6]) { n07 = 1; } else { box007.value = ""; } if (a08 == letters1[7]) { n08 = 1; } else { box008.value = ""; } if (a09 == letters1[8]) { n09 = 1; } else { box009.value = ""; } if (a10 == letters1[9]) { n10 = 1; } else { box010.value = ""; } if (a11 == letters1[10]) { n11 = 1; } else { box011.value = ""; } if (a12 == letters1[11]) { n12 = 1; } else { box012.value = ""; } if (n01 == 1 && n02 == 1 && n03 == 1 && n04 == 1 && n05 == 1 && n06 == 1 && n07 == 1 && n08 == 1 && n09 == 1 && n10 == 1 && n11 == 1 && n12 == 1) { document.getElementById("submitButton").innerHTML = "Congratulations."; } else { document.getElementById("submitButton").innerHTML = "Sorry. Try again." + "<br />" + "<br />" + "<button class=buttons001 onclick=submit001()>SUBMIT</button>"; } } </script> </body> </html> Here is a video of the above code. |
OTHER RELATED PAGES: |