<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CodePen - Alphabet Speed Test </title> <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> <style> *, *::before, *::after { box-sizing: border-box; } html { font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; } body { align-items: center; background-color: #b24592; background-image: linear-gradient(166deg, blueviolet, darkcyan); display: flex; justify-content: center; margin: 0; min-height: 100vh; padding: 0; } .container { background-color: rgba(255, 255, 255, 0.25); border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15); max-width: 700px; padding: 2rem 3rem; width: 90%; } .game-container[data-state="pre-game"] .timer { opacity: 0; } .game-container[data-state="pre-game"] .restart-button, .game-container[data-state="pre-game"] .restart-button:hover, .game-container[data-state="pre-game"] .restart-button:focus { background-color: #fff; color: #333; opacity: .6; } .highscore-container { font-size: .9rem; margin: 1rem 0; } .timer { margin: 1rem 0; transition: opacity .1s ease-in-out; } .letter__container { display: flex; flex-wrap: wrap; margin-left: -.25rem; width: calc(100% + .5rem); } .letter { --background-color: rgba(255, 255, 255, .4); background-color: var(--background-color); border-radius: 3px; color: #333; display: block; font-size: 1.5rem; height: 2em; line-height: 2em; margin: .25rem; overflow: hidden; position: relative; text-align: center; text-transform: uppercase; width: 2em; } .letter[data-state=active]::before { transform: scaleX(1); } .letter::before { background-color: #fff; bottom: 0; content: ''; left: 0; position: absolute; right: 0; top: 0; transform: scaleX(0); transform-origin: 0 center; transition: transform .1s ease-in-out; } .letter::after { content: attr(data-letter); position: relative; } .letter--template { display: none; } .restart-button__container { margin-top: 2rem; text-align: center; } .restart-button { background-color: #fff; border: 0; border-radius: 6px; color: #333; cursor: pointer; font-family: inherit; font-size: 1rem; padding: .5rem 2rem; transition: background-color .15s ease-in-out; } .restart-button:hover, .restart-button:focus { background-color: #f15f79; color: #ffffff; } </style> </head> <body> <div class="container"> <div class="game-container" data-state="pre-game"> <h1 class="title"></h1> <div class="highscore-container"></div> <div class="letter__container"> <div class="letter letter--template" data-state="inactive"></div> </div> <div class="restart-button__container"> <button class="restart-button" type="button">再玩一次</button> </div> </div> </div> <script> const GameState = { PRE_GAME: 'pre-game', RUNNING: 'running', POST_GAME: 'post-game' }; const LetterState = { ACTIVE: 'active', INACTIVE: 'inactive' }; class SpeedTest { constructor(gameContainer, letterContainer) { this.letters = []; this.remainingLetters = []; 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); }; init(restart) { const availableLanguages = ['en', 'nb', 'nn', 'no']; const preferredLanguage = SpeedTest.getPreferredLanguage(availableLanguages); this.letters = SpeedTest.getLetters(preferredLanguage); this.remainingLetters = this.letters; this.highscore = this.getHighscore(); if (this.highscore && this.highscore !== Infinity) { this.updateHighscoreText(this.highscore); } const letterTemplate = this.letterContainer.querySelector( '.letter--template' ); this.setTitle('按键盘上的A键启动，按空格键重新启动'); this.renderLetters(letterTemplate); if (!restart) { this.addEventListeners(); this.getHighscore(); } }; static getPreferredLanguage(langs) { const defaultLang = 'en'; const navgLangs = navigator.languages; const preferredLang = navgLangs.filter(lang => langs.indexOf(lang) > -1)[0]; return preferredLang || defaultLang; }; static getLetters(preferredLang) { let letters = []; switch (preferredLang) { case 'nb': case 'nn': case 'no': letters = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'æ', 'ø', 'å' ]; break; default: letters = [ 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z' ]; break; } return letters; }; renderLetters(template) { let letterElement; this.letters.forEach((letter, index) => { letterElement = template.cloneNode(true); letterElement.classList.remove('letter--template'); letterElement.dataset.letter = letter; letterElement.dataset.index = index; this.letterContainer.appendChild(letterElement); }); // this.letterContainer.removeChild(template); }; addEventListeners() { document.addEventListener('keydown', this.onKeyDown, false); const restartButton = this.gameContainer.querySelector('.restart-button'); restartButton.addEventListener('click', this.restartGame, false); }; onKeyDown(event) { if (event.key === ' ') { this.restartGame(); } else if (this.remainingLetters[0].toUpperCase() === event.key.toUpperCase()) { if (this.state === GameState.PRE_GAME) { this.startGame(); } this.updateLetter(this.remainingLetters[0], LetterState.ACTIVE); this.remainingLetters = this.remainingLetters.slice(1); if (this.remainingLetters.length === 0) { this.stopGame(); } else if (this.remainingLetters.length < this.letters.length / 5) { this.setTitle('只剩下几个了，继续！'); } else if (this.remainingLetters.length < this.letters.length / 2) { this.setTitle('过半了!'); } } else { const nextLetterElement = this.letterContainer.querySelector( `[data-state=${LetterState.INACTIVE}]` ); this.wrongLetter(nextLetterElement); } }; startGame() { this.gameContainer.dataset.state = GameState.RUNNING; this.state = GameState.RUNNING; this.setTitle('GO GO GO'); this.startTimer(); }; stopGame() { const t2 = this.stopTimer(); const t1 = this.timer; this.gameContainer.dataset.state = GameState.POST_GAME; this.state = GameState.POST_GAME; let time = t2 - t1; time /= 1000; const timeString = this.formatTime(time); let newTitle = `您完成了! ✨ 时间是 ${timeString} 秒!`; if (this.highscore === null || time < this.highscore) { newTitle += ' 新纪录!'; this.highscore = time; this.updateHighscoreText(time); this.setHighscore(time); } this.setTitle(newTitle); }; restartGame() { this.state = GameState.PRE_GAME; this.gameContainer.dataset.state = GameState.PRE_GAME; const letterElements = this.letterContainer.querySelectorAll('[data-letter]'); for (let i = 0; i < letterElements.length; i++) { this.letterContainer.removeChild(letterElements[i]); } this.init(); }; startTimer() { this.timer = performance.now(); }; stopTimer() { return performance.now(); }; wrongLetter(element) { if (!('animate' in element)) { return; } const styles = getComputedStyle(element); const backgroundColor = styles.getPropertyValue('--background-color'); const errorRed = '#f15f79'; const blinkAnimation = [ { ['--background-color']: backgroundColor }, { ['--background-color']: errorRed }, { ['--background-color']: backgroundColor } ]; const blinkTiming = { duration: 100, iterations: 1 }; element.animate(blinkAnimation, blinkTiming); }; setTitle(text) { const title = this.gameContainer.querySelector('.title'); title.innerText = text; }; updateLetter(letter, state) { const element = this.letterContainer.querySelector( `[data-letter=${letter}]` ); element.dataset.state = state; }; getHighscore() { let highscore = Infinity; if ('localStorage' in window) { highscore = window.localStorage.getItem('highscore'); } if (highscore) { highscore = parseFloat(highscore); } else { highscore = Infinity; } return highscore; }; setHighscore(highscore) { if ('localStorage' in window) { window.localStorage.setItem('highscore', highscore); } }; updateHighscoreText(newHighscore) { const highscoreContainer = this.gameContainer.querySelector( '.highscore-container' ); highscoreContainer.innerText = `个人最佳: ${this.formatTime(newHighscore)} 秒`; }; formatTime(time) { return time.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }); } } const gameContainer = document.querySelector('.game-container'); const letterContainer = document.querySelector('.letter__container'); const game = new SpeedTest(gameContainer, letterContainer); game.init(); </script> </body> </html>
