add game statistics

This commit is contained in:
Alexander Popov 2021-02-25 08:44:48 +03:00
parent 3a91886b1d
commit e881542c83
Signed by: iiiypuk
GPG Key ID: 398FC73478D97286
6 changed files with 97 additions and 31 deletions

2
.gitignore vendored
View File

@ -1,5 +1,5 @@
node_modules/ node_modules/
package-lock.json package-lock.json
*.afdesign
_media/css/chota.min.css _media/css/chota.min.css

View File

@ -1,5 +1,7 @@
## 2.0.2 # Build 2 [2021-02-25] ## 2.0.2 # Build 2 [2021-02-25]
- - Added game statistics
- ✔️ - Fix keyboard fize on big screen - ✔️ - Fix keyboard fize on big screen
- ♻️ - JS code replace `var` by `let`
## 2.0.1 [2021-02-25] ## 2.0.1 [2021-02-25]
- - Make iOS web app - - Make iOS web app

View File

@ -95,6 +95,7 @@
</script> </script>
<script type="text/javascript" src="js/pageStatistics.js?v=1"></script> <script type="text/javascript" src="js/pageStatistics.js?v=1"></script>
<script type="text/javascript" src="js/pageCredits.js?v=1"></script> <script type="text/javascript" src="js/pageCredits.js?v=1"></script>
<script type="text/javascript" src="js/statFunction.js?v=1"></script>
<script type="text/javascript" src="js/game.js?v=2"></script> <script type="text/javascript" src="js/game.js?v=2"></script>
</body> </body>
</html> </html>

View File

