Skip to content

Instantly share code, notes, and snippets.

@soopyc

soopyc/index.html

Created November 20, 2018 04:31
Show Gist options
  • Save soopyc/4a65fa47aef8c000758f4a9fc90023d4 to your computer and use it in GitHub Desktop.
Save soopyc/4a65fa47aef8c000758f4a9fc90023d4 to your computer and use it in GitHub Desktop.
Download ZIP
Hangman // source https://jsbin.com/mavito
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Hangman</title>
<style id="jsbin-css">
* {
font-family: "Courier New";
}
#word {
font-size: xx-large;
font-weight: bold;
margin: 30px;
}
button {
margin: 0px;
height: 80px;
width: 80px;
font-family: "Century Gothic";
font-size: 30px;
}
#newGame {
width: 80px;
height: 20px;
font-size: 10px;
position: absolute;
top: 0px;
left: 100px;
}
</style>
</head>
<body><button id="newGame">New Game</button>
<canvas width='100' height='100'>
Your browser can't draw!
</canvas>
<div id="word"></div>
<hr>
<div id="lives"></div>
<hr>
<div id="buttons">
<button class="guess vowel">A</button><button class="guess vowel">E</button><button class="guess vowel">I</button><button class="guess vowel">O</button><button class="guess vowel">U</button><hr>
<button class="guess consonant">B</button><button class="guess consonant">C</button><button class="guess consonant">D</button><button class="guess consonant">F</button><button class="guess consonant">G</button><button class="guess consonant">H</button><button class="guess consonant">J</button><button class="guess consonant">K</button><button class="guess consonant">L</button><button class="guess consonant">M</button><button class="guess consonant">N</button><button class="guess consonant">P</button><button class="guess consonant">Q</button><button class="guess consonant">R</button><button class="guess consonant">S</button><button class="guess consonant">T</button><button class="guess consonant">V</button><button class="guess consonant">W</button><button class="guess consonant">X</button><button class="guess consonant">Y</button><button class="guess consonant">Z</button></div>
<script id="jsbin-javascript">
//bind HTML to variables
var guessingButtons = $('.guess');
var wordText = $('#word');
var livesText = $('#lives');
//choose the secret word
var nounList = [
"CALYPSO",
"ANNIE",
"OLIVER",
"HEBE",
"KENNY",
"OWEN",
"CHLOE",
"IVANKA",
"RINGO",
"WOLF",
"STEAM",
"MARCO",
"SNACKS",
"WATER",
"FRIES",
"TEACHER",
"EXAMS",
"DANIEL",
"LINCOLN",
"LIANA",
"ZOO"
];
var adjectiveList = [
"BAD",
"GOOD",
"CLEVER",
"STUPID",
"HORRIFYING",
"DELIGHTFUL",
"SCARED",
"BRAVE",
"ANGRY",
"DISAPPOINTED",
"HUNGRY",
"NOISY",
"SLOW",
"FAST",
"QUIET",
"ANNOYING",
"ENJOYABLE",
"DARK",
"LIGHT",
"EVIL",
"HEROIC",
"SUPER",
"POWERFUL",
"WEAK",
"BEAUTIFUL",
"UGLY",
"CRAZY"
];
var word = chooseRandomWord(nounList, adjectiveList);
var hiddenWord = writeStars(word);
//starting number of lives
var lives = 10;
//write the starting wordText and livesText
livesText.html('Lives: '+lives);
wordText.html(hiddenWord);
//function to reveal letters
function reveal(letter){
var newHiddenWord = "";
var i=0;
var wrong = true;
do {
if(letter===word[i]){
//the letter is in the word
wrong = false;
newHiddenWord+=word[i];
}else{
//the letter is not in the word
newHiddenWord+=hiddenWord[i];
}
i++;
} while(i<word.length);
if(wrong){
lives= lives-1;
drawMan(lives);
livesText.html('Lives: '+lives);
if(lives===0){
gameOverLoser();
}
}else{
hiddenWord = newHiddenWord;
wordText.html(hiddenWord);
if(word===hiddenWord){
youWin();
}
}
}
//function for LOSING
function gameOverLoser(){
$('.guess').prop('disabled',true);
$('#word').html(word);
$('body').css('background','red');
$('*').css('color','yellow');
}
//function for WINNING!!!!!!!!!!!!!!
function youWin(){
$('body').css('background','#1FDE4F');
$('.guess').prop('disabled',true); $('#word').css('color','#8C3056');
}
//run the reveal function when someone guesses a letter
$('.guess').click(function(){
reveal($(this).html());
$(this).hide();
});
//TODO: show a list of the wrong letters
//TODO: make the hidden word automatically
function writeStars(word){
var stars = "";
for(var x = 0; x < word.length; x++){
if(word[x]===" "){
//there is no letter, it's a space
stars+=" ";
}else{
//it is a letter
stars+="*";
}
}
return stars;
}
//TODO: make the game choose different words
function chooseRandomWord(nouns, adjectives){
var xnoun = Math.floor((Math.random() * nouns.length ));
var xadj = Math.floor((Math.random() * adjectives.length ));
return adjectives[xadj]+" "+nouns[xnoun];
}
var canv = $('canvas').get(0);
var draw = canv.getContext('2d');
function drawMan(x){
draw.clearRect(0, 0, canv.width, canv.height);
if(x<=9){
draw.beginPath();
draw.moveTo(10,100);
draw.lineTo(90,100);
draw.stroke();
}
if(x<=8){
draw.beginPath();
draw.moveTo(10,100);
draw.lineTo(10,0);
draw.stroke();
}
if(x<=7){
draw.beginPath();
draw.moveTo(10,0);
draw.lineTo(50,0);
draw.stroke();
}
if(x<=6){
draw.beginPath();
draw.moveTo(50,0);
draw.lineTo(50,10);
draw.stroke();
}
if(x<=5){
draw.beginPath();
draw.arc(50,20,10,2*Math.PI,0);
draw.stroke();
}
if(x<=4){
draw.beginPath();
draw.moveTo(50,30);
draw.lineTo(50,60);
draw.stroke();
}
if(x<=3){
draw.beginPath();
draw.moveTo(50,35);
draw.lineTo(60,50);
draw.stroke();
}
if(x<=2){
draw.beginPath();
// draw.moveTo(50,35);
draw.lineTo(40,50);
draw.stroke();
}
if(x<=1){
draw.beginPath();
draw.moveTo(50,60);
draw.lineTo(60,80);
draw.stroke();
}
if(x<=0){
draw.beginPath();
draw.moveTo(50,60);
draw.lineTo(40,80);
draw.stroke();
}
}
$('#newGame').click(function(){
location.reload();
});
</script>
<script id="jsbin-source-css" type="text/css">* {
font-family: "Courier New";
}
#word {
font-size: xx-large;
font-weight: bold;
margin: 30px;
}
button {
margin: 0px;
height: 80px;
width: 80px;
font-family: "Century Gothic";
font-size: 30px;
}
#newGame {
width: 80px;
height: 20px;
font-size: 10px;
position: absolute;
top: 0px;
left: 100px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">//bind HTML to variables
var guessingButtons = $('.guess');
var wordText = $('#word');
var livesText = $('#lives');
//choose the secret word
var nounList = [
"CALYPSO",
"ANNIE",
"OLIVER",
"HEBE",
"KENNY",
"OWEN",
"CHLOE",
"IVANKA",
"RINGO",
"WOLF",
"STEAM",
"MARCO",
"SNACKS",
"WATER",
"FRIES",
"TEACHER",
"EXAMS",
"DANIEL",
"LINCOLN",
"LIANA",
"ZOO"
];
var adjectiveList = [
"BAD",
"GOOD",
"CLEVER",
"STUPID",
"HORRIFYING",
"DELIGHTFUL",
"SCARED",
"BRAVE",
"ANGRY",
"DISAPPOINTED",
"HUNGRY",
"NOISY",
"SLOW",
"FAST",
"QUIET",
"ANNOYING",
"ENJOYABLE",
"DARK",
"LIGHT",
"EVIL",
"HEROIC",
"SUPER",
"POWERFUL",
"WEAK",
"BEAUTIFUL",
"UGLY",
"CRAZY"
];
var word = chooseRandomWord(nounList, adjectiveList);
var hiddenWord = writeStars(word);
//starting number of lives
var lives = 10;
//write the starting wordText and livesText
livesText.html('Lives: '+lives);
wordText.html(hiddenWord);
//function to reveal letters
function reveal(letter){
var newHiddenWord = "";
var i=0;
var wrong = true;
do {
if(letter===word[i]){
//the letter is in the word
wrong = false;
newHiddenWord+=word[i];
}else{
//the letter is not in the word
newHiddenWord+=hiddenWord[i];
}
i++;
} while(i<word.length);
if(wrong){
lives= lives-1;
drawMan(lives);
livesText.html('Lives: '+lives);
if(lives===0){
gameOverLoser();
}
}else{
hiddenWord = newHiddenWord;
wordText.html(hiddenWord);
if(word===hiddenWord){
youWin();
}
}
}
//function for LOSING
function gameOverLoser(){
$('.guess').prop('disabled',true);
$('#word').html(word);
$('body').css('background','red');
$('*').css('color','yellow');
}
//function for WINNING!!!!!!!!!!!!!!
function youWin(){
$('body').css('background','#1FDE4F');
$('.guess').prop('disabled',true); $('#word').css('color','#8C3056');
}
//run the reveal function when someone guesses a letter
$('.guess').click(function(){
reveal($(this).html());
$(this).hide();
});
//TODO: show a list of the wrong letters
//TODO: make the hidden word automatically
function writeStars(word){
var stars = "";
for(var x = 0; x < word.length; x++){
if(word[x]===" "){
//there is no letter, it's a space
stars+=" ";
}else{
//it is a letter
stars+="*";
}
}
return stars;
}
//TODO: make the game choose different words
function chooseRandomWord(nouns, adjectives){
var xnoun = Math.floor((Math.random() * nouns.length ));
var xadj = Math.floor((Math.random() * adjectives.length ));
return adjectives[xadj]+" "+nouns[xnoun];
}
var canv = $('canvas').get(0);
var draw = canv.getContext('2d');
function drawMan(x){
draw.clearRect(0, 0, canv.width, canv.height);
if(x<=9){
draw.beginPath();
draw.moveTo(10,100);
draw.lineTo(90,100);
draw.stroke();
}
if(x<=8){
draw.beginPath();
draw.moveTo(10,100);
draw.lineTo(10,0);
draw.stroke();
}
if(x<=7){
draw.beginPath();
draw.moveTo(10,0);
draw.lineTo(50,0);
draw.stroke();
}
if(x<=6){
draw.beginPath();
draw.moveTo(50,0);
draw.lineTo(50,10);
draw.stroke();
}
if(x<=5){
draw.beginPath();
draw.arc(50,20,10,2*Math.PI,0);
draw.stroke();
}
if(x<=4){
draw.beginPath();
draw.moveTo(50,30);
draw.lineTo(50,60);
draw.stroke();
}
if(x<=3){
draw.beginPath();
draw.moveTo(50,35);
draw.lineTo(60,50);
draw.stroke();
}
if(x<=2){
draw.beginPath();
// draw.moveTo(50,35);
draw.lineTo(40,50);
draw.stroke();
}
if(x<=1){
draw.beginPath();
draw.moveTo(50,60);
draw.lineTo(60,80);
draw.stroke();
}
if(x<=0){
draw.beginPath();
draw.moveTo(50,60);
draw.lineTo(40,80);
draw.stroke();
}
}
$('#newGame').click(function(){
location.reload();
});
</script></body>
</html>
Raw
jsbin.mavito.css
* {
font-family: "Courier New";
}
#word {
font-size: xx-large;
font-weight: bold;
margin: 30px;
}
button {
margin: 0px;
height: 80px;
width: 80px;
font-family: "Century Gothic";
font-size: 30px;
}
#newGame {
width: 80px;
height: 20px;
font-size: 10px;
position: absolute;
top: 0px;
left: 100px;
}
Raw
jsbin.mavito.js
//bind HTML to variables
var guessingButtons = $('.guess');
var wordText = $('#word');
var livesText = $('#lives');
//choose the secret word
var nounList = [
"CALYPSO",
"ANNIE",
"OLIVER",
"HEBE",
"KENNY",
"OWEN",
"CHLOE",
"IVANKA",
"RINGO",
"WOLF",
"STEAM",
"MARCO",
"SNACKS",
"WATER",
"FRIES",
"TEACHER",
"EXAMS",
"DANIEL",
"LINCOLN",
"LIANA",
"ZOO"
];
var adjectiveList = [
"BAD",
"GOOD",
"CLEVER",
"STUPID",
"HORRIFYING",
"DELIGHTFUL",
"SCARED",
"BRAVE",
"ANGRY",
"DISAPPOINTED",
"HUNGRY",
"NOISY",
"SLOW",
"FAST",
"QUIET",
"ANNOYING",
"ENJOYABLE",
"DARK",
"LIGHT",
"EVIL",
"HEROIC",
"SUPER",
"POWERFUL",
"WEAK",
"BEAUTIFUL",
"UGLY",
"CRAZY"
];
var word = chooseRandomWord(nounList, adjectiveList);
var hiddenWord = writeStars(word);
//starting number of lives
var lives = 10;
//write the starting wordText and livesText
livesText.html('Lives: '+lives);
wordText.html(hiddenWord);
//function to reveal letters
function reveal(letter){
var newHiddenWord = "";
var i=0;
var wrong = true;
do {
if(letter===word[i]){
//the letter is in the word
wrong = false;
newHiddenWord+=word[i];
}else{
//the letter is not in the word
newHiddenWord+=hiddenWord[i];
}
i++;
} while(i<word.length);
if(wrong){
lives= lives-1;
drawMan(lives);
livesText.html('Lives: '+lives);
if(lives===0){
gameOverLoser();
}
}else{
hiddenWord = newHiddenWord;
wordText.html(hiddenWord);
if(word===hiddenWord){
youWin();
}
}
}
//function for LOSING
function gameOverLoser(){
$('.guess').prop('disabled',true);
$('#word').html(word);
$('body').css('background','red');
$('*').css('color','yellow');
}
//function for WINNING!!!!!!!!!!!!!!
function youWin(){
$('body').css('background','#1FDE4F');
$('.guess').prop('disabled',true); $('#word').css('color','#8C3056');
}
//run the reveal function when someone guesses a letter
$('.guess').click(function(){
reveal($(this).html());
$(this).hide();
});
//TODO: show a list of the wrong letters
//TODO: make the hidden word automatically
function writeStars(word){
var stars = "";
for(var x = 0; x < word.length; x++){
if(word[x]===" "){
//there is no letter, it's a space
stars+=" ";
}else{
//it is a letter
stars+="*";
}
}
return stars;
}
//TODO: make the game choose different words
function chooseRandomWord(nouns, adjectives){
var xnoun = Math.floor((Math.random() * nouns.length ));
var xadj = Math.floor((Math.random() * adjectives.length ));
return adjectives[xadj]+" "+nouns[xnoun];
}
var canv = $('canvas').get(0);
var draw = canv.getContext('2d');
function drawMan(x){
draw.clearRect(0, 0, canv.width, canv.height);
if(x<=9){
draw.beginPath();
draw.moveTo(10,100);
draw.lineTo(90,100);
draw.stroke();
}
if(x<=8){
draw.beginPath();
draw.moveTo(10,100);
draw.lineTo(10,0);
draw.stroke();
}
if(x<=7){
draw.beginPath();
draw.moveTo(10,0);
draw.lineTo(50,0);
draw.stroke();
}
if(x<=6){
draw.beginPath();
draw.moveTo(50,0);
draw.lineTo(50,10);
draw.stroke();
}
if(x<=5){
draw.beginPath();
draw.arc(50,20,10,2*Math.PI,0);
draw.stroke();
}
if(x<=4){
draw.beginPath();
draw.moveTo(50,30);
draw.lineTo(50,60);
draw.stroke();
}
if(x<=3){
draw.beginPath();
draw.moveTo(50,35);
draw.lineTo(60,50);
draw.stroke();
}
if(x<=2){
draw.beginPath();
// draw.moveTo(50,35);
draw.lineTo(40,50);
draw.stroke();
}
if(x<=1){
draw.beginPath();
draw.moveTo(50,60);
draw.lineTo(60,80);
draw.stroke();
}
if(x<=0){
draw.beginPath();
draw.moveTo(50,60);
draw.lineTo(40,80);
draw.stroke();
}
}
$('#newGame').click(function(){
location.reload();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment