VPSI CODERS

Project1030 - [Hang Man] Create a Game using HTML, CSS, & JAVASCRIPT

Welcome to Teacher AJ's Coders Class! Today, you will learn how to code and create a game using HTML/CSS/Javascript. Specifically, we will be creating a clicker game. Don't worry about memorizing the code; the focus is on making sure the code works when you open it in your preferred browser, such as Google Chrome, Safari, or Firefox.

NOTE: (It's important to follow this naming convention so that Teacher AJ can easily check your work.)

Follow these steps to get started:

1. On the same folder you have created "<YourName_Projects>".

2. Inside the "<YourName_Projects>" folder, create another folder and name it "<hangman>".

3. Open Notepad++ (or any other text editor of your choice) and create a new blank file.

4. Copy the HTML code provided below and paste it into your Notepad++ file.

5. Go to File > Save As and rename the file "<index.html>". Navigate to your desktop, open the "<hangman>" folder, and click "Save".

6. Copy the CSS code provided below and paste it into your Notepad++ file.

/* Variabes */
/* Mixin's */
body {
  background: #c1d72e;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  color: #fff;
  height: 100%;
  text-align: center;
  font-size: 18px;
}

.wrappper {
  width: 100%;
  margin: 0 auto;
}
.wrappper:after {
  content: "";
  display: table;
  clear: both;
}

canvas {
  color: #fff;
  border: #fff 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 {
  margin: 15px auto;
  padding: 0;
  max-width: 900px;
}
#alphabet:after {
  content: "";
  display: table;
  clear: both;
}

#alphabet li {
  float: left;
  margin: 0 10px 10px 0;
  list-style: none;
  width: 35px;
  height: 30px;
  padding-top: 10px;
  background: #fff;
  color: #c1d72e;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  border: solid 1px #fff;
}
#alphabet li:hover {
  background: #c1d72e;
  border: solid 1px #fff;
  color: #fff;
}

#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 {
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  cursor: default;
}
.active:hover {
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  opacity: 0.4;
  filter: alpha(opacity=40);
  -moz-transition: all 1s ease-in;
  -moz-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
}

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

button {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  background: #c1d72e;
  color: #fff;
  border: solid 1px #fff;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.2em;
  padding: 18px 10px;
  width: 180px;
  margin: 10px;
  outline: none;
}
button:hover {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  background: #fff;
  border: solid 1px #fff;
  color: #c1d72e;
}

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

7. Go to File > Save As and rename the file "<style.css>". Navigate to your desktop, open the "<hangman>" folder, and click "Save".

8. Copy the JavaScript code provided below and paste it into your Notepad++ file.

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 categories;         // Array of topics
  var chosenCategory;     // Selected catagory
  var getHint ;          // Word getHint
  var word ;              // Selected word
  var guess ;             // Geuss
  var geusses = [ ];      // Stored geusses
  var lives ;             // Lives
  var counter ;           // Count correct geusses
  var space;              // Number of spaces in word '-'

// Get elements
  var showLives = document.getElementById("mylives");
  var showCatagory = document.getElementById("scatagory");
  var getHint = document.getElementById("hint");
  var showClue = document.getElementById("clue");

// create alphabet ul
  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);
    }
  }
    
  
  // Select Catagory
  var selectCat = function () {
    if (chosenCategory === categories[0]) {
      catagoryName.innerHTML = "The Chosen Category Is Premier League Football Teams";
    } else if (chosenCategory === categories[1]) {
      catagoryName.innerHTML = "The Chosen Category Is Films";
    } else if (chosenCategory === categories[2]) {
      catagoryName.innerHTML = "The Chosen Category Is Cities";
    }
  }

// Create geusses ul
   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);
    }
  }
  
  // Show lives
   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!";
      }
    }
  }

// Animate man
  var animate = function () {
    var drawMe = lives ;
    drawArray[drawMe]();
  }

// Hangman
  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];

// OnClick Function
   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
  play = function () {
    categories = [
        ["everton", "liverpool", "swansea", "chelsea", "hull", "manchester-city", "newcastle-united"],
        ["alien", "dirty-harry", "gladiator", "finding-nemo", "jaws"],
        ["manchester", "milan", "madrid", "amsterdam", "prague"]
    ];

chosenCategory = categories[Math.floor(Math.random() * categories.length)];
    word = chosenCategory[Math.floor(Math.random() * chosenCategory.length)];
    word = word.replace(/\s/g, "-");
    console.log(word);
    buttons();

geusses = [ ];
    lives = 10;
    counter = 0;
    space = 0;
    result();
    comments();
    selectCat();
    canvas();
  }

play();
  
  // Hint

hint.onclick = function() {

hints = [
        ["Based in Mersyside", "Based in Mersyside", "First Welsh team to reach the Premier Leauge", "Owned by A russian Billionaire", "Once managed by Phil Brown", "2013 FA Cup runners up", "Gazza's first club"],
        ["Science-Fiction horror film", "1971 American action film", "Historical drama", "Anamated Fish", "Giant great white shark"],
        ["Northern city in the UK", "Home of AC and Inter", "Spanish capital", "Netherlands capital", "Czech Republic capital"]
    ];

var catagoryIndex = categories.indexOf(chosenCategory);
    var hintIndex = chosenCategory.indexOf(word);
    showClue.innerHTML = "Clue: - " +  hints [catagoryIndex][hintIndex];
  };

// Reset

document.getElementById('reset').onclick = function() {
    correct.parentNode.removeChild(correct);
    letters.parentNode.removeChild(letters);
    showClue.innerHTML = "";
    context.clearRect(0, 0, 400, 400);
    play();
  }
}

9. Go to File > Save As and rename the file "<script.js>". Navigate to your desktop, open the "<hangman>" folder, and click "Save".

10. Finally, navigate to your folder and test it. Open the "index.html" file in your preferred browser and check if your game is working properly.

This way, you'll be able to follow along and create your own clicker game using HTML, CSS, and JavaScript. Good luck, and have fun coding!