Welcome to CODEBOX! (Copy 1620) (Branch 1884)

✨ PARANEENIPA SONGMUANG

<html>
<head>
	<title>Let's Start</title>
  <style>
/*-----spider------*/
    html {
}
html:hover .spider {
    top: -120%;
}

.spider {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 8%;
    animation: swing 5s infinite;
    transform-origin: top;
    transition: 1s ease-in-out;
}

.spider .spiderweb {
    width: 2px;
    height: 150px;
    margin-left: 49px;
    background: rgba(255,255,255, .7);
}

.spider .body {
    width: 100px;
    height: 80px;
    background: #000;
    position: relative;
    border-radius: 50%;
}

.spider .body .eye {
    width: 33px;
    height: 33px;
    position: absolute;
    bottom: 20px;
    background: linear-gradient(to top, #E41818 0%, #ffcccc 100%);
    border-radius: 50%;
}

.spider .body .eye.left {
    left: 15px;
}

.spider .body .eye.right {
    right: 15px;
}

.spider .body .eye:after {
    background: #000;
    width: 7px;
    height: 7px;
    content: '';
    display: block;
    margin: 55%;
    border-radius: 50%;
    animation: look 4s infinite;
}

.spider .legs .leg {
    width: 80px;
    height: 40px;
    margin-top: -20px;
    border: 5px solid transparent;
    border-top-color: #4A4A4A ;
    border-radius: 40px 40px 0 0;
}

.spider .legs {
    position: absolute;
    bottom: -10%;
    z-index: -1;
}

.spider .legs.left {
    left: -70%;
}
.spider .legs.right {
    right: -60%;
}

.legs.left .leg:nth-child(1){
    transform: rotate(10deg);
    margin-left: 10px;
}
.legs.right .leg:nth-child(1){
    transform: rotate(-10deg);
    margin-left: -10px;
}

.legs.left .leg:nth-child(2){
    transform: rotate(-20deg);
    margin-left: 20px;
}
.legs.right .leg:nth-child(2){
    transform: rotate(20deg);
    margin-left: -20px;
}

.legs.left .leg:nth-child(3){
    transform: rotate(-50deg);
    margin-left: 30px;
}
.legs.right .leg:nth-child(3){
    transform: rotate(50deg);
    margin-left: -30px;
}

@keyframes look {
    0%, 40%, 100% {
        transform: translateX(0); 
    }

45%, 95% {
        transform: translateX(-110%);
    }
}

@keyframes swing {
  0%, 100% {
        transform: rotateZ(25deg);
    }

50% {
        transform: rotateZ(-25deg);
    }
}

/*---------main------------*/
#main-div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: 'Special Elite', cursive;
  border-style: outset;
  border-width: 5px;
  border-radius: 10px;
  padding: 20px 30px 20px 30px;
  margin: 50px 100px 50px 100px;
  background:hsla(0,100%,100%,0.75);
  box-shadow: 10px 10px hsla(0,100%,50%,0.5);
}

.number {
  padding: 5px 10px 5px 10px;
  border-width: 1px;
  border-style: dashed;
  border-radius: 10px;
  background: #bdbcc9;
}

#game {
  margin: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-style: mix;
  border-width: 2px;
  border-radius: 10px;
  padding: 7px 10px 10px 5px;
}

#hang-man {
  margin: 15px 10px 25px 10px;
  color:#A11207;
  text-shadow: 2px 2px 5px black;
}
.right-margin {
  margin-right: 10px;
  font-size: 25px;
}

.width {
  padding-right: 50px;
  padding-left: 50px;
}

.red1 {
  color: #800000;
}

.red2 {
  color: #db0000;
}

