Question

How to make a hangman game web development project using php or html?

Answer 1

<div class="wrapper">

   <h1>Hangman</h1>

    <h2>HomeworkLib game</h2>

    <p>Employing the letters given below. you can use the clue or guess a word straight way </p>

</div>

<div class="wrapper">

    <div id="buttons">

    </div>

    <p id="name of group "></p>

    <div id="hold">

    </div>

    <p id="chancesyougot"></p>

    <p id="clue">Clue -</p>

     <canvas id="stickman">The browser should support HML5</canvas>

    <div class="container">

      <button id="clue">clue</button>

      <button id="reset">start again</button>

    </div>

</div>

css

/* Variabes */
$orange: #ffa600;
$green: #c1d72e;
$blue: #82d2e5;
$grey:#f3f3f3;
$white: #fff;
$base-color:$green ;

/* Mixin's */

@mixin transition {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}

@mixin clear {
&:after {
content: "";
display: table;
clear: both;
}
}

@mixin box-size {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

@mixin transition {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}

@mixin fade {
-moz-transition: all 1s ease-in;
-moz-transition:all 0.3s ease-in-out;
-webkit-transition:all 0.3s ease-in-out;
}

@mixin opacity {
opacity:0.4;
filter:alpha(opacity=40);
@include fade;
}

@mixin corners ($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
-khtml-border-radius: $radius;
}

body {
background:$base-color;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color:$white;
height:100%;
text-align:center;
font-size:18px;
}

.wrappper{
@include clear;
width:100%;
margin:0 auto;
}

canvas{
color:$white;
border: $white dashed 2px;
padding:15px;
}

h1, h2, h3 {
   font-family: 'Roboto', sans-serif;
   font-weight: 100;
   text-transform: uppercase;
margin:5px 0;
}

h1 {
   font-size: 2.6em;
}

h2 {
   font-size: 1.6em;
}

p{
font-size: 1.6em;
}

#alphabet {
@include clear;
margin:15px auto;
padding:0;
max-width:900px;
}

#alphabet li {
float:left;
margin: 0 10px 10px 0;
list-style:none;
width:35px;
height:30px;
padding-top:10px;
background:$white;
color:$base-color;
cursor:pointer;
@include corners(5px);
border: solid 1px $white;
  
&:hover{
background:$base-color;
border: solid 1px $white;
color:$white;
}
}

#my-word {
margin: 0;
display: block;
padding: 0;
display:block;
}

#my-word li {
position: relative;
list-style: none;
margin: 0;
display: inline-block;
padding: 0 10px;
font-size:1.6em;
}

.active {
@include opacity;
cursor:default;
  
&:hover{
@include fade;
@include opacity;
}
}

#mylives{
font-size:1.6em;
text-align:center;
display:block;
}

button{
@include corners (5px);
background:$base-color;
color:$white;
border: solid 1px $white;
text-decoration:none;
cursor:pointer;
font-size:1.2em;
padding:18px 10px;
width:180px;
margin: 10px;
outline: none;
  
&:hover{
@include transition;
background:$white;
border: solid 1px $white;
color:$base-color;
}
}

@media (max-width: 767px) {
#alphabet {
padding:0 0 0 15px;
}
}

@media (max-width: 480px) {
#alphabet {
padding:0 0 0 25px;
}
}

Javascript:

