Html 5 Tutorial: Creating A Hangman Game

  • Uploaded by: em
  • 0
  • 0
  • February 2021
  • PDF
Download

This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA

Overview

Download & View Html 5 Tutorial: Creating A Hangman Game as PDF for free.

More details

  • Words: 4,771
  • Pages: 21
Loading documents preview...
Creating a mobile-friendly hangman game using HTML5 a tutorial from flashbynight.com

Tutorial: Creating a Hangman Game Using HTML5 What you will learn:  

how to build a simple hangman game as a web page basic techniques and technologies used in HTML5

Prerequisites: 

basic knowledge or experience with HTML or Javascript will be helpful

Required time: 2+ hours Notes This will be a great project for anyone starting out in HTML5 who wants a simple and fun project to build. It’s a hangman game that we can put on a website! We can make it easy to extend and add questions to and we can even make sure it will work on a mobile phone. And if you just want to grab the source code without following the tutorial, then that’s fine, too. View DEMO at: http://flashbynight.com/tutes/hangmanhtml5/example/ Download SOURCE FILES at: http://flashbynight.com/tutes/hangmanhtml5/source.zip

HTML Step 1 - Setting up the HTML document Although you could use Dreamweaver or similar software, to create an HTML document, you don’t need any special software, you can simply use any text editor such as Textpad or Wordpad. Open your text editor and type:

This is the way that we begin all of our HTML5 documents. Now let’s fill out the document structure:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Hangman Game <script src="jquery.js"> <script src="controller.js">
Hangman Game


