diff options
| -rw-r--r-- | all.html | 12 | ||||
| -rw-r--r-- | anagramgame.html | 17 | ||||
| -rw-r--r-- | games.html | 8 | ||||
| -rw-r--r-- | js/anagramgame.js | 51 |
4 files changed, 65 insertions, 23 deletions
@@ -24,7 +24,7 @@ can be found <a href="explanation.html">here</a>. </div> </div> - + <div class="row"> <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> @@ -58,15 +58,15 @@ can be found <a href="explanation.html">here</a>. </div> </div> - + <div class="row"> <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> <iframe frameborder="0" src="https://itch.io/embed/104046?bg_color=e5e8ff&fg_color=222222&link_color=5a06b1&border_color=bebebe" width="552" height="167"></iframe> <div class="project-title"><a href="https://pommicket.itch.io/automap">AutoMap</a></div> </div> </div> - - + + <div class="row"> <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> <img src="screenshots/NameGenerator.png" width=200 height=200><br> @@ -75,7 +75,7 @@ the frequencies of trigrams. </div> </div> - + <div class="row"> <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> <img src="screenshots/hypersphere.png" width=250 height=250><br> @@ -270,7 +270,7 @@ <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> <img src="screenshots/anagramgame.png" width=250 height=250><br> <div class="project-title"><a href="anagramgame.html">The Anagram Game</a></div> - Find an anagram of a random 7-letter word. + Find an anagram of a random word. </div> </div> diff --git a/anagramgame.html b/anagramgame.html index 9d415c2..60cffb0 100644 --- a/anagramgame.html +++ b/anagramgame.html @@ -13,10 +13,17 @@ <p>The word list can be found <a href="https://raw.githubusercontent.com/sindresorhus/word-list/master/words.txt">here</a>.</p> <div id="loading">Loading word list...</div> <div id="word"></div> - <div id="hidden" style="visibility: hidden;"> + <div id="inputs"> <div class="container-fluid"> <div class="row"> - <div class="input-group input-group-md col-lg-3 col-md-6 col-sm-8 col-xs-10"> + <div class="input-group input-group-md col-lg-6 col-md-12 col-sm-12 col-xs-12"> + </span> + <input class="form-control input-lg" type="text" id="length" placeholder="Word length" onKeyDown="if(event.keyCode==13) play();"> + <span class="input-group-addon"> + <button class="btn btn-sm btn-primary" onclick="play();">Play!</button> + </span> + </div> + <div class="input-group input-group-md col-lg-6 col-md-12 col-sm-12 col-xs-12"> <input class="form-control input-lg" type="text" id="guess" onKeyDown="if(event.keyCode==13) submit();"> <span class="input-group-addon"> <button class="btn btn-sm btn-primary" onclick="submit();">Submit guess</button> @@ -25,12 +32,14 @@ <button class="btn btn-sm btn-danger" onclick="giveUp();">Give up?</button> </span> </div> + </div> - </div> + </div> </div> <div id="answer"></div> - <button id="again" class="btn btn-sm btn-primary" style="visibility: hidden;" onclick="play();">Play again</button> + <div id="error" style="color: red;"></div> + <button id="again" class="btn btn-sm btn-primary" onclick="play();">Play again (Press enter, or click here)</button> <script src="js/anagramgame.js"></script> </body> @@ -53,6 +53,14 @@ </div> </div> + <div class="row"> + <div class="col-lg-4 col-md-6 col-sm-8 col-xs-10 well well-sm project"> + <img src="screenshots/anagramgame.png" width=250 height=250><br> + <div class="project-title"><a href="anagramgame.html">The Anagram Game</a></div> + Find an anagram of a random word. + </div> + </div> + </div> </body> </html> diff --git a/js/anagramgame.js b/js/anagramgame.js index c50c403..b1ad100 100644 --- a/js/anagramgame.js +++ b/js/anagramgame.js @@ -1,5 +1,6 @@ var words = []; var word; +var length; var anagram; var alphabet = "qwertyuiopasdfghjklzxcvbnm"; var letters = alphabet + alphabet.toUpperCase(); @@ -51,6 +52,7 @@ function findWord() { var numWords = words.length; word = words[Math.floor(Math.random()*numWords)]; + console.log(words.length); if (containsSymbols(word)) findWord(); var lc = letterCounts(word); @@ -67,16 +69,24 @@ function findWord() function play() { - $("#hidden").attr("style", "visibility: hidden;"); - $("#again").attr("style", "visibility: hidden;"); - $("#answer").attr("style", "visibility: hidden;"); + length = $("#length").val(); + loadWords(); + +} + + +function showWord() +{ + $("#inputs").hide(); + $("#again").hide(); + $("#answer").hide(); $("#guess").val(""); $("#loading").html("Finding a word with an anagram..."); findWord(); $("#loading").html(""); $("#word").html("Find an anagram of " + word + "."); - $("#hidden").attr("style", ""); - + $("#inputs").show(); + $("#guess").focus(); } function isWord(x) @@ -86,6 +96,11 @@ function isWord(x) function loadWords() { + if (length < 2 || length > 18) + { + $("#error").text("Word length must be 2-18."); + return; + } var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { @@ -95,10 +110,10 @@ function loadWords() words = []; for (var i = 0; i < allwords.length; i++) { - if (allwords[i].length == 7) + if (allwords[i].length == length) words.push(allwords[i].toLowerCase()); } - play(); + showWord(); } }; xhttp.open("GET", "https://raw.githubusercontent.com/sindresorhus/word-list/master/words.txt", true); @@ -107,27 +122,37 @@ function loadWords() function submit() { + if ($("#again").is(":visible")) + { + play(); + return; + } var guess = $("#guess").val().toLowerCase(); if (guess != word && letterCounts(guess).equals(letterCounts(word)) && isWord(guess)) { - $("#answer").attr("style", ""); + $("#answer").show(); $("#answer").html("<span style='color: green'>Correct!</span>"); - $("#again").attr("style", ""); + $("#again").show(); } else { - $("#answer").attr("style", ""); + $("#answer").show(); $("#answer").html("<span style='color: red'>Incorrect!</span>"); } } function giveUp() { - $("#answer").attr("style", ""); + $("#answer").show(); $("#answer").html("<span style='color: red'>The answer was " + anagram + ".</span>"); - $("#again").attr("style", ""); + $("#again").show(); } -loadWords(); + +$("#again").hide(); +$("#answer").hide(); +$("#guess").val(""); +$("#loading").hide(); +$("#guess").show(); |