HTML+CSS+JavaScript实现打字小游戏

github找的项目模仿着做的

HTML代码

    
"setting">
        
"">
            "">Difficulty
            "" class="difficulty">
            "easy">easy
            "medium">medium
            "hard">hard
            
        
    

    "setting-btn">"iconfont icon-shezhi">

    
"container">
        
"head">‍ Speed Typer ‍
        
"timer-container">Time left: "time">0s
        
"score-container">Score: "score">0
        
        Type the following
        
"word">drag
        "text" placeholder="Type the word here... " class="text">
        
"end-container">

        
    

    

CSS代码

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

@font-face {
    font-family: "iconfont";
    src: url('iconfont.woff2?t=1649571652476') format('woff2'), url('iconfont.woff?t=1649571652476') format('woff'), url('iconfont.ttf?t=1649571652476') format('truetype');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 24px!important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2c3e50;
    min-height: 100vh;
}

.setting {
    position: absolute;
    display: flex;
    left: 0;
    top: 0;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.3);
    height: 70px;
    width: 100%;
    transition: all .3s linear;
}

.hide {
    transform: translateY(-100%);
}

.setting label {
    color: #fff;
}

.difficulty {
    width: 200px;
    padding: 5px;
    background-color: #a7c5e3;
    -webkit-appearance: none;
    outline: none;
}

button {
    cursor: pointer;
    border-radius: 4px;
    padding: 5px 15px;
}

.setting-btn {
    position: absolute;
    bottom: 30px;
    left: 30px;
}

.container {
    background-color: #34495e;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
    color: #fff;
    position: relative;
    text-align: center;
    width: 500px;
}

.head {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 40px;
}

p {
    margin: 16px 0;
}

.timer-container {
    position: absolute;
    top: 60px;
    left: 20px;
}

.score-container {
    position: absolute;
    top: 60px;
    right: 20px;
}

.text {
    width: 300px;
    font-size: 14px;
    border-radius: 4px;
    padding: 12px 20px;
    margin-top: 10px;
}

.word {
    display: block;
}

.end-container {
    background-color: inherit;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

JavaScript代码

var settingbtn = document.querySelector('.setting-btn');
var setting = document.querySelector('.setting');
var word = document.querySelector('.word');
var score = document.querySelector('.score');
var time = document.querySelector('.time');
var endgame = document.querySelector('.end-container');
var text = document.querySelector('.text');
var difficultySelect = document.querySelector('.difficulty');

var score_now = 0;
var words = [
    'sigh',
    'tense',
    'airplane',
    'ball',
    'pies',
    'juice',
    'warlike',
    'bad',
    'north',
    'dependent',
    'steer',
    'silver',
    'highfalutin',
    'superficial',
    'quince',
    'eight',
    'feeble',
    'admit',
    'drag',
    'loving'
];
var randomWord;

var time_now = 10;

var timer = setInterval(changeTime, 1000);

var difficulty = difficultySelect.value;
difficultySelect.addEventListener('change', function() {
    difficulty = difficultySelect.value;
})

function addWord() {
    randomWord = words[Math.floor(Math.random() * words.length)];
    word.innerHTML = randomWord;
}


function changeScore() {
    score_now++;
    score.innerHTML = score_now;
}

function changeTime() {
    time_now--;
    time.innerHTML = time_now + 's';
    if (time_now === 0) {
        clearInterval(timer);
        gameOver();
    }
}
addWord();

function gameOver() {
    endgame.innerHTML = `
      
Time ran out
      
Your final score is ${score_now}
      Reload
    `;
    endgame.style.display = 'flex';
}
settingbtn.addEventListener('click', () => setting.classList.toggle('hide'));

text.addEventListener('input', function() {
    var insertText = text.value;
    if (insertText === randomWord) {
        addWord();
        changeScore();
        if (difficulty === 'easy') {
            time_now += 5;
        } else if (difficulty === 'medium') {
            time_now += 3;
        } else if (difficulty === 'hard') {
            time_now += 2;
        }
        text.value = '';
        changeTime();
    }
})