window.onload = function () {

  var alphabet = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h',

        'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's',

        't', 'u', 'v', 'w', 'x', 'y', 'z'];

  

  var groups;         

  var groupselected;

  var getclue ;        

  var word ;          

  var guess ;          

  var geusses = [ ];     

  var lives ;      

  var counter ;   

  var space;     

  

  var showLives = document.getElementById("chancesyougot");

  var showCatagory = document.getElementById("group");

  var getclue = document.getElementById("clue");

  var showClue = document.getElementById("clue");

  var buttons = function () {

    myButtons = document.getElementById('buttons');

    letters = document.createElement('ul');

    for (var i = 0; i < alphabet.length; i++) {

      letters.id = 'alphabet';

      list = document.createElement('li');

      list.id = 'letter';

      list.innerHTML = alphabet[i];

      check();

      myButtons.appendChild(letters);

      letters.appendChild(list);

    }

  }

    

  

  var selectCat = function () {

    if (groupselected === groups[0]) {

      name of group .innerHTML = "The group is football team";

    } else if (groupselected === groups[1]) {

      name of group .innerHTML = "The group selected is Films";

    } else if (groupselected === groups[2]) {

      name of group .innerHTML = "The group selected is Cities";

    }

  }

     result = function () {

    wordHolder = document.getElementById('hold');

    correct = document.createElement('ul');

    for (var i = 0; i < word.length; i++) {

      correct.setAttribute('id', 'my-word');

      guess = document.createElement('li');

      guess.setAttribute('class', 'guess');

      if (word[i] === "-") {

        guess.innerHTML = "-";

        space = 1;

      } else {

        guess.innerHTML = "_";

      }

      geusses.push(guess);

      wordHolder.appendChild(correct);

      correct.appendChild(guess);

    }

  }

  

  

   comments = function () {

    showLives.innerHTML = "You have " + lives + " lives";

    if (lives < 1) {

      showLives.innerHTML = "Game Over";

    }

    for (var i = 0; i < geusses.length; i++) {

      if (counter + space === geusses.length) {

        showLives.innerHTML = "You Win!";

      }

    }

  }

  var animate = function () {

    var drawMe = lives ;

    drawArray[drawMe]();

  }

  

  canvas = function(){

    myStickman = document.getElementById("stickman");

    context = myStickman.getContext('2d');

    context.beginPath();

    context.strokeStyle = "#fff";

    context.lineWidth = 2;

  };

  

    head = function(){

      myStickman = document.getElementById("stickman");

      context = myStickman.getContext('2d');

      context.beginPath();

      context.arc(60, 25, 10, 0, Math.PI*2, true);

      context.stroke();

    }

    

  draw = function($pathFromx, $pathFromy, $pathTox, $pathToy) {

    

    context.moveTo($pathFromx, $pathFromy);

    context.lineTo($pathTox, $pathToy);

    context.stroke();

}

   frame1 = function() {

     draw (0, 150, 150, 150);

   };

   

   frame2 = function() {

     draw (10, 0, 10, 600);

   };

  

   frame3 = function() {

     draw (0, 5, 70, 5);

   };

  

   frame4 = function() {

     draw (60, 5, 60, 15);

   };

  

   torso = function() {

     draw (60, 36, 60, 70);

   };

  

   rightArm = function() {

     draw (60, 46, 100, 50);

   };

  

   leftArm = function() {

     draw (60, 46, 20, 50);

   };

  

   rightLeg = function() {

     draw (60, 70, 100, 100);

   };

  

   leftLeg = function() {

     draw (60, 70, 20, 100);

   };

  

  drawArray = [rightLeg, leftLeg, rightArm, leftArm, torso, head, frame4, frame3, frame2, frame1];

   check = function () {

    list.onclick = function () {

      var geuss = (this.innerHTML);

      this.setAttribute("class", "active");

      this.onclick = null;

      for (var i = 0; i < word.length; i++) {

        if (word[i] === geuss) {

          geusses[i].innerHTML = geuss;

          counter += 1;

        }

      }

      var j = (word.indexOf(geuss));

      if (j === -1) {

        lives -= 1;

        comments();

        animate();

      } else {

        comments();

      }

    }

  }

  

    

  play = function () {

    groups = [

        ["everton", "liverpool", "swansea", "chelsea", "hull", "manchester-city", "newcastle-united"],

        ["alien", "dirty-harry", "gladiator", "finding-nemo", "jaws"],

        ["manchester", "milan", "madrid", "amsterdam", "prague"]

    ];

    groupselected = groups[Math.floor(Math.random() * groups.length)];

    word = groupselected[Math.floor(Math.random() * groupselected.length)];

    word = word.replace(/\s/g, "-");

    console.log(word);

    buttons();

    geusses = [ ];

    lives = 10;

    counter = 0;

    space = 0;

    result();

    comments();

    selectCat();

    canvas();

  }

  play();

  

    clue.onclick = function() {

      clues = [

        ["Based in manchester", " Most top ranked team"],

        ["Science-adventure film", "James camerron film", "Top five most earned move of all time"],

        ["South city in India", "Most cleanest city of Tamil Nadu", "Central governement defence factory"]

    ];

    var catagoryIndex = groups.indexOf(groupselected);

    var clueIndex = groupselected.indexOf(word);

    showClue.innerHTML = "Clue: - " + clues [catagoryIndex][clueIndex];

  };

   // Reset

  document.getElementById('reset').onclick = function() {

    correct.parentNode.removeChild(correct);

    letters.parentNode.removeChild(letters);

    showClue.innerHTML = "";

    context.clearRect(0, 0, 400, 400);

    play();

  }

}