.red3 {
  color: #b90e0e;
}
.purple{
  background: purple;
}
.purple2{
  color: purple;
}
.img {
  margin: 10px 2px 10px 2px;
}
body{
   background-image:url("https://i.pinimg.com/originals/76/4c/99/764c9982716111861745ab944b144aa9.gif");
}
.rainbow{
  background-color: hsl(0,100%,40%);
}
.black{
  color:black;
}
img {
  opacity: 0.8;
  border-radius: 5%;
}
.flame {
  background:hsla(360, 100%, 48%, 0.81);
  width: 15px;
  height: 15px;
  border-radius: 100%;
  position: absolute;
  box-shadow: 0px 0px 12px #da2f2f;
  animation: f 5s infinite linear;
}
.flame2 {
  background:hsla(291, 96%, 29%);
  width: 15px;
  height: 15px;
  border-radius: 100%;
  position: absolute;
  box-shadow: 0px 0px 12px #4A4A4A;
  animation: f 5s infinite linear;
}
@keyframes f {
  0% {
    top: 120vh;
    opacity: 0;
  }
  50% {
    top: 50vh;
    opacity: 1;
  }
  100% {
    top: -10vh;
    opacity: 0;
  }
      </style>
</head>
  <html>
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<body>
    <div class="spider">
        <div class="spiderweb"></div>
        <div class="body">
            <div class="eye left"></div>
            <div class="eye right"></div>
        </div>
        <div class="legs left">
            <div class="leg"></div>
            <div class="leg"></div>
            <div class="leg"></div>
        </div>
        <div class="legs right">
            <div class="leg"></div>
            <div class="leg"></div>
            <div class="leg"></div>
        </div>
    </div>
  
  <div id="main-div">
  <div id="game">
    <h1 id="hang-man">IT HANGMAN</h1>
    <img src="https://www.it.kmitl.ac.th/wp-content/themes/itkmitl2017wp/img/300x200-thumb.png">
  </div>
  <div><button id="create-game" class="btn btn-primary purple">PLAY</button></div>
    
<div class="flame" style="left:5%;animation-duration:3s"></div>
    <div class="flame" style="left:15%;animation-duration:4s"></div>
    <div class="flame2" style="left:25%;animation-duration:5s"></div>
    <div class="flame" style="left:35%;animation-duration:6s"></div>
    <div class="flame2" style="left:45%;animation-duration:4s"></div>
    <div class="flame" style="left:55%;animation-duration:12s"></div>
    <div class="flame2" style="left:65%;animation-duration:9s"></div>
    <div class="flame" style="left:75%;animation-duration:4s"></div>
    <div class="flame" style="left:85%;animation-duration:5s"></div>
  <div class="flame2" style="left:95%;animation-duration:6s"></div>
 </div>
</body>
  </html>
  
  
  <script>
    const programing = [
  "print",
  "if",
  "else",
  "elseif",
  "loop",
  "for",
  "variable",
  "data Type",
  "function",
  "object",
  "algorithm",
  "idle",
  "module",
  "java",
  "python",
  "split",
  "operator",
  "syntax",
  "input",
  "output"
];

const itf = [
  "labtop",
  "tablet",
  "computer",
  "desktop",
  "sever",
  "mainframe",
  "terminal",
  "cloud",
  "digital",
  "resolution",
  "port",
  "bluetooth",
  "wifi",
  "nfc",
  "hardware",
  "software",
  "motherboard",
  "decode",
  "execute",
  "store",
  "ram",
  "rom"
];

const ics = [
  "input",
  "output",
  "analog",
  "digital",
  "cpu",
  "clock",
  "microprocessor",
  "microcontroller",
  "memory",
  "volatile",
  "random",
  "latch",
  "databus",
  "interrupt",
  "decoder",
  "comparator",
  "adder",
  "register"
];

// Hangman object creator class function
class Hangman {
  constructor(word, guesses) {
    this.word = word.toLowerCase().split("");
    this.guesses = guesses;
    this.guessedLetters = [];
  }
  getPuzzle() {
    let puzzle = "";

this.word.forEach(letter => {
      if (this.guessedLetters.includes(letter) || letter === " ") {
        puzzle += letter;
      } else {
        puzzle += "_ ";
      }
    });

return puzzle;
  }
  guess(guess) {
    if (
      !this.guessedLetters.includes(guess) &&
      guess.length === 1 &&
      this.guesses !== 0
    ) {
      this.guessedLetters.push(guess);
      if (this.word.includes(guess)) {
        console.log("You guessed Right");
        return this.getPuzzle();
      } else {
        this.guesses--;
        console.log("You guessed wrong");
        return this.getPuzzle();
      }
    } else if (
      this.guessedLetters.includes(guess) &&
      guess.length === 1 &&
      this.guesses !== 0
    ) {
      return "You already guessed that letter";
    } else if (
      !this.guessedLetters.includes(guess) &&
      guess.length === 1 &&
      this.guesses === 0
    ) {
      return "Game Over";
    }
  }
}

// Generate a new game
const newGame = (word, guessCount) =>
  typeof word === "string" && typeof guessCount === "number"
    ? new Hangman(word, guessCount)
    : "Word or number of guesses not valid";

// Generate a form for a new game
const generateNewGameDom = () => {
  const guessForm = document.createElement("input");
  guessForm.setAttribute("type", "number");
  guessForm.setAttribute("id", "guess-field");
  guessForm.setAttribute("placeholder", "enter number");
  guessForm.setAttribute("max", 10);
  guessForm.setAttribute("min", 1);
  guessForm.setAttribute("class", "form-control");
  const submitBtn = document.createElement("button");
  submitBtn.setAttribute("id", "generate-game-btn");
  submitBtn.setAttribute("class", "btn btn-outline-primary rainbow black");
  submitBtn.textContent = "submit";
  
  const guessLabeling = document.createElement("label");
  guessLabeling.textContent = 'number of guesses(1-10):'
  guessLabeling.appendChild(guessForm)

const fieldSet = document.createElement("fieldset");
  fieldSet.setAttribute("id", "dificulty-fieldset");

const icsLvDiv = document.createElement("div");
  const icsLvLabel = document.createElement("label");
  icsLvLabel.setAttribute("class", "red2 right-margin");
  icsLvLabel.textContent = "ICS";
  icsLvDiv.appendChild(icsLvLabel);
  const icsLv = document.createElement("input");
  icsLv.setAttribute("class", "lvl1");
  icsLv.setAttribute("type", "radio");
  icsLv.setAttribute("name", "level");
  icsLv.setAttribute("value", "ics");
  icsLvDiv.appendChild(icsLv);

const itfLvDiv = document.createElement("div");
  const itfLvLabel = document.createElement("label");
  itfLvLabel.textContent = "ITF";
  itfLvLabel.setAttribute("class", "red3 right-margin");
  itfLvDiv.appendChild(itfLvLabel);
  const itfLv = document.createElement("input");
  itfLv.setAttribute("class", "lvl2");
  itfLv.setAttribute("type", "radio");
  itfLv.setAttribute("name", "level");
  itfLv.setAttribute("value", "itf");
  itfLvDiv.appendChild(itfLv);

const programingLvDiv = document.createElement("div");
  const programingLvLabel = document.createElement("label");
  programingLvLabel.setAttribute("class", "red1 right-margin");
  programingLvLabel.textContent = "Programing";
  programingLvDiv.appendChild(programingLvLabel);
  const programingLv = document.createElement("input");
  programingLv.setAttribute("class", "lvl3");
  programingLv.setAttribute("type", "radio");
  programingLv.setAttribute("name", "level");
  programingLv.setAttribute("value", "programing");
  programingLvDiv.appendChild(programingLv);

const form = document.createElement("form");
  form.setAttribute("id", "game-form");
  form.setAttribute("class", "form-group");
  form.appendChild(guessLabeling);
  form.appendChild(icsLvDiv);
  form.appendChild(itfLvDiv);
  form.appendChild(programingLvDiv);
  form.appendChild(submitBtn);

const bootDiv = document.createElement("div");
  bootDiv.setAttribute("class", "form-group");
  bootDiv.appendChild(form);

const gameForm = document.querySelector("#game");
  gameForm.setAttribute("class", "container text-center");
  gameForm.appendChild(bootDiv);
};

// Reset Game
const resetGame = type => {
  const gameForm = document.querySelector("#game");

const resetBtn = document.createElement("button");
  resetBtn.textContent = "Try Again";
  onClick="location.reload(true)";
  resetBtn.setAttribute("id", "reset-game");
  resetBtn.setAttribute("target", "_blank");
  resetBtn.setAttribute("class", "btn btn-outline-dark");
  gameForm.appendChild(resetBtn);

const resetBtnComplete = document.querySelector("#reset-game");
  resetBtnComplete.addEventListener("click", e => {
    e.preventDefault();
   window.location.href = window.location.href;
  });
};

// Generate the game
const gameGenerator = function(obj) {
  const gameForm = document.querySelector("#game");
  gameForm.innerHTML = "";

const gameWord = document.createElement("h3");
  gameWord.textContent = obj.getPuzzle();
  gameForm.appendChild(gameWord);

const gameGuesses = document.createElement("p");
  gameGuesses.innerHTML = `remaining guesses: <span class="number">${
    obj.guesses
  }</span>`;
  gameForm.appendChild(gameGuesses);

const gameObject = obj.getPuzzle();
  const guessObject = obj.guesses;

if (!gameObject.includes("_ ")) {
    const finishGame = document.createElement("h2");
    finishGame.setAttribute("class", "purple2");
    finishGame.textContent = "YOU WON THIS GAME!!!";
    gameForm.appendChild(finishGame);
    
    const winImg = document.createElement("img");
    winImg.setAttribute("src", "https://f.ptcdn.info/694/043/000/o91u88hxzQ1jAItaY6v-o.gif");
    winImg.setAttribute("class", "img");
    gameForm.appendChild(winImg);

resetGame();
  } else if (gameObject.includes("_ ") && guessObject === 0) {
    const lostGame = document.createElement("h2");
    lostGame.setAttribute("class", "red2");
    lostGame.textContent = "Game Over";
    gameForm.appendChild(lostGame);
    
    const correctWord = document.createElement("p");
    correctWord.setAttribute("class", "red");
    correctWord.innerHTML = `Word: <span class="number">${obj.word.join('')}</span>`;
    gameForm.appendChild(correctWord);
    
    const lostImg = document.createElement("img");
    lostImg.setAttribute("src", "https://i.pinimg.com/originals/8e/eb/97/8eeb97325d4018e93ae503da7525c087.gif");
    lostImg.setAttribute("class", "img")
    gameForm.appendChild(lostImg);
    
    resetGame();
  }
};

const createGame = document.querySelector("#create-game");

createGame.addEventListener("click", e => {
  e.preventDefault();
  const gameForm = document.querySelector("#game");
  gameForm.innerHTML = "";

const content = gameForm.innerHTML;
  const button = document.querySelector("#create-game");
  if (content === "") {
    generateNewGameDom();
    button.remove();
    const gameInput = gameForm.querySelector("#game-form");
    gameInput.addEventListener("submit", e => {
      e.preventDefault();

let currentGame;

const guessing = document.querySelector("#guess-field");
      const guessingNum = parseInt(guessing.value, 10);

const level = document.getElementsByName("level");
      let levelValue;
      for (let i in level) {
        if (level[i].checked) {
          levelValue = level[i].value;
        }
      }
      console.log(levelValue);

if (currentGame) {
        gameGenerator(currentGame);
        window.addEventListener("keypress", e => {
          let guessVal = String.fromCharCode(e.charCode);
          guessVal = guessVal.toLowerCase();
          currentGame.guess(guessVal);
          gameGenerator(currentGame);
        });
      }
    });
  } else {
    console.log("Form already generated");
  }
});
  </script>