The hangman game

Developer
Nikita Zubarets
Size
9,753 Kb
Views
66,792
  1. The hangman game Previews
  2. The hangman game HTML Codes
  3. The hangman game CSS Codes
  4. The hangman game JS Codes

How do I make an the hangman game?

Try yourself!. What is a the hangman game? How do you make a the hangman game? This script and codes were developed by Nikita Zubarets on 12 September 2022, Monday.

The hangman game Previews
IQ Test

The hangman game - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>The hangman game</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="hoja"></div>
<div id="daily_failed_text"> Увы, но вы исчерпали лимит ошибок на сегодня, попробуйте завтра!
</div>
<ul id="category"> <li data-category="all"> Все </li> <li data-category="animals"> Животные </li> <li data-category="geography"> Георгафия </li> <li data-category="food"> Еда </li> <li data-category="movie"> Кино </li> <li data-category="sport"> Спорт </li> <li data-category="music"> Музыка </li>
</ul>
<div id="wrapper"> <div class="md-modal md-effect-17" id="modal-17"> <div class="md-content"> <h3> Вы проиграли </h3> <div> <p> Сожалеем, но вы не угадали слово :( </p> <br /><button class="md-close">Заново</button> </div> </div> </div> <div class="md-modal md-effect-18" id="modal-18"> <div class="md-content"> <h3> Победа! </h3> <div> <p> Поздравляем, вы угадали слово и прошли в следующий раунд :) </p> <br /><button class="md-close">Следующего мне!</button> </div> </div> </div> <div class="container"> <div id="round"> <span data-category="name">Категория:</span><span data-category="round">1</span><span>/</span><span data-category="rounds">10</span> </div> <canvas height="400" id="cnvs" width="411"></canvas> <p id="text"></p> <ul id="word"></ul> <ul id="characters"> <li> а </li> <li> б </li> <li> в </li> <li> г </li> <li> д </li> <li> е </li> <li> ё </li> <li> ж </li> <li> з </li> <li> и </li> <li> й </li> <li> к </li> <li> л </li> <li> м </li> <li> н </li> <li> о </li> <li> п </li> <li> р </li> <li> с </li> <li> т </li> <li> у </li> <li> ф </li> <li> х </li> <li> ц </li> <li> ч </li> <li> ш </li> <li> щ </li> <li> ъ </li> <li> ы </li> <li> ь </li> <li> э </li> <li> ю </li> <li> я </li> </ul> <div class="progress"> <div class="success"> Угадано: &nbsp;<span id="success">0</span> </div> <div class="failed"> Завалено: &nbsp;<span id="failed">0</span> </div> <div class="attempts"> Осталось попыток: &nbsp;<span id="attempts">0</span> </div> </div> </div> <link href="https://tympanus.net/Development/ModalWindowEffects/css/default.css" rel="stylesheet" type="text/css" /> <link href="https://tympanus.net/Development/ModalWindowEffects/css/component.css" rel="stylesheet" type="text/css" /> <button class="md-trigger md-setperspective" data-modal="modal-17"></button><button class="md-trigger md-setperspective" data-modal="modal-18"></button> <div class="md-overlay"></div> <!--the overlay element--> <script src="https://tympanus.net/Development/ModalWindowEffects/js/classie.js"></script> <script src="https://tympanus.net/Development/ModalWindowEffects/js/modalEffects.js"></script>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

