Devanshu-17
3 years ago
parent
897b722467
commit
b2d66067e8
@ -0,0 +1,9 @@
|
||||
# Hangman-js
|
||||
|
||||
The traditional hangman puzzle game written as prototype object class in vanilla Javascript.
|
||||
|
||||
## How to use
|
||||
|
||||
* Open `index.html` to try it out
|
||||
|
||||
### [By Devanshu Mahapatra](https://github.com/Devanshu-17)
|
||||
@ -0,0 +1,103 @@
|
||||
html,body {
|
||||
font-size: 1.2em;
|
||||
font-family: 'Arvo', serif;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
margin: 0.2em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#hangm_gameover, #hangm_victory {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
section#hangman {
|
||||
height: 30.5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#hangm {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.h {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#hangm_animation {
|
||||
height: 10em;
|
||||
margin: 0 auto;
|
||||
width: 11em;
|
||||
}
|
||||
|
||||
#hangm_word,
|
||||
#hangm_guesses {
|
||||
letter-spacing: 1em;
|
||||
}
|
||||
|
||||
.man_head {
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #FFCC99;
|
||||
position: relative;
|
||||
bottom: 150px;
|
||||
left: 112px;
|
||||
/* width and height can be anything, as long as they're equal */
|
||||
}
|
||||
|
||||
.man_upper {
|
||||
background: #000066;
|
||||
width: 40px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
left: 112px;
|
||||
bottom: 150px;
|
||||
}
|
||||
|
||||
.man_lower {
|
||||
background: #330099;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
left: 117px;
|
||||
bottom: 150px;
|
||||
}
|
||||
|
||||
.pole_h {
|
||||
background: #000;
|
||||
width: 100px;
|
||||
height: 8px;
|
||||
position: relative;
|
||||
left: 46px;
|
||||
}
|
||||
|
||||
.pole_v {
|
||||
width: 8px;
|
||||
height: 150px;
|
||||
background: #000;
|
||||
left: 46px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.pole_b {
|
||||
border-color: transparent transparent #000000 transparent;
|
||||
border-width: 0 50px 50px 50px;
|
||||
border-style: solid;
|
||||
width: 0;
|
||||
height: 0;
|
||||
bottom: 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.rope {
|
||||
width: 6px;
|
||||
height: 40px;
|
||||
background-color: #996633;
|
||||
position: relative;
|
||||
bottom: 150px;
|
||||
left: 130px;
|
||||
}
|
||||
@ -0,0 +1,109 @@
|
||||
var Hangman = (function () {
|
||||
'use strict';
|
||||
|
||||
|
||||
function Hangman(elId) {
|
||||
// DOM is ready
|
||||
this.elId = elId;
|
||||
// Possible words
|
||||
this.words = [
|
||||
'PROGRAMMER', 'BRAINSTORM', 'CREATIVE', 'LOLLIPOP',
|
||||
'CULTURE', 'RAZORSHARP', 'SCREWDRIVER', 'TYPEWRITER'
|
||||
];
|
||||
}
|
||||
|
||||
/**
|
||||
* Resets the hangman game
|
||||
*/
|
||||
Hangman.prototype.reset = function () {
|
||||
// Variables
|
||||
this.STOPPED = false;
|
||||
this.MISTAKES = 0;
|
||||
this.GUESSES = [];
|
||||
// Select a random word from the list
|
||||
this.WORD = this.words[Math.floor(Math.random() * this.words.length)];
|
||||
// DOM Elements
|
||||
this.hideElementByClass('h');
|
||||
this.showElementByIdWithContent(this.elId + "_guessbox", null);
|
||||
this.showElementByIdWithContent(this.elId + "_word", this.getGuessedfWord());
|
||||
};
|
||||
|
||||
/**
|
||||
* Logic after the user guessed on a letter
|
||||
*
|
||||
* @param {char} letter A letter guessed by our enduser
|
||||
*/
|
||||
Hangman.prototype.guess = function (letter) {
|
||||
letter = letter.charAt(0).toUpperCase();
|
||||
|
||||
// Check if game is stopped or the user already guessed on that letter
|
||||
if (this.STOPPED || this.GUESSES.indexOf(letter) > -1) {
|
||||
// Then we wont do anything
|
||||
return;
|
||||
}
|
||||
|
||||
// Add the letter to our GUESSES array
|
||||
this.GUESSES.push(letter);
|
||||
// Update the word hint, and guessed letter list for the user
|
||||
this.showElementByIdWithContent(this.elId + "_word", this.getGuessedfWord());
|
||||
this.showElementByIdWithContent(this.elId + "_guesses", this.GUESSES.join(''));
|
||||
|
||||
// Check if our word does not contain the guessed letter
|
||||
if (this.WORD.indexOf(letter) < 0) {
|
||||
// Incorrect guess, increase our mistakes by one
|
||||
this.MISTAKES++;
|
||||
// Show next part of hangman character
|
||||
this.showElementByIdWithContent(this.elId + "_" + this.MISTAKES, null);
|
||||
// Check if its Game Over
|
||||
if (this.MISTAKES === 6) {
|
||||
this.showElementByIdWithContent(this.elId + "_end", "GAME OVER!<br/>The word was: " + this.WORD);
|
||||
this.STOPPED = true;
|
||||
}
|
||||
} else if (this.WORD.indexOf(this.getGuessedfWord()) !== -1) {
|
||||
// Victory condition
|
||||
this.showElementByIdWithContent(this.elId + "_end", "You made it!<br/>The word was: " + this.WORD);
|
||||
this.STOPPED = true;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Displays HTML element by id with the following content
|
||||
*
|
||||
* @param {string} elId DOM ID
|
||||
* @param {HTML} content
|
||||
*/
|
||||
Hangman.prototype.showElementByIdWithContent = function (elId, content) {
|
||||
if (content !== null) {
|
||||
document.getElementById(elId).innerHTML = content;
|
||||
}
|
||||
document.getElementById(elId).style.opacity = 1;
|
||||
};
|
||||
|
||||
/**
|
||||
* Hides element by class
|
||||
*
|
||||
* @param {string} elClass DOM class
|
||||
*/
|
||||
Hangman.prototype.hideElementByClass = function (elClass) {
|
||||
var elements = document.getElementsByClassName(elClass), i;
|
||||
for (i = 0; i < elements.length; i++) {
|
||||
elements[i].style.opacity = 0;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* The word but only with letters the user has guessed so far is visible
|
||||
*/
|
||||
Hangman.prototype.getGuessedfWord = function () {
|
||||
var result = "", i;
|
||||
for (i = 0; i < this.WORD.length; i++) {
|
||||
// Word characters
|
||||
result += (this.GUESSES.indexOf(this.WORD[i]) > -1) ?
|
||||
this.WORD[i] : "_";
|
||||
}
|
||||
return result;
|
||||
};
|
||||
|
||||
// Create and return an instance of this class, its go time!
|
||||
return new Hangman('hangm');
|
||||
}());
|
||||
@ -0,0 +1,45 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="hangman.css" />
|
||||
<link href='http://fonts.googleapis.com/css?family=Arvo' rel="stylesheet" type="text/css">
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
|
||||
<script type="text/javascript" src="hangman.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="hangm">
|
||||
|
||||
<div style="height: 2em; margin-bottom: 3em;">
|
||||
<div id="hangm_end" class="h"></div>
|
||||
</div>
|
||||
|
||||
<div id="hangm_animation">
|
||||
<div id="hangm_2" class="h pole_h"></div>
|
||||
<div id="hangm_1" class="h pole_v"></div>
|
||||
|
||||
<div id="hangm_3" class="h rope"></div>
|
||||
|
||||
<div id="hangm_4" class="h man_head"></div>
|
||||
<div id="hangm_5" class="h man_upper"></div>
|
||||
<div id="hangm_6" class="h man_lower"></div>
|
||||
</div>
|
||||
|
||||
<div style="height: 2em;">
|
||||
<div id="hangm_guesses" class="h"></div>
|
||||
</div>
|
||||
|
||||
<form>
|
||||
<div id="hangm_guessbox" style="height: 8em;" class="h">
|
||||
<div style="height: 4em;">
|
||||
Guess the word:<div id="hangm_word"></div>
|
||||
</div>
|
||||
<input id="guess" onkeyup="Hangman.guess(this.value); this.value=''; return false;" type="text" placeholder="">
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button type="button" id="btn-start" class="btn-lg btn-info" onclick="Hangman.reset(); return false;" >New Game</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in new issue