英文のアルファベットはスピードをタイプしてゲームをテストします
42359 ワード
<!DOCTYPE html>
>
>
-8">
>CodePen <span class="token punctuation">-</span> Alphabet Speed Test >
://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet">
>
>
>
>
-container" data-state="pre-game">
>>
-container">>
>
--template" data-state="inactive">>
>
-button__container">
>
>
>
>
></span>
const GameState = <span class="token punctuation">{</span>
<span class="token key atrule">PRE_GAME</span><span class="token punctuation">:</span> <span class="token string">'pre-game'</span><span class="token punctuation">,</span>
<span class="token key atrule">RUNNING</span><span class="token punctuation">:</span> <span class="token string">'running'</span><span class="token punctuation">,</span>
<span class="token key atrule">POST_GAME</span><span class="token punctuation">:</span> <span class="token string">'post-game'</span>
<span class="token punctuation">}</span>;
const LetterState = <span class="token punctuation">{</span>
<span class="token key atrule">ACTIVE</span><span class="token punctuation">:</span> <span class="token string">'active'</span><span class="token punctuation">,</span>
<span class="token key atrule">INACTIVE</span><span class="token punctuation">:</span> <span class="token string">'inactive'</span>
<span class="token punctuation">}</span>;
class SpeedTest <span class="token punctuation">{</span>
constructor(gameContainer<span class="token punctuation">,</span> letterContainer) <span class="token punctuation">{</span>
this.letters = <span class="token punctuation">[</span><span class="token punctuation">]</span>;
this.remainingLetters = <span class="token punctuation">[</span><span class="token punctuation">]</span>;
this.state = GameState.PRE_GAME;
this.timer = null;
this.gameContainer = gameContainer;
this.letterContainer = letterContainer;
this.highscore = Infinity;
this.onKeyDown = this.onKeyDown.bind(this);
this.restartGame = this.restartGame.bind(this);
<span class="token punctuation">}</span>;
init(restart) <span class="token punctuation">{</span>
const availableLanguages = <span class="token punctuation">[</span><span class="token string">'en'</span><span class="token punctuation">,</span> <span class="token string">'nb'</span><span class="token punctuation">,</span> <span class="token string">'nn'</span><span class="token punctuation">,</span> <span class="token string">'no'</span><span class="token punctuation">]</span>;
const preferredLanguage = SpeedTest.getPreferredLanguage(availableLanguages);
this.letters = SpeedTest.getLetters(preferredLanguage);
this.remainingLetters = this.letters;
this.highscore = this.getHighscore();
if (this.highscore && this.highscore <span class="token tag">!==</span> Infinity) <span class="token punctuation">{</span>
this.updateHighscoreText(this.highscore);
<span class="token punctuation">}</span>
const letterTemplate = this.letterContainer.querySelector(
'.letter<span class="token punctuation">-</span><span class="token punctuation">-</span>template'
);
this.setTitle(' A ， ');
this.renderLetters(letterTemplate);
if (<span class="token tag">!restart)</span> <span class="token punctuation">{</span>
this.addEventListeners();
this.getHighscore();
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>;
static getPreferredLanguage(langs) <span class="token punctuation">{</span>
const defaultLang = 'en';
const navgLangs = navigator.languages;
const preferredLang = navgLangs.filter(lang =<span class="token punctuation">></span> langs.indexOf(lang) <span class="token punctuation">></span> <span class="token punctuation">-</span>1)<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>;
return preferredLang <span class="token punctuation">|</span><span class="token punctuation">|</span> defaultLang;
<span class="token punctuation">}</span>;
static getLetters(preferredLang) <span class="token punctuation">{</span>
let letters = <span class="token punctuation">[</span><span class="token punctuation">]</span>;
switch (preferredLang) <span class="token punctuation">{</span>
case 'nb'<span class="token punctuation">:</span>
case 'nn'<span class="token punctuation">:</span>
case 'no'<span class="token punctuation">:</span>
letters = <span class="token punctuation">[</span>
<span class="token string">'a'</span><span class="token punctuation">,</span>
<span class="token string">'b'</span><span class="token punctuation">,</span>
<span class="token string">'c'</span><span class="token punctuation">,</span>
<span class="token string">'d'</span><span class="token punctuation">,</span>
<span class="token string">'e'</span><span class="token punctuation">,</span>
<span class="token string">'f'</span><span class="token punctuation">,</span>
<span class="token string">'g'</span><span class="token punctuation">,</span>
<span class="token string">'h'</span><span class="token punctuation">,</span>
<span class="token string">'i'</span><span class="token punctuation">,</span>
<span class="token string">'j'</span><span class="token punctuation">,</span>
<span class="token string">'k'</span><span class="token punctuation">,</span>
<span class="token string">'l'</span><span class="token punctuation">,</span>
<span class="token string">'m'</span><span class="token punctuation">,</span>
<span class="token string">'n'</span><span class="token punctuation">,</span>
<span class="token string">'o'</span><span class="token punctuation">,</span>
<span class="token string">'p'</span><span class="token punctuation">,</span>
<span class="token string">'q'</span><span class="token punctuation">,</span>
<span class="token string">'r'</span><span class="token punctuation">,</span>
<span class="token string">'s'</span><span class="token punctuation">,</span>
<span class="token string">'t'</span><span class="token punctuation">,</span>
<span class="token string">'u'</span><span class="token punctuation">,</span>
<span class="token string">'v'</span><span class="token punctuation">,</span>
<span class="token string">'w'</span><span class="token punctuation">,</span>
<span class="token string">'x'</span><span class="token punctuation">,</span>
<span class="token string">'y'</span><span class="token punctuation">,</span>
<span class="token string">'z'</span><span class="token punctuation">,</span>
<span class="token string">'æ'</span><span class="token punctuation">,</span>
<span class="token string">'ø'</span><span class="token punctuation">,</span>
<span class="token string">'å'</span>
<span class="token punctuation">]</span>;
break;
<span class="token key atrule">default</span><span class="token punctuation">:</span>
letters = <span class="token punctuation">[</span>
<span class="token string">'a'</span><span class="token punctuation">,</span>
<span class="token string">'b'</span><span class="token punctuation">,</span>
<span class="token string">'c'</span><span class="token punctuation">,</span>
<span class="token string">'d'</span><span class="token punctuation">,</span>
<span class="token string">'e'</span><span class="token punctuation">,</span>
<span class="token string">'f'</span><span class="token punctuation">,</span>
<span class="token string">'g'</span><span class="token punctuation">,</span>
<span class="token string">'h'</span><span class="token punctuation">,</span>
<span class="token string">'i'</span><span class="token punctuation">,</span>
<span class="token string">'j'</span><span class="token punctuation">,</span>
<span class="token string">'k'</span><span class="token punctuation">,</span>
<span class="token string">'l'</span><span class="token punctuation">,</span>
<span class="token string">'m'</span><span class="token punctuation">,</span>
<span class="token string">'n'</span><span class="token punctuation">,</span>
<span class="token string">'o'</span><span class="token punctuation">,</span>
<span class="token string">'p'</span><span class="token punctuation">,</span>
<span class="token string">'q'</span><span class="token punctuation">,</span>
<span class="token string">'r'</span><span class="token punctuation">,</span>
<span class="token string">'s'</span><span class="token punctuation">,</span>
<span class="token string">'t'</span><span class="token punctuation">,</span>
<span class="token string">'u'</span><span class="token punctuation">,</span>
<span class="token string">'v'</span><span class="token punctuation">,</span>
<span class="token string">'w'</span><span class="token punctuation">,</span>
<span class="token string">'x'</span><span class="token punctuation">,</span>
<span class="token string">'y'</span><span class="token punctuation">,</span>
<span class="token string">'z'</span>
<span class="token punctuation">]</span>;
break;
<span class="token punctuation">}</span>
return letters;
<span class="token punctuation">}</span>;
renderLetters(template) <span class="token punctuation">{</span>
let letterElement;
this.letters.forEach((letter<span class="token punctuation">,</span> index) =<span class="token punctuation">></span> <span class="token punctuation">{</span>
letterElement = template.cloneNode(true);
letterElement.classList.remove('letter<span class="token punctuation">-</span><span class="token punctuation">-</span>template');
letterElement.dataset.letter = letter;
letterElement.dataset.index = index;
this.letterContainer.appendChild(letterElement);
<span class="token punctuation">}</span>);
// this.letterContainer.removeChild(template);
<span class="token punctuation">}</span>;
addEventListeners() <span class="token punctuation">{</span>
document.addEventListener('keydown'<span class="token punctuation">,</span> this.onKeyDown<span class="token punctuation">,</span> false);
const restartButton = this.gameContainer.querySelector('.restart<span class="token punctuation">-</span>button');
restartButton.addEventListener('click'<span class="token punctuation">,</span> this.restartGame<span class="token punctuation">,</span> false);
<span class="token punctuation">}</span>;
onKeyDown(event) <span class="token punctuation">{</span>
if (event.key === ' ') <span class="token punctuation">{</span>
this.restartGame();
<span class="token punctuation">}</span> else if (this.remainingLetters<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>.toUpperCase() === event.key.toUpperCase()) <span class="token punctuation">{</span>
if (this.state === GameState.PRE_GAME) <span class="token punctuation">{</span>
this.startGame();
<span class="token punctuation">}</span>
this.updateLetter(this.remainingLetters<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> LetterState.ACTIVE);
this.remainingLetters = this.remainingLetters.slice(1);
if (this.remainingLetters.length === 0) <span class="token punctuation">{</span>
this.stopGame();
<span class="token punctuation">}</span> else if (this.remainingLetters.length < this.letters.length / 5) <span class="token punctuation">{</span>
this.setTitle(' ， ！');
<span class="token punctuation">}</span> else if (this.remainingLetters.length < this.letters.length / 2) <span class="token punctuation">{</span>
this.setTitle(' <span class="token tag">!');</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span> else <span class="token punctuation">{</span>
const nextLetterElement = this.letterContainer.querySelector(
`<span class="token punctuation">[</span>data<span class="token punctuation">-</span>state=$<span class="token punctuation">{</span>LetterState.INACTIVE<span class="token punctuation">}</span><span class="token punctuation">]</span>`
);
this.wrongLetter(nextLetterElement);
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>;
startGame() <span class="token punctuation">{</span>
this.gameContainer.dataset.state = GameState.RUNNING;
this.state = GameState.RUNNING;
this.setTitle('GO GO GO');
this.startTimer();
<span class="token punctuation">}</span>;
stopGame() <span class="token punctuation">{</span>
const t2 = this.stopTimer();
const t1 = this.timer;
this.gameContainer.dataset.state = GameState.POST_GAME;
this.state = GameState.POST_GAME;
let time = t2 <span class="token punctuation">-</span> t1;
time /= 1000;
const timeString = this.formatTime(time);
let newTitle = ` ! ✨ $<span class="token punctuation">{</span>timeString<span class="token punctuation">}</span> <span class="token tag">!`;</span>
if (this.highscore === null <span class="token punctuation">|</span><span class="token punctuation">|</span> time < this.highscore) <span class="token punctuation">{</span>
newTitle += ' <span class="token tag">!';</span>
this.highscore = time;
this.updateHighscoreText(time);
this.setHighscore(time);
<span class="token punctuation">}</span>
this.setTitle(newTitle);
<span class="token punctuation">}</span>;
restartGame() <span class="token punctuation">{</span>
this.state = GameState.PRE_GAME;
this.gameContainer.dataset.state = GameState.PRE_GAME;
const letterElements = this.letterContainer.querySelectorAll('<span class="token punctuation">[</span>data<span class="token punctuation">-</span>letter<span class="token punctuation">]</span>');
for (let i = 0; i < letterElements.length; i++) <span class="token punctuation">{</span>
this.letterContainer.removeChild(letterElements<span class="token punctuation">[</span>i<span class="token punctuation">]</span>);
<span class="token punctuation">}</span>
this.init();
<span class="token punctuation">}</span>;
startTimer() <span class="token punctuation">{</span>
this.timer = performance.now();
<span class="token punctuation">}</span>;
stopTimer() <span class="token punctuation">{</span>
return performance.now();
<span class="token punctuation">}</span>;
wrongLetter(element) <span class="token punctuation">{</span>
if (<span class="token tag">!('animate'</span> in element)) <span class="token punctuation">{</span>
return;
<span class="token punctuation">}</span>
const styles = getComputedStyle(element);
const backgroundColor = styles.getPropertyValue('<span class="token punctuation">-</span><span class="token punctuation">-</span>background<span class="token punctuation">-</span>color');
const errorRed = '<span class="token comment">#f15f79';</span>
const blinkAnimation = <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token punctuation">[</span><span class="token string">'--background-color'</span><span class="token punctuation">]</span><span class="token punctuation">:</span> backgroundColor
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token punctuation">[</span><span class="token string">'--background-color'</span><span class="token punctuation">]</span><span class="token punctuation">:</span> errorRed
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{</span>
<span class="token punctuation">[</span><span class="token string">'--background-color'</span><span class="token punctuation">]</span><span class="token punctuation">:</span> backgroundColor
<span class="token punctuation">}</span>
<span class="token punctuation">]</span>;
const blinkTiming = <span class="token punctuation">{</span>
<span class="token key atrule">duration</span><span class="token punctuation">:</span> <span class="token number">100</span><span class="token punctuation">,</span>
<span class="token key atrule">iterations</span><span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>;
element.animate(blinkAnimation<span class="token punctuation">,</span> blinkTiming);
<span class="token punctuation">}</span>;
setTitle(text) <span class="token punctuation">{</span>
const title = this.gameContainer.querySelector('.title');
title.innerText = text;
<span class="token punctuation">}</span>;
updateLetter(letter<span class="token punctuation">,</span> state) <span class="token punctuation">{</span>
const element = this.letterContainer.querySelector(
`<span class="token punctuation">[</span>data<span class="token punctuation">-</span>letter=$<span class="token punctuation">{</span>letter<span class="token punctuation">}</span><span class="token punctuation">]</span>`
);
element.dataset.state = state;
<span class="token punctuation">}</span>;
getHighscore() <span class="token punctuation">{</span>
let highscore = Infinity;
if ('localStorage' in window) <span class="token punctuation">{</span>
highscore = window.localStorage.getItem('highscore');
<span class="token punctuation">}</span>
if (highscore) <span class="token punctuation">{</span>
highscore = parseFloat(highscore);
<span class="token punctuation">}</span> else <span class="token punctuation">{</span>
highscore = Infinity;
<span class="token punctuation">}</span>
return highscore;
<span class="token punctuation">}</span>;
setHighscore(highscore) <span class="token punctuation">{</span>
if ('localStorage' in window) <span class="token punctuation">{</span>
window.localStorage.setItem('highscore'<span class="token punctuation">,</span> highscore);
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>;
updateHighscoreText(newHighscore) <span class="token punctuation">{</span>
const highscoreContainer = this.gameContainer.querySelector(
'.highscore<span class="token punctuation">-</span>container'
);
highscoreContainer.innerText = ` <span class="token punctuation">:</span> $<span class="token punctuation">{</span>this.formatTime(newHighscore)<span class="token punctuation">}</span> `;
<span class="token punctuation">}</span>;
formatTime(time) <span class="token punctuation">{</span>
return time.toLocaleString(undefined<span class="token punctuation">,</span> <span class="token punctuation">{</span>
<span class="token key atrule">minimumFractionDigits</span><span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token key atrule">maximumFractionDigits</span><span class="token punctuation">:</span> <span class="token number">2</span>
<span class="token punctuation">}</span>);
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
const gameContainer = document.querySelector('.game<span class="token punctuation">-</span>container');
const letterContainer = document.querySelector('.letter__container');
const game = new SpeedTest(gameContainer<span class="token punctuation">,</span> letterContainer);
game.init();
>
>
>