The hangman game - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lobster);
.li_custom, #category li, #word li, #characters li { width: 35px; height: 35px; float: left; list-style-type: none; text-align: center;
}
.li_bg, #word li, #characters li { color: #fff;
}
.azure, .li_bg, #word li, #characters li, #category li[data-category="sport"] { text-shadow: rgba(91, 192, 222, 0.3) 0 1px 1px; background-image: -moz-radial-gradient(1% 1%, #5bc0de 0%, #28a1c5 150px); background-image: -o-radial-gradient(1% 1%, #5bc0de 0%, #28a1c5 150px); background-image: radial-gradient(1% 1%, #5bc0de 0%, #28a1c5 150px); -webkit-font-smoothing: antialiased;
}
.blue, #category li[data-category="geography"], #characters li:hover { text-shadow: rgba(0, 136, 204, 0.3) 0 1px 1px; background-image: -moz-radial-gradient(1% 1%, #0088cc 0%, #005580 150px); background-image: -o-radial-gradient(1% 1%, #0088cc 0%, #005580 150px); background-image: radial-gradient(1% 1%, #0088cc 0%, #005580 150px); -webkit-font-smoothing: antialiased;
}
.red, #category li[data-category="food"], #characters li.wrong { text-shadow: rgba(238, 95, 91, 0.3) 0 1px 1px; background-image: -moz-radial-gradient(1% 1%, #ee5f5b 0%, #e51d18 150px); background-image: -o-radial-gradient(1% 1%, #ee5f5b 0%, #e51d18 150px); background-image: radial-gradient(1% 1%, #ee5f5b 0%, #e51d18 150px); -webkit-font-smoothing: antialiased;
}
.orange, #category li[data-category="animals"] { text-shadow: rgba(251, 180, 80, 0.3) 0 1px 1px; background-image: -moz-radial-gradient(1% 1%, #fbb450 0%, #f99406 150px); background-image: -o-radial-gradient(1% 1%, #fbb450 0%, #f99406 150px); background-image: radial-gradient(1% 1%, #fbb450 0%, #f99406 150px); -webkit-font-smoothing: antialiased;
}
.green, #category li[data-category="movie"], #characters li.off { text-shadow: rgba(98, 196, 98, 0.3) 0 1px 1px; background-image: -moz-radial-gradient(1% 1%, #62c462 0%, #3b9e3b 150px); background-image: -o-radial-gradient(1% 1%, #62c462 0%, #3b9e3b 150px); background-image: radial-gradient(1% 1%, #62c462 0%, #3b9e3b 150px);
}
.grey, #category li[data-category="all"] { color: #333333; text-shadow: none; background-image: -moz-radial-gradient(1% 1%, #f5f5f5 0%, #cfcfcf 150px); background-image: -o-radial-gradient(1% 1%, #f5f5f5 0%, #cfcfcf 150px); background-image: radial-gradient(1% 1%, #f5f5f5 0%, #cfcfcf 150px);
}
.black, #category li[data-category="music"] { text-shadow: rgba(102, 102, 102, 0.3) 0 1px 1px; background-image: -moz-radial-gradient(1% 1%, #666666 0%, #404040 150px); background-image: -o-radial-gradient(1% 1%, #666666 0%, #404040 150px); background-image: radial-gradient(1% 1%, #666666 0%, #404040 150px); -webkit-font-smoothing: antialiased;
}
#wrapper { display: none; margin-top: 30px;
}
body, .container { background: #242733 !important; font: normal 14pt/35px "Lobster", cursive !important;
}
.md-perspective body,
.md-perspective .container { background: #222 !important;
}
#category { position: absolute; width: 300px; top: 50%; left: 50%; margin: -187px 0 0 -150px; padding: 10px 25px; background: #f7f6f4; box-shadow: 0 0 10px rgba(255, 255, 255, 0.9);
}
#category li { margin: 5px 0; float: none; width: 100%; height: 45px; font-size: 16pt; line-height: 45px; cursor: pointer; opacity: 0.9;
}
#category li:hover { opacity: 1;
}
#category li.disabled { opacity: 0.3; cursor: default;
}
#round { margin: 30px 0; text-align: center; font-size: 21pt;
}
#round span { margin-left: 8px;
}
#round span[data-category="name"]:after { content: ":";
}
#word { height: 35px; overflow: hidden; padding: 0; margin: 10px auto 30px;
}
#word li { margin: 0 5px;
}
#word li.no { background: transparent;
}
#word li.no:after { content: ""; display: block; position: relative; width: 35px; top: 33px; border-bottom: 2px solid #ffffff;
}
#characters { width: 411px; padding: 2px 0 0 2px; margin: 0 auto; overflow: hidden;
}
#characters li { margin: -2px 0 0 -2px; border: 2px solid #4482c0; cursor: pointer; transition: 0.3s ease-in-out; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
}
#characters li.off { cursor: default;
}
#characters li.wrong { cursor: default;
}
#cnvs { display: block; margin: 0 auto; background: #ffffff;
}
.md-trigger { display: none;
}
#modal-18 .md-content { background: #67c866;
}
#modal-18 .md-content button { background: rgba(0, 0, 0, 0.1);
}
#modal-18 .md-content button:hover { background: rgba(0, 0, 0, 0.2);
}
.md-show.md-effect-18 ~ .md-overlay.win { background: rgba(103, 200, 102, 0.7);
}
.progress { margin-top: 15px; text-align: center;
}
.progress .success, .progress .failed { display: inline-block; margin-right: 10px;
}
#daily_failed_text { display: none; padding: 25px 0; text-align: center; font-size: 30pt; line-height: 36pt; background: #e74c3c; text-shadow: rgba(98, 196, 98, 0.3) 0 1px 1px;
}
.hoja { display: none; color: #dcdce2; position: absolute; top: 50%; left: 50%; margin-left: -140px; margin-top: -140px; width: 280px; height: 280px;
}
.hoja:after,
.hoja:before { content: ""; border-radius: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-origin: center center; transform-origin: center center;
}
.hoja:after { box-shadow: inset 0 17px 0 rgba(250, 250, 0, 0.6), inset 17px 0 0 rgba(250, 200, 0, 0.6), inset 0 -17px 0 rgba(250, 150, 0, 0.6), inset -17px 0 0 rgba(250, 100, 0, 0.6); -webkit-animation: rotar 2s linear infinite; -moz-animation: rotar 2s linear infinite; animation: rotar 2s linear infinite;
}
.hoja:before { box-shadow: inset 0 17px 0 rgba(0, 250, 250, 0.6), inset 17px 0 0 rgba(0, 200, 200, 0.6), inset 0 -17px 0 rgba(0, 150, 200, 0.6), inset -17px 0 0 rgba(0, 200, 250, 0.6); -webkit-animation: rotarIz 2s linear infinite; -moz-animation: rotarIz 2s linear infinite; animation: rotarIz 2s linear infinite;
}
@-webkit-keyframes rotar { 0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1); } 50% { -webkit-transform: rotateZ(180deg) scaleX(0.82) scaleY(0.95); } 100% { -webkit-transform: rotateZ(360deg) scaleX(1) scaleY(1); }
}
@-webkit-keyframes rotarIz { 0% { -webkit-transform: rotateZ(0deg) scaleX(1) scaleY(1); } 50% { -webkit-transform: rotateZ(-180deg) scaleX(0.95) scaleY(0.85); } 100% { -webkit-transform: rotateZ(-360deg) scaleX(1) scaleY(1); }
}

The hangman game - Script Codes JS Codes

var Hangman = new function () { this.word = $("#word"); //words set block this.all_words = { animals: ["жираф", "слон", "гиппопотам", "антилопа", "крокодил"], geography: ["россия", "одесса", "уганда", "швейцария", "мальдивы"], food: ["сало", "пирожное", "сахар", "морковь", "помидор"], movie: ["актер", "дублер", "каскадёр", "режиссёр", "оператор"], sport: ["прыжок", "турник", "подход", "вес", "спринт"], music: ["аккомпанемент", "нота", "гитара", "виолончель", "звук"] }; this.words = null; //end words set block this.index = null; this.current = null; this.category = null; this.success = 0; this.failed = 0; this.fails_max = 3; this.wrong = 0; this.victory = false; this.daily_limit = false; this.hand_src = "http://i.piccy.info/i7/d59c8dc22e59cd903f2b01f575d578eb/4-66-327/23645418/hand_240.jpg"; this.head_src = "http://i.piccy.info/i7/82b88d015d07e1c3b7e1c43690ddb668/4-66-327/36402088/head.jpg"; this.left_shoe_src = "http://i.piccy.info/i7/65fd7688f6dec102c9bea3129bbe6c62/4-66-327/40563368/lleg.jpg"; this.right_shoe_src = "http://i.piccy.info/i7/e81601ada648e819cfd15f8ee599de2a/4-66-327/41168052/rleg.jpg"; this.canvas = $("#cnvs")[0]; this.ctx = this.canvas.getContext("2d"); this.round_counter = 1; this.round_container = $("#round"); this.preloader = $(".hoja"); //Get random number between min and max this.get_random = function () { return Math.round(Math.random() * (Hangman.words.length - 1)); }; this.set_category = function (category) { this.category = category; if (this.category.data("category") === "all") this.words = this.all_words.animals.concat( this.all_words.geography, this.all_words.food, this.all_words.movie, this.all_words.sport, this.all_words.music ); else this.words = this.all_words[this.category.data("category")]; this.round_container.find("[data-category=name]").text(category.text()); this.round_container.find("[data-category=rounds]").text(this.words.length); this.preloader.show(); this.init(); }; //Draw li's for letters this.init = function () { if (this.words.length <= 0) { this.back_to_category(); this.round(true); var category = this.category.data("category"); if (category !== "all") $("#category").find("[data-category = " + category + "]").addClass("disabled"); } else { this.index = this.get_random(); this.current = this.words[this.index]; var li_size = 45,//with margins length = this.current.length; this.draw(); this.word.empty(); for (var i=0; i<=length-1; i++) Hangman.word.append( $("<li class='no'>") ); this.word.width(li_size*length); this.preloader.hide(); $("#category").hide(); $("#wrapper").show(); $("#attempts").text(Hangman.fails_max); } }; //Check letter existence in the word this.check_char = function (letter) { var indices = [], current_word = this.current; while (current_word.indexOf(letter.text()) !== -1){ var i = current_word.lastIndexOf(letter.text()); indices.push(i); current_word = current_word.slice(0, i); } if (indices.length === 0){//wrong letter.addClass("wrong"); this.wrong++; this.check_wrong(this.wrong); return; } for (var i=0; i<indices.length; i++){ Hangman.word.children("li").eq(indices[i]) .removeClass("no").append(letter.text()); } letter.addClass("off"); this.victory = !this.word.children("li.no").size() > 0;//check_victory if (this.victory){ $(".md-overlay").addClass("win"); $(".md-trigger[data-modal=modal-18]").click(); //remove victory word from words array Hangman.words.splice($.inArray(Hangman.current, Hangman.words), 1); Hangman.success += 1; $("#success").text(Hangman.success); } }; //Round counter this.round = function (reload) { if(Hangman.victory && !reload) Hangman.round_counter += 1; else Hangman.round_counter = 1; Hangman.round_container.find("[data-category=round]").text(Hangman.round_counter); }; //Check wrong message this.check_wrong = function (index) { switch (index){ case 1: this.draw_head(); break; case 2: this.draw_body(); break; case 3: this.draw_rarm(); break; case 4: this.draw_larm(); break; case 5: this.draw_rleg(); break; case 6: this.draw_lleg(); Hangman.victory = false; Hangman.failed += 1; $("#failed").text(Hangman.failed); Hangman.fails_max -= 1; if (Hangman.fails_max === 0) Hangman.daily_limit = true; $("#attempts").text(Hangman.fails_max); $(".md-trigger[data-modal=modal-17]").click(); break; } }; //Redraw this.redraw = function () { //canvas redraw Hangman.ctx.clearRect(0, 0, Hangman.canvas.width, Hangman.canvas.height); Hangman.draw(); Hangman.wrong = 0; //characters redraw $("#characters li").removeClass("wrong off"); //word redeploy Hangman.index = Hangman.get_random(); Hangman.current = Hangman.words[Hangman.index]; //Victory redeploy Hangman.init(); }; //back to category this.back_to_category = function () { $("#category").show(); this.preloader.hide(); $("#wrapper").hide(); }; //Daily limit canvas update this.daily_limit_update = function () { $("#category").hide(); this.preloader.hide(); $("#wrapper").hide(); $("#daily_failed_text").show(); }; //Base draw hangman this.draw = function () { this.ctx.beginPath(); //Wood this.ctx.moveTo(50, 400); this.ctx.lineTo(50, 25); this.ctx.lineTo(230, 25); this.ctx.lineWidth = 15; this.ctx.stroke(); //Rope this.ctx.moveTo(217, 30); this.ctx.lineTo(217, 110); this.ctx.lineWidth = 5; this.ctx.stroke(); this.ctx.closePath(); }; //Draw head this.draw_head = function () { var img = document.createElement("img"); img.src = this.head_src; img.onload = function(){ Hangman.ctx.save(); Hangman.ctx.beginPath(); Hangman.ctx.arc(217, 125, 35, 45, 90, false); Hangman.ctx.stroke(); Hangman.ctx.closePath(); Hangman.ctx.clip(); Hangman.ctx.drawImage(img, 182, 90, 70, 70); Hangman.ctx.beginPath(); Hangman.ctx.arc(217, 125, 35, 45, 90, false); Hangman.ctx.clip(); Hangman.ctx.closePath(); Hangman.ctx.restore(); } }; //Draw body this.draw_body = function () { this.ctx.save(); this.ctx.beginPath(); this.ctx.moveTo(217, 160); this.ctx.lineTo(217, 250); this.ctx.lineWidth = "4"; this.ctx.stroke(); this.ctx.closePath(); this.ctx.restore(); }; //Draw right arm this.draw_rarm = function () { var img = document.createElement("img"); img.src = this.hand_src; img.onload = function(){ Hangman.ctx.save(); Hangman.ctx.beginPath(); Hangman.ctx.moveTo(257, 215); Hangman.ctx.lineTo(217, 170); Hangman.ctx.lineWidth = "4"; Hangman.ctx.stroke(); Hangman.ctx.rotate(130*Math.PI/180); Hangman.ctx.drawImage(img, -35, -400, 70, 70); Hangman.ctx.closePath(); Hangman.ctx.restore(); } }; //Draw left arm this.draw_larm = function () { var img = document.createElement("img"); img.src = this.hand_src; img.onload = function(){ Hangman.ctx.save(); Hangman.ctx.beginPath(); Hangman.ctx.moveTo(177, 215); Hangman.ctx.lineTo(217, 170); Hangman.ctx.lineWidth = "4"; Hangman.ctx.stroke(); Hangman.ctx.rotate(-130*Math.PI/180); Hangman.ctx.drawImage(img, -308, -65, 70, 70); Hangman.ctx.closePath(); Hangman.ctx.restore(); } }; //Draw right leg this.draw_rleg = function () { var img = document.createElement("img"); img.src = this.right_shoe_src; img.onload = function(){ Hangman.ctx.save(); Hangman.ctx.beginPath(); Hangman.ctx.moveTo(267, 300); Hangman.ctx.lineTo(217, 248); Hangman.ctx.lineWidth = "4"; Hangman.ctx.stroke(); Hangman.ctx.rotate(-10*Math.PI/180); Hangman.ctx.drawImage(img, 200, 340, 70, 70); Hangman.ctx.closePath(); Hangman.ctx.restore(); } }; //Draw left leg this.draw_lleg = function () { var img = document.createElement("img"); img.src = this.left_shoe_src; img.onload = function(){ Hangman.ctx.save(); Hangman.ctx.beginPath(); Hangman.ctx.moveTo(170, 300); Hangman.ctx.lineTo(217, 248); Hangman.ctx.lineWidth = "4"; Hangman.ctx.stroke(); Hangman.ctx.rotate(10*Math.PI/180); Hangman.ctx.drawImage(img, 160, 260, 70, 70); Hangman.ctx.closePath(); Hangman.ctx.restore(); } };
};
$("#characters").on("click", "li:not(.off, .wrong)", function () { Hangman.check_char( $(this) );
});
$("#category li:not(.disabled)").on("click", function () { Hangman.set_category( $(this) );
});
$(".md-overlay, .md-close").on("click", function () { if (!Hangman.daily_limit) Hangman.redraw(); else Hangman.daily_limit_update();
});
$("#modal-18 .md-close").on("click", function () { if (Hangman.words.length > 0) Hangman.round(false);
});
The hangman game - Script Codes
The hangman game - Script Codes
Home Page Home
Developer Nikita Zubarets
Username snapson
Uploaded September 12, 2022
Rating 3
Size 9,753 Kb
Views 66,792
Do you need developer help for The hangman game?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nikita Zubarets (snapson) Script Codes
Name
Work tickets
Click handler test
FlickApi photo log
Tabs for tm us
Js form serializer
Coffee Clock
A Pen by Nikita Zubarets
JScroll test
My SVG resume
Resize textarea
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!