@ -16,15 +16,15 @@ let gameWord = words[Math.floor(Math.random() * words.length)].toUpperCase();
let gameAnswered = new Array(gameWord.length + 1).join('-'); let gameAnswered = new Array(gameWord.length + 1).join('-');
let lives = 6; let lives = 6;
// Функция генерации html кода клавиатуры // init keyboard
function generateKeyboard(layout) function generateKeyboard(layout)
{ {
var keyboardHtmlStr = ''; let keyboardHtmlStr = '';
layout.split('').forEach(function(letter) layout.split('').forEach(function(letter)
{ {
keyboardHtmlStr = keyboardHtmlStr + '<button class="button clear is-marginless" id="' + letter + keyboardHtmlStr = keyboardHtmlStr + '<button class="button clear is-marginless" id="' + letter +
'" onclick="offChar(\'' + letter + '\')"> ' + letter + '</button>'; '" onclick="letterClick(\'' + letter + '\')"> ' + letter + '</button>';
}) })
let keyboard = document.querySelector("#keyboard"); let keyboard = document.querySelector("#keyboard");
@ -32,17 +32,20 @@ function generateKeyboard(layout)
document.querySelector("#keyboard").innerHTML = keyboardHtmlStr; document.querySelector("#keyboard").innerHTML = keyboardHtmlStr;
} }
function offChar(letter) // letter click action
function letterClick(letter)
{ {
var charButton = document.getElementById(letter); let charButton = document.getElementById(letter);
charButton.disabled = true; charButton.disabled = true;
var indices = []; let indices = [];
var idx = gameWord.split('').indexOf(letter) let idx = gameWord.split('').indexOf(letter)
if (idx == -1) if (idx == -1)
{ {
wrong(); wrongLetter();
updateStats('stLetterClick');
return; return;
} }
@ -54,30 +57,29 @@ function offChar(letter)
indices.forEach(function(item, indices) indices.forEach(function(item, indices)
{ {
var wordArray = gameAnswered.split('') let wordArray = gameAnswered.split('')
wordArray[item] = letter; wordArray[item] = letter;
gameAnswered = wordArray.join(''); gameAnswered = wordArray.join('');
document.querySelector("#word").innerHTML = gameAnswered; document.querySelector("#word").innerHTML = gameAnswered;
var wordsAnswered = localStorage.getItem('wordsAnswered');
localStorage.setItem('wordsAnswered', parseInt(wordsAnswered) + 1); updateStats('stCorrLetter');
}) })
if (gameAnswered.split('').indexOf('-') == -1) if (gameAnswered.split('').indexOf('-') == -1)
{ {
var gamesWon = localStorage.getItem('gamesWon');
localStorage.setItem('gamesWon', parseInt(gamesWon) + 1);
alert('You Win'); alert('You Win');
updateStats('stWinWords');
document.location.reload(true); document.location.reload(true);
} }
} }
function wrong() // action by wrong letter
function wrongLetter()
{ {
if (lives <= 0) if (lives <= 0)
{ {
var gamesFail = localStorage.getItem('gamesFail');
localStorage.setItem('gamesFail', parseInt(gamesFail) + 1);
alert('You dead'); alert('You dead');
updateStats('stTotalGames');
document.location.reload(true); document.location.reload(true);
} }
@ -85,7 +87,7 @@ function wrong()
document.querySelector("#lives").innerHTML = 'Lives ' + lives; document.querySelector("#lives").innerHTML = 'Lives ' + lives;
} }
// display tab content
function showPage(element, pageName) function showPage(element, pageName)
{ {
// alert(event.srcElement.id); // alert(event.srcElement.id);
@ -97,11 +99,15 @@ function showPage(element, pageName)
document.querySelector("#" + element.id).classList.add('active'); document.querySelector("#" + element.id).classList.add('active');
document.querySelector("#content").innerHTML = pageName; document.querySelector("#content").innerHTML = pageName;
if (pageName == pageStatistics) { updateStatsPage(); }
} }
// game // game init
window.onload = function() window.onload = function()
{ {
updateStats('stCheck');
generateKeyboard(keyboardLayouts['usQwertyKeyboard']); generateKeyboard(keyboardLayouts['usQwertyKeyboard']);
document.querySelector('#lives').innerHTML = 'Lives ' + lives; document.querySelector('#lives').innerHTML = 'Lives ' + lives;
console.log('Word:', gameWord.toLowerCase()); console.log('Word:', gameWord.toLowerCase());

View File

@ -11,29 +11,50 @@ const pageStatistics = '\
</thead>\ </thead>\
<tbody>\ <tbody>\
<tr>\ <tr>\
<th>Всего игр</th>\ <th>Total games</th>\
<th id="stTotalGames">0</th>\ <th id="stTotalGames">...</th>\
</tr>\ </tr>\
<tr>\ <tr>\
<th>Отгаданных слов</th>\ <th>Guess words</th>\
<th id="stWinWords">0</th>\ <th id="stWinWords">...</th>\
</tr>\ </tr>\
<tr>\ <tr>\
<th>% побед</th>\ <th>% Win</th>\
<th id="stWinPercentage">0</th>\ <th id="stWinPercentage">...</th>\
</tr>\ </tr>\
<tr>\ <tr>\
<th>Всего букв нажато</th>\ <th>Total letters clicked</th>\
<th id="stLetterClick">0</th>\ <th id="stLetterClick">...</th>\
</tr>\ </tr>\
<tr>\ <tr>\
<th>Букв отгадано</th>\ <th>Correctly guessed letters</th>\
<th id="stWinLetter">0</th>\ <th id="stCorrLetter">...</th>\
</tr>\ </tr>\
<tr>\ <tr>\
<th>Процент верных букв</th>\ <th>% correctly letters</th>\
<th id="stWinLetterPercent">0</th>\ <th id="stWinLetterPercent">...</th>\
</tr>\ </tr>\
</tbody>\ </tbody>\
</table>\ </table>\
<p class="text-center">\
<buttton class="button error" onclick="localStorage.clear();">Clear statistics</buttton>\
</p>\
'; ';
function updateStatsPage()
{
let stTotalGames = localStorage.getItem('stTotalGames');
let stWinWords = localStorage.getItem('stWinWords');
let stWinPercentage = localStorage.getItem('stWinPercentage');
let stLetterClick = localStorage.getItem('stLetterClick');
let stCorrLetter = localStorage.getItem('stCorrLetter');
let stWinLetterPercent = localStorage.getItem('stWinLetterPercent');
document.querySelector('#stTotalGames').innerHTML = stTotalGames;
document.querySelector('#stWinWords').innerHTML = stWinWords;
document.querySelector('#stWinPercentage').innerHTML = Math.round((stWinWords / stTotalGames) * 100);
document.querySelector('#stLetterClick').innerHTML = stLetterClick;
document.querySelector('#stCorrLetter').innerHTML = stCorrLetter;
document.querySelector('#stWinLetterPercent').innerHTML = Math.round((stCorrLetter / stLetterClick) * 100);
}

36
js/statFunction.js Normal file
View File

@ -0,0 +1,36 @@
function updateStats(statParameter)
{
let stTotalGames = JSON.parse(localStorage.getItem('stTotalGames'));
let stWinWords = JSON.parse(localStorage.getItem('stWinWords'));
let stLetterClick = JSON.parse(localStorage.getItem('stLetterClick'));
let stCorrLetter = JSON.parse(localStorage.getItem('stCorrLetter'));
switch(statParameter)
{
case 'stTotalGames':
localStorage.setItem('stTotalGames', stTotalGames + 1);
break;
case 'stWinWords':
localStorage.setItem('stTotalGames', stTotalGames + 1);
localStorage.setItem('stWinWords', stWinWords + 1);
break;
case 'stLetterClick':
localStorage.setItem('stLetterClick', stLetterClick + 1);
break;
case 'stCorrLetter':
localStorage.setItem('stLetterClick', stLetterClick + 1);
localStorage.setItem('stCorrLetter', stCorrLetter + 1);
break;
case 'stCheck':
if (stTotalGames == null) { localStorage.setItem('stTotalGames', 0); }
if (stWinWords == null) { localStorage.setItem('stWinWords', 0); }
if (stLetterClick == null) { localStorage.setItem('stLetterClick', 0); }
if (stCorrLetter == null) { localStorage.setItem('stCorrLetter', 0); }
break;
}
}