Believe it or not, that’s our whole html document, except for one line which we will add later to make it mobile-friendly. The line controls what is shown on the browser tab as the title or description of the page. [3]. The next line tells our page to look for a document called ‘main.css’ which will hold all of our style information (background colors and so on). [4]. The first <script> line tells the page to look for a JavaScript file called ‘jquery’. This is a standard JavaScript ‘extension’ widely used by developers to make JavaScript more powerful. We will not need to write this file ourselves. [5]. The second <script> line tells the page to look for a JavaScript file called ‘controller.js’. This is the file we will use to control the game. [6]. The next few lines, in the <body> of the page name ‘div’s or dividers that we will use to hold the page content. The ‘topbar’ will hold our page title. The ‘spacer’ div will make space on our page. ‘gameContent’ is where the game will be displayed. [8-13]. Notice that most divs have an id, a unique identifier. One of them has a class name instead of an id name. That means we may use it more than once. Save the document as index.html. Test it out by opening it in a browser* (right-click and choose Open With and choose a browser). Obviously, there will not be much to see yet, just the text Hangman Game at the top.. *I recommend using Firefox for this tutorial. We will be using JSON which Chrome and some other browsers will not display if offline.<br /> <br /> Project Management Step 2 So we know that we will need the following files to build our project: - index.html, which we have already done. - main.css, which will hold the style information - jquery.js, which will enhance standard JavaScript - controller.js, which will control the game - quizbank.json, which will hold our word database - man.png, which will hold our graphics All of these files can be written or viewed in a text editor, just like index.html, so there’s no need for any special software.<br /> <br /> Database Step 3 – Build a question database Create a file in your text editor named quizbank.json. Then open it up and type in the following: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27<br /> <br /> {"wordlist":[ { "word":"kangaroo", "clue":"an animal" }, { "word":"starbucks", "clue":"a company" }, { "word":"macaroni", "clue":"a kind of food" }, { "word":"washington", "clue":"a place" }, { "word":"turtle", "clue":"a creature" }, { "word":"guillotine", "clue":"a machine" }<br /> <br /> 28 29 30<br /> <br /> ] }<br /> <br /> This is a JSON file and it holds data in groups. We can use it to hold our question database. You’ll notice that it is easily readable by either machine or human. Each JSON element holds a word and a clue. However, we will randomise the words before we show them to the user. Later, if we wish to change or add any words, this is the only file we will need to modify. We can add as many questions as we want – we will program the game to know when to stop. That means our game can be recycled and can even also edited by someone with very little technical expertise. *Note that you will need to make sure that you stick very carefully to the format with JSON files. A missing or extra comma, for example, can cause problems. Save the file and continue. Step 4 – Gather assets You will need two external assets. The first one is the JQuery file. You can either get it from the source files in the link below (or at the top of this page) or if you want the latest version, you could download it from jquery.com. I am using version 1.9.1. If you use a later version, be sure to shorten the name to jquery.js The second asset is the image that we will use for the hanged man. It looks like this:<br /> <br /> Yes, all the stages of the hanging are in one image file. We will only show one section at a time, like a filmstrip. You can get a copy of this image from the source files. You could even customise your own - each segment must be 75px wide and 200px tall and the image file should be 525px by 200px with the filename man.png.<br /> <br /> Source files from flashbynight.com: http://flashbynight.com/tutes/hangmanhtml5/source.zip<br /> <br /> CSS Step 5 – Build a style sheet We will use a CSS file to control the look and feel of our game. Later if we need to modify the look and feel, we need only modify the CSS file. Create a document entitled main.css and open it with any text editor. 1 2 3 4 5 6<br /> <br /> html, body { margin: 0; padding: 0; background-color:#4183D7; font-family: Arial, Helvetica, sans-serif; }<br /> <br /> This tells us that we will use a shade of blue as the background color for the entire page. Then unless we override it, we will use Arial font, or Helvetica or sans-serif if Arial is not available. We set margin and padding to 0 so that the page will not have any extra spacing. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20<br /> <br /> #topbar{ height:50px; margin:auto; margin-top:50px; color:#FFF; font-size:36px; width:800px; border-bottom:solid white 1px; } #gameContent{ margin:auto; width:800px; height:400px; position:relative; overflow:hidden; background-color:#3498DB; } .spacer{height:30px;}<br /> <br /> #topbar will be used simply to display the text Hangman Game above the game area. We want the height of this section of the page to be 50px at a margin of 50px from the top and so on.<br /> <br /> #gameContent controls the style for our game area. We want our game area to be 800 pixels wide, 400 pixels in height and centered horizontally on the page (margin:auto). Anything that ‘sticks out’ of this area will be hidden (overflow:hidden). We will give it a background color that is slightly lighter than the rest of the page. Obviously, setting these elements at a width of 800px will cause issues if viewed on a mobile device, but don't worry, we'll address this later. .spacer, if you remember, is used to set some space between the title and the game area. In CSS, we refer to an ID name by a hashtag (#) and we refer to a class name by a dot (.). Remember, we expect to reuse class names for multiple elements, but the ID name should refer to a unique element. Some standardised elements (body/html) are referred to directly without a hashtag or dot. Let’s continue: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21<br /> <br /> #gameTitle{ margin-top:100px; text-align:center; font-size:40px; color:#fff;} .button{font-size:17px; width:100px; margin:auto; margin-top:20px; cursor:pointer; border:solid 1px white; border-radius:4px; text-align:center; color:#fff;} .button:hover{ background-color:#6AB0FD;} #replay{ margin-left:0px;}<br /> <br /> Next we style the game title which will be shown in the game area. We set it at a margin of 100px from the top of the game area (not the page), center it, set the font size to 40 and the color to white. Then we need to define a style for a simple button. We will use this as a PLAY button at the beginning of the game and also as a REPLAY button at the end of the game. Note that we give it a border for effect. Line 11 ensures that the hand pointer is displayed when our button is moused over, signalling to the user that it is clickable. Line 13 sets slightly rounded edges for the border. Lines 17-18 set an effect when the button is moused over - a change in background color. How do you know which codes generate which colors if you are not using specialised software? Try colorpicker.com or a similar site.<br /> <br /> Finally, on lines 20-21, we add a little extra code for our REPLAY button. We want it to be on the left, not centered like the PLAY button. Let’s finish off our CSS: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55<br /> <br /> #wordHolder{ margin-top:50px; margin-left:150px; } #clueHolder{ margin-top:130px; margin-left:150px; } #guesses{ margin-top:20px; margin-left:150px; } #pixHolder{ margin-left:30px; width:75px; float:left; overflow:hidden; } #pixHolder img{ position:relative;} #feedback{ margin-top:20px; margin-left:150px; font-size:34px; color:#fff; } .tile{ height:40px; width:40px; float:left; margin-right:10px; background-color:white; text-align:center; font-size:24px; color:#333; padding-top:5px; } #finalMessage{ text-align:center; font-size:40px; color:#fff; width:90%; margin:auto; margin-top:100px; } #dummy{ position:absolute;<br /> <br /> 56 57 58<br /> <br /> left:-200px; top:0px; }<br /> <br /> This is the style information for the gameplay: #wordHolder is the area on the screen which will hold the blank spaces where the word will go. #clueHolder will display the current clue #guesses will be the area that displays letters that have already been guessed. #pixHolder will hold the image of the hanged man. Note that the width is 75px and any overflow is hidden, so that only one segment will be shown at a time. Lines 2334 dictate that the position of any image within pixHolder will be set relative to pixHolder (instead of relative the entire page or relative to the game area). #feedback will hold the feedback message where we inform the player that he has won the game or that he has run out of guesses. .tile dictates the style that we will apply to the individual blanks - where each letter will be displayed. We use a class (.) instead of a div (#) because we will have more than one of them. #finalMessage dictates the style for our final message of the game - to tell the player that he has finished all of the words. #dummy has a special purpose to ensure the game works on mobile devices - we will come back to this later. That will do for the CSS for now. We will add some more later to ensure the game works on a mobile phone. You can open the index.html file in a browser and see how the page looks.<br /> <br /> Javascript Step 6 – Creating the JavaScript code Create a document called controller.js, save it and open it with a text editor or other program. 1 2 3<br /> <br /> $(document).ready(function () { });<br /> <br /> This is how we begin and all of our code will fall between these two lines. It basically says that we will do the following as soon as the document is ‘ready’ in the browser. We’ll begin by defining the various variables we will need to use throughout the game: 1 2 3 4 5 6<br /> <br /> var var var var var var<br /> <br /> questionBank=new Array; wordArray=new Array; previousGuesses=new Array; currentWord; currentClue; wrongAnswerCount;<br /> <br /> We will always try to keep our variables ‘human and machine readable’. For example, we can see the variable currentClue refers to the current clue. Following this principle makes it really easy to read your code. The first three variables are arrays. An array is a series of variables. For example, if a=["tiger","lion","panther"] then a[0] is tiger, a[1] is lion and so forth. We use an array to hold our question bank, whch we will read from our JSON document. We will use wordArray to split up and hold the letters of the current word. previousGuesses will contain all the letters previously guessed by the user. We need the variable wrongAnswerCount to track how many wrong answers have been entered. These are the global variables - used throughout the code. We will also have some local variables (used in only one function) which we will define later. Right then, we need to get the data from our JSON file into a useable format in controller.js. Here’s how: 1 2 3 4 5 6 7 8<br /> <br /> $.getJSON('quizbank.json', function(data) { for(i=0; i<data.wordlist.length; i++){ questionBank[i]=new Array; questionBank[i][0] = data.wordlist[i].word; questionBank[i][1] = data.wordlist[i].clue; } alert(questionBank); })//getJSON<br /> <br /> We use the command $.getJSON to read our JSON data and call a function to format it. The $.getJSON() command is an example of a function from JQUERY. Without our JQUERY extension, we would not be able to use this code. Code that begins with a ‘$’ references JQUERY. We loop through all the JSON elements inside the wordlist element, i.e. all of our words and clues. Then we use the data to form an array of information called questionBank. We are using a two-dimensional array here:<br /> <br /> One dimensional array: questionBank = ["cat","dog","fox"]; (questionBank[1]= "dog") Two dimensional array: questionBank=[["cat", "dog", "fox"], ["lion", "tiger", "zebra"],[ "kangaroo", "koala", "wallaby"]]; (questionBank[1][2]= "zebra") Line [7], alert(questionBank); is only for testing; it will display the contents in an alert (pop up) window so that we can ensure everything is working so far. Now would be a good time to test the app. Right-click on index.html and open it in Firefox, or Internet Explorer. You should see a pop up window displaying the contents of the database, as shown below. If not, review the code so far to check for mistakes.<br /> <br /> Step 7 – Displaying the game screens Find the line that says alert(questionBank); Delete it and in its place add: titleScreen(); This will call a function which creates a simple title screen. We will write this function now. It can be placed immediately after the previous code that ends with the line: })//getJSON 1 2 3 4 5 6<br /> <br /> function titleScreen(){ $('#gameContent').append('<div id="gameTitle">HANGMAN</div><div id="startButton" class="button">BEGIN</div>'); $('#startButton').on("click",function (){gameScreen()}); }//display game<br /> <br /> What we are doing here is adding content to the empty container named #gameContent - a title and a start button. The styles for these elements have already been put together in our CSS file. Next we add a 'click handler' to the start button. It says, 'when the button is clicked, call the function gameScreen()'. The gameScreen function will handle functionality during the game. We will write this function now.<br /> <br /> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 20 21 22<br /> <br /> function gameScreen(){ $('#gameContent').empty(); $('#gameContent').append('<div id="pixHolder"><img id="hangman" src="man.png"></div>'); $('#gameContent').append('<div id="wordHolder"></div>'); $('#gameContent').append('<div id="clueHolder"></div>'); $('#gameContent').append('<div id="guesses">Previous guesses:</div>'); $('#gameContent').append('<div id="feedback"></div>'); getWord(); var numberOfTiles=currentWord.length; wrongAnswerCount=0; previousGuesses=[]; for(i=0;i<numberOfTiles;i++){ $('#wordHolder').append('<div class="tile" id=t'+i+'></div>'); } $('#clueHolder').append("HINT: "+currentClue); $(document).on("keyup",handleKeyUp); }//gamescreen<br /> <br /> There we go. The first thing is to empty the #gameContent container, thus removing our 'intro screen'. [2]. Next, we add the sections that will make up our game: #pixHolder, containing our graphic - man.png, then the areas that will hold our blanks, clue, previous guesses and feedback [3-7]. Next, we call a function getWord(), which will choose a random word from our databank. [9] We will write this function in a moment. getWord will generate the variable currentWord and we use the length of this word to determine how many blank tiles to display. We reset the number of wrong answers to 0 and we make sure our previousGuesses array is empty [10-12]. Lines 14-16 add blank tiles to the screen and gives each tile an identifier: t0, t1, t2, t3 ... Line 18 adds our clue to the screen.<br /> <br /> Line 20 adds a 'listener' to our document (web page). When a keyup is sensed - that is, when a user presses and releases a key - the function handleKeyUp is called. We will write this function presently.<br /> <br /> Now there are two functions that we have called in our code, but not yet written. Let's do the first one:<br /> <br /> 1 2 3 4 5 6 7<br /> <br /> function getWord(){ var rnd=Math.floor(Math.random()*questionBank.length); currentWord=questionBank[rnd][0]; currentClue=questionBank[rnd][1]; questionBank.splice(rnd,1); wordArray=currentWord.split(""); }//getword<br /> <br /> We start by defining a variable rnd and using it to select a random variable between 0 and the length of our questionBank. With this variable, we set the current word and current clue. [2-4] We then splice the questionBank array, meaning we remove the word and clue that we have just chosen. [5] Finally, we form an array containing the letters of the current word by splitting it. Now would be a good time to test our game. You should see this:<br /> <br /> ...and when you click BEGIN, you should see this:<br /> <br /> Try refreshing the page and clicking again. You should see a different word each time. If it's not working, go back and check the code. Otherwise, let's add the functionality that we need when the user presses a key: Step 8 – Adding functionality We have already added code to listen for a keypress, but we haven't added code to deal with it. Let's do that now: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18<br /> <br /> function handleKeyUp(event) { if(event.keyCode>64 && event.keyCode<91){ var found=false; var previouslyEntered=false; var input = String.fromCharCode (event.keyCode).toLowerCase(); for(i=0;i<previousGuesses.length;i++){ if(input==previousGuesses[i]){ previouslyEntered=true; } } if(!previouslyEntered){ previousGuesses.push(input); for(i=0;i<wordArray.length;i++){ if(input==wordArray[i]){<br /> <br /> 19 20 21 22 23 24 25 26 27 28 29<br /> <br /> found=true; $('#t'+i).append(input); } }//for if(found){checkAnswer();} else{wrongAnswer(input);} }//if }//if }//handlekeyup<br /> <br /> On line 1, we begin the function and indicate that it is acting upon an event, in this case a key press. Key presses are distinguished by codes in Javascript, where a=65, b=66... z=90. Hence, in line 2, we ignore any other key presses, such as a comma or a number. Lines 3-5 define some local variables. The variable found will help us determine if the submitted letter is found in the word. previouslyEntered will help us determine if the letter has been previously submitted. The variable input converts the code to a letter and ensures that it is lower case. Lines 7-11 check whether the letter has been entered before. Line 13 dictates that the rest of the function should only be carried out if the letter has not already been input. If the user enters a letter twice, the second entry will simply be ignored. Line 14 adds the current letter to the list of previosuly entered letters. Lines 16-21 check whether the letter appears in the word. If so, the letter is added to the appropriate tile, which we can reference using the jquery shorthand $('#t'+i). Line 25 specifies a function checkAnswer() - this will check whether the entire word has been solved. Line 26 specifies that if the letter was not found in the word, we should call a function wrongAnswer() and send it the variable 'input'. We still need to write these two functions. However, you can test the game again now and you should see that correct letters can be entered. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16<br /> <br /> function checkAnswer(){ var currentAnswer=""; for(i=0;i<currentWord.length;i++){ currentAnswer+=($('#t'+i).text()); } if(currentAnswer==currentWord){ victoryMessage(); }; }//checkanswer function wrongAnswer(a){ wrongAnswerCount++; var pos=(wrongAnswerCount*-75) +"px" $('#guesses').append(" "+a); $('#hangman').css("left",pos); if(wrongAnswerCount==6){<br /> <br /> 17 28<br /> <br /> defeatMessage();} }//wronganswer<br /> <br /> On lines 1-9 above, we have the function checkAnswer() which declares a local variable currentAnswer and then uses it to store the user input so far by adding to it the text from each of our answer tiles. If the current answer is the same as the current word from our database, then we use the function victoryMessage() to display a victory message [6-8]. If a wrong answer was inputted, we use the function wrongAnswer(), which labels the inputted letter as 'a' [11]. We increase the value of the variable wrongAnswerCount by one [12]. We use the number of wrong answers to recalculate the position of our hanged man image [13] and then apply the new position [15]. You can observe that we do this by changing the CSS rule that applies to the div #hangman. This technique of changing the CSS rule on the fly can come in very handy for simple games such as this. Meanwhile, we display the incorrect guess on the screen [14]. We add a couple of spaces so that the incorrect guesses are not clumped together. Finally, we know that if the user has entered six incorrect guesses, the hanging is complete and the user has lost the round. Therefore we need to display a message using the function defeatMessage(). [16-17]<br /> <br /> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24<br /> <br /> function victoryMessage(){ $(document).off("keyup", handleKeyUp); $('#feedback').append("CORRECT!<br><br><div id='replay' class='button'>CONTINUE</div>"); $('#replay').on("click",function (){ if(questionBank.length>0){ gameScreen()} else{finalPage()} }); }//victory function defeatMessage(){ $(document).off("keyup", handleKeyUp); $('#feedback').append("You're Dead!<br>(answer= "+ currentWord +")<div id='replay' class='button'>CONTINUE</div>"); $('#replay').on("click",function (){ if(questionBank.length>0){ gameScreen()} else{finalPage()} }); }//defeat function finalPage(){ $('#gameContent').empty(); $('#gameContent').append('<div id="finalMessage">You have finished all the words in the game!</div>'); }//finalpage<br /> <br /> The first function displays our victory message with a button to click when the player is ready to continue. First we remove the key handler that we instituted [2]. next we display the message and button in the area we previously designated as '#feedback' [2]. Then we write some code to act on the CONTINUE button when clicked [4-8]. This code will check whether we have any questions left in the databank [5] and if so, will restart the game[6]. If not, the final page will be displayed [7]. Line 11-19 essentially mirror the first function, but display a message saying that the player has lost and also displaying the answer that the player failed to guess. When all the words have been used up, we send the player to a final page which is described above in lines 21 - 24. We simply clear eveything off the game area and display a message. Test the game at this point - everything should be working. If you would like to make sure the game works on a mobile device, then follow the steps below; otherwise, we're done!<br /> <br /> Mobile Step 9 – Making it work in mobile If we want the game to work on a mobile device, we have two issues to solve: 1 The game area is too large and won't fit on a phone screen. 2 The game uses keys to enter guessed letters and a mobile device has no physical keyboard. We will solve issue 1 by rearranging the elements on the screen and shrinking some of them if a small screen size is detected. For issue 2, there are two solutions: we can force the mobile to display the virtual keyboard or we can provide 'key buttons' on the game itself for the user to press. This tutorial will cover the first solution - forcing the virtual keyboard to display. For an example of the second solution, get the source code from here: http://flashbynight.com/tutes/hangmanhtml5/keyboard.zip Step 10 - Adjusting to a small screen A modern browser can detect screen size and apply different CSS rules accordingly - and that's what we will do. We are generally concerned about screen width rather than height (because we scroll vertically) and we will make sure that the game can display on any screen down to 320px wide - the width of a smaller iPhone. We do this by using something called ‘media queries’. We can set different CSS<br /> <br /> rules depending on the width of the screen. At the end of our CSS file, let’s add: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 16 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43<br /> <br /> @media screen and (max-width:800px) { #topbar{ margin-left:1%; margin-right:1%; width:96%; } #gameContent{ margin:1%; width:98%; } .tile{ height:20px; width:20px; font-size:14px; } } @media screen and (max-width:560px) { #wordHolder{ margin-top:10px; margin-left:10px; } #clueHolder{ margin-top:130px; margin-left:85px; } #guesses{ margin-top:20px; margin-left:85px; } #pixHolder{ margin-top:50px; margin-left:10px; position:absolute; } #feedback{ margin-left:85px; font-size:28px; } #finalMessage{ font-size:30px; } }<br /> <br /> What we have here are two 'breakpoints'. Lines 1-16 will be valid for widths of less than 800px. 800px is the standard width of our game and also a popular tablet size. Lines 18-43 are valid for widths of less than 560px, which is basically just the point where the screen gets cluttered. We start by setting the game area and the title area to be a percentage of the screen rather than a fixed width [2-10]. We then reduce the size of the letter tiles [11-15].<br /> <br /> For even smaller screen widths, we play with the positioning of the various containers by adjusting the margins until they fit snugly [19-39]. This is a good time to test again. You can see how the game will react on smaller screens by dragging your browser to resize it or by using the responsive design feature in Firefox (CTRL+SHIFT+M).<br /> <br /> Step 11 - Forcing the virtual keyboard We can force the mobile keyboard to open with a little trick. We set up a box to input text, we 'hide' it offscreen and we force the browser to focus on it. Back in the CSS file, look at the following lines that we previously added: 1 2 3 4 5<br /> <br /> #dummy{ position:absolute; left:-200px; top:0px; }<br /> <br /> Line 3 ensures that the element will be offscreen (200 pixels to the left). Then, in the javascript, in the function entitled gameScreen(), add the following code: 1 2 3 4<br /> <br /> $(document).on("click",function(){ $('#dummy').focus(); }); $('#dummy').focus();<br /> <br /> This ensures 'focus' on the hidden input box whenever this function is called, or whenever the user touches or taps the screen. This will not affect desktop gameplay but will force the keyboard to open on mobiles. Personally, I think this is better for tablets or larger screen phones where the virtual keyboard does not obscure the game. Once again, there is a version with the keyboard incorporated into the game, here: http://flashbynight.com/tutes/hangmanhtml5/keyboard.zip To avoid issues with Android phones, we need to go back to the index.html file and add this line in the <head> section:<br /> <br /> <meta name=viewport content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"><br /> <br /> This ensures Android will use the phone width as the width for CSS. It also prevents users from zooming in and out of the page, which is not good when a page has interactivity, such as in a game.<br /> <br /> This is the game in a small screen:<br /> <br /> And we’re done! You have working, recyclable code for a hangman game. You should easily be able to add questions and tweak and play around with the code to get the look and feel that is right for you. Troubleshooting and more resources: 1 When testing offline, Chrome will not read JSON files. Use Firefox for testing offline 2 Some webhosting services still do not recognise JSON. If your game works offline, but not on your server, this may be the case. Contact your hosting company. For a<br /> <br /> version that does not use JSON, download the source files from this link: http://flashbynight.com/tutes/hangmanhtml5/v2_source.zip I hope you enjoyed learning from this tutorial. There are plenty more tutorials at www.flashbynight.com/tutes. These tutorials in particular will allow you to practice and refine the techniques used in building the hangman game: Creating a multiple choice quiz: http://flashbynight.com/tutes/mcqquiz/ Creating a picture quiz: http://flashbynight.com/tutes/pixquiz/ Creating a ticking timer: http://flashbynight.com/tutes/timer/ We also have some great games for you at www.flashbynight.com so stop by and check them out. If you like this tutorial or anything else on Flash By Night, please show your appreciation by mentioning it on Facebook, Twitter, Pinterest, StumbleUpon or any other favorite social media. </div> </div> <hr /> <h4>Related Documents</h4> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/html-5-tutorial-creating-a-hangman-game-1w9dxyz7dj2p" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/1w9dxyz7dj2p.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/html-5-tutorial-creating-a-hangman-game-1w9dxyz7dj2p" class="text-dark">Html 5 Tutorial: Creating A Hangman Game</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> February 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 1</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/html-css-tutorial-x25dd53yl3wp" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/x25dd53yl3wp.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/html-css-tutorial-x25dd53yl3wp" class="text-dark">Html Css Tutorial</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> March 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 0</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/html-5-kodovi-mo80yxp8xgwn" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/mo80yxp8xgwn.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/html-5-kodovi-mo80yxp8xgwn" class="text-dark">Html 5 Kodovi</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> March 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 0</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/game-programming-in-c-creating-3d-games-4wlgnerrqx26" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/4wlgnerrqx26.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/game-programming-in-c-creating-3d-games-4wlgnerrqx26" class="text-dark">Game Programming In C++_ Creating 3d Games</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> January 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 1</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/1-osnove-html-a-8o4zler7pqwd" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/8o4zler7pqwd.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/1-osnove-html-a-8o4zler7pqwd" class="text-dark">1 Osnove Html-a</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> March 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 0</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/creating-a-vortex-j1w95dnk8op9" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/j1w95dnk8op9.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/creating-a-vortex-j1w95dnk8op9" class="text-dark">Creating A Vortex</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> January 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 1</small> <div class="clearfix"></div> </div> </div> </div> </div> <hr/> <h4>More Documents from "api-3798620"</h4> <div class="row"> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/html-5-tutorial-creating-a-hangman-game-1w9dxyz7dj2p" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/1w9dxyz7dj2p.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/html-5-tutorial-creating-a-hangman-game-1w9dxyz7dj2p" class="text-dark">Html 5 Tutorial: Creating A Hangman Game</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> February 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 1</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/all-things-transcriptie-8o4zxej86rwd" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/8o4zxej86rwd.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/all-things-transcriptie-8o4zxej86rwd" class="text-dark">All Things Transcriptie </a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> February 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 0</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/constitutional-law-2-4wlgg5lx3x26" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/4wlgg5lx3x26.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/constitutional-law-2-4wlgg5lx3x26" class="text-dark">Constitutional Law 2</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> February 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 0</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/la-musica-del-siglo-xix-carl-dahlhaus-9od67xndmj2y" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/9od67xndmj2y.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/la-musica-del-siglo-xix-carl-dahlhaus-9od67xndmj2y" class="text-dark">La Musica Del Siglo Xix (carl Dahlhaus)</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> March 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 0</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/billiex27s-bounce-transcriptie-5wgl8nz7mxo7" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/5wgl8nz7mxo7.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/billiex27s-bounce-transcriptie-5wgl8nz7mxo7" class="text-dark">Billie's Bounce Transcriptie </a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> February 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 1</small> <div class="clearfix"></div> </div> </div> </div> <div class="col-lg-2 col-md-4 col-sm-6 col-6"> <div class="card item-doc mb-4"> <a href="https://vbook.pub/documents/villena-vs-sec-of-interior-9od6m0xlqg2y" class="d-block"><img class="card-img-top" src="https://vbook.pub/img/crop/300x300/9od6m0xlqg2y.jpg" alt=""/></a> <div class="card-body text-left"> <h5 class="card-title"><a href="https://vbook.pub/documents/villena-vs-sec-of-interior-9od6m0xlqg2y" class="text-dark">Villena Vs. Sec Of Interior</a></h5> <small class="text-muted float-left"><i class="fas fa-clock"></i> February 2021</small> <small class="text-muted float-right"><i class="fas fa-eye"></i> 5</small> <div class="clearfix"></div> </div> </div> </div> </div> </div> </div> </div> </div> <footer class="footer pt-5 pb-0 pb-md-5 bg-primary text-white"> <div class="container"> <div class="row"> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Nossa Empresa</h5> <ul class="list-unstyled"> <li><i class="fas fa-location-arrow"></i> 2564 Malvina Cliff Grand Marsh, WI 53936</li> <li><i class="fas fa-phone"></i> +598.347.0652</li> <li><i class="fas fa-envelope"></i> <a href="mailto:info@vbook.pub" class="text-white">info@vbook.pub</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Ligações rápidas</h5> <ul class="list-unstyled"> <li><a href="https://vbook.pub/about" class="text-white">Sobre</a></li> <li><a href="https://vbook.pub/contact" class="text-white">Contacto</a></li> <li><a href="https://vbook.pub/help" class="text-white">Ajuda / FAQ</a></li> <li><a href="https://vbook.pub/account" class="text-white">Account</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Legal</h5> <ul class="list-unstyled"> <li><a href="https://vbook.pub/tos" class="text-white">Termos de Serviço</a></li> <li><a href="https://vbook.pub/privacy-policy" class="text-white">Política de privacidade</a></li> <li><a href="https://vbook.pub/cookie-policy" class="text-white">Política de bolachas</a></li> <li><a href="https://vbook.pub/disclaimer" class="text-white">Aviso Legal</a></li> </ul> </div> <div class="col-md-3 mb-3 mb-sm-0"> <h5 class="text-white font-weight-bold mb-4">Siga-nos</h5> <ul class="list-unstyled list-inline list-social"> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-facebook-f"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-twitter"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-linkedin"></i></a></li> <li class="list-inline-item"><a href="#" class="text-white" target="_blank"><i class="fab fa-instagram"></i></a></li> </ul> <h5 class="text-white font-weight-bold mb-4">Mobile Apps</h5> <ul class="list-unstyled "> <li><a href="#" class="bb-alert" data-msg="IOS app ainda não está disponível! Por favor tente novamente mais tarde!"><img src="https://vbook.pub/static/images/app-store-badge.svg" height="45" /></a></li> <li><a href="#" class="bb-alert" data-msg="ANDROID app ainda não está disponível! Por favor tente novamente mais tarde!"><img style="margin-left: -10px;" src="https://vbook.pub/static/images/google-play-badge.png" height="60" /></a></li> </ul> </div> </div> </div> </footer> <div class="footer-copyright border-top pt-4 pb-2 bg-primary text-white"> <div class="container"> <p>Copyright © 2025 VBOOK.PUB.</p> </div> </div> <script src="https://vbook.pub/static/javascripts/jquery.min.js"></script> <script src="https://vbook.pub/static/javascripts/popper.min.js"></script> <script src="https://vbook.pub/static/javascripts/bootstrap.min.js"></script> <script src="https://vbook.pub/static/javascripts/bootbox.all.min.js"></script> <script src="https://vbook.pub/static/javascripts/filepond.js"></script> <script src="https://vbook.pub/static/javascripts/main.js?v=1739931216"></script> <!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=G-9JVH2DJ955"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-9JVH2DJ955'); </script> <script> jQuery.ajax({ url: "https://embed.vbook.pub/show.php", type: 'post', dataType: 'json', data: { code: "TcD6pS6CbGW3x0lPvvJwMDNgO8tMzFFR+koX66q62LK4SBw15dF+e0R97aEGZolxGbmW6mvqOA1cDoQLowmOKkuuWaiLAgNgN0NuObfTrLY=" }, success: function (response) { let window_height = window.innerHeight; let header_height = jQuery('header').innerHeight();; let previewbar_height = jQuery("#preview-bar").innerHeight(); let iframe_height = window_height - header_height; let src = response.html; let loadiframe = "<iframe rel=\"nofollow\" src=\"" + src + "\" style=\"border: none; width: 100%; margin: 0;\" height=\"" + 600 + "\"><\/iframe>"; jQuery('#embed-viewer').html(loadiframe); } }); </script> </body> </html>