The creation of the game "Words from the Word"
Good day! I want to bring to your attention the project game "Words from the Word." Relatively recently, I began to study web-programming and, since the best teacher is practice, I decided to write my own version of the rather well-known game Word from the Word. The main goal is to use pure Javascript without connecting additional libraries.
View of the playing field
The task of the player - from the letters presented on the screen words to make others. The composed word must be a nominal noun in the singular, diminutive pet forms, and abbreviations are not accepted. Minimum length - 3 letters. For each guessed word points are added depending on its length (base rate for each letter multiplied by a factor). The base rate is ten points. The coefficient is calculated as follows:
At each level a player can earn extra points by fulfilling certain conditions:
')
The words that the player has guessed are displayed on the playing field in alphabetical order, grouped by the number of letters in the word. The player can view the value of each by clicking on him. Results are protected every time after the correctly guessed word.
During the work on the application, elements of the MVC approach were used (model, view, controller). The individual components are also rendered sound control, processing of game results and common methods for the entire application.
During the development process, I felt all the advantages of using closures and immediately called functions. So, their use has eliminated the constant search for elements on the page through getElementById, etc.
In the process of initializing the application, all the necessary html elements are created, and list objects are formed to simplify access to them.
All information about the player passing a level is stored in the object GAME.model.level
In order to somehow save progress and not use server scripts and databases, a method of saving to the browser localStorage was chosen. In addition, he implemented a "table of records" for players who use this application in the same browser.
Thus, I present my project to you for discussion. I will be glad to hear constructive criticism and suggestions both in the comments and in person. If you are interested in details, I will be happy to tell you more about the writing process.
View of the playing field
Game Description
The task of the player - from the letters presented on the screen words to make others. The composed word must be a nominal noun in the singular, diminutive pet forms, and abbreviations are not accepted. Minimum length - 3 letters. For each guessed word points are added depending on its length (base rate for each letter multiplied by a factor). The base rate is ten points. The coefficient is calculated as follows:
- three letters - 1;
- from four to five letters - 1.25;
- from six to seven letters - 1.5;
- from eight to nine letters - 1.75;
- more than nine letters - 2.
At each level a player can earn extra points by fulfilling certain conditions:
')
- guess 40 percent. possible words at a level (1,000 points);
- guess three words starting with the same letter as the level word (500 points);
- guess all the possible words on the level (50,000 points).
The words that the player has guessed are displayed on the playing field in alphabetical order, grouped by the number of letters in the word. The player can view the value of each by clicking on him. Results are protected every time after the correctly guessed word.
Used techniques and techniques
During the work on the application, elements of the MVC approach were used (model, view, controller). The individual components are also rendered sound control, processing of game results and common methods for the entire application.
General structure of the application
GAME = { "utils":{}, // "sounds":{}, // "view":{}, // "controller":{}, // "model":{}, // "results":{} // } GAME.init(place) // GAME.namespace(ns_string) // During the development process, I felt all the advantages of using closures and immediately called functions. So, their use has eliminated the constant search for elements on the page through getElementById, etc.
An example of using closures
controller.play = (function () { // var cancelClick = false; return function (letter) { if (cancelClick) return; cancelClick = true; setTimeout(function () { cancelClick = false; }, 200) // })() Stages of the application
In the process of initializing the application, all the necessary html elements are created, and list objects are formed to simplify access to them.
Html content before initialization
<body> <div id="gamefield"></div> <div id="help"> <h2></h2> <div class='textGuide'> <p> . . - , . - 3 .</p> </div> <h2></h2> <div class='textGuide'> <p> , . .</p> <p> Esc .</p> <p> Backspace (←) .</p> </div> <h2> </h2> <div class="textGuide"> <p> - 40% . : 1 000 .</p> <p> - , , . : 500 .</p> <p> - . : 50 000 .</p> </div> <h2></h2> <div> <img src="images/icons/tips/definition.png"> <p> . : 100 </p> </div> <div> <img src="images/icons/tips/word.png"> <p> . : 500 .</p> </div> <h2> </h2> <div> <img src="images/icons/buttons_small/soundON.png"> <p> .</p> </div> <div> <img src="images/icons/buttons_small/menuButton.png"> <p> .</p> </div> <div> <progress max="10" value="3"></progress> <p> .</p> </div> </div> </body> Html content after initialization
<body> <div id="gamefield" style="position: relative;"> <div> <div class="gameInfo"> <!-- --> <h1> </h1> <div class="userName">: <span>123</span></div> <div class="currentLevel">: <span>1</span></div> <div class="menuLevel"> <!-- --> <div class="menuLabel"> ⇩</div> <div class="levelMap" style="display: none;"> <a class="reached levelButton">1</a> <a class="levelButton">2</a> <a class="levelButton">3</a> <a class="levelButton">4</a> </div> </div> <div class="score">: <span>0</span></div> <progress max="31" value="0" title=" 0 31 "></progress> <div class="tips"> <h2>:</h2> <img id="wordDefinition" title=" ." alt=" ." src="images/icons/tips/definition_gray.png"> <img id="holeWord" title=" ." alt=" ." src="images/icons/tips/word_gray.png"></div> </div> <!-- --> <div class="gameField"> <div class="missions"> <img src="images/icons/missions/incomplete.png" alt=" " title=" 40% "> <img src="images/icons/missions/incomplete.png" alt=" " title=" 3 """> <img src="images/icons/missions/incomplete.png" alt=" " title=" 100% "> </div> <div class="buttonGroup"> <img src="images/icons/buttons_small/soundON.png" alt=" " title=" "> <img src="images/icons/buttons_small/menuButton.png" alt="" title=" "> <img src="images/icons/buttons_small/help.png" title="" alt=""> </div> <!-- --> <div class="userWord"></div> <div class="levelWord"> <!-- --> <div class="letter" data-order="0"></div> <div class="letter" data-order="0"></div> <div class="letter" data-order="0"></div> <div class="letter" data-order="0"></div> <div class="letter" data-order="0"></div> <div class="letter" data-order="0"></div></div> <!-- --> <div class="foundWords"></div> </div> </div> </div> </body> All information about the player passing a level is stored in the object GAME.model.level
Storing Passage Information
level = { "1":{ "wordForLevel":"", "foundWords":["","",""], "missions": { "progress":3, "firstStar":true, "secondStar":true, "thirdStar":true } } } In order to somehow save progress and not use server scripts and databases, a method of saving to the browser localStorage was chosen. In addition, he implemented a "table of records" for players who use this application in the same browser.
Save method
/** * . * @method GAME.controller.storeResults * @param {string} name * . */ controller.storeResults = function (name) { var results = { level: GAME.utils.createClone(model.level), score: model.score } results = JSON.stringify(results); window.localStorage.setItem(name, results); } Thus, I present my project to you for discussion. I will be glad to hear constructive criticism and suggestions both in the comments and in person. If you are interested in details, I will be happy to tell you more about the writing process.
Link to the GitHub repository
UPD! You can play here
Source: https://habr.com/ru/post/308256/
All Articles