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

Aucanon

已于 2022-04-21 20:39:06 修改

阅读量3.3k

点赞数

文章标签： html css javascript

于 2022-04-21 20:36:44 首次发布

本文链接：https://blog.csdn.net/weixin_51524737/article/details/124330974

版权

github找的项目模仿着做的
在这里插入图片描述

在这里插入图片描述

HTML代码

<body>
    <div class="setting">
        <form action="">
            <label for="">Difficulty</label>
            <select name="" class="difficulty">
            <option value="easy">easy</option>
            <option value="medium">medium</option>
            <option value="hard">hard</option>
            </select>
        </form>
    </div>

    <button class="setting-btn"><i class="iconfont icon-shezhi"></i></button>

    <div class="container">
        <h2 class="head">👩‍💻 Speed Typer 👩‍💻</h2>
        <p class="timer-container">Time left: <span class="time">0s</span></p>
        <p class="score-container">Score: <span class="score">0</span></p>
        <!-- <p>Type the following</p> -->
        <small>Type the following</small>
        <h1 class="word">drag</h1>
        <input type="text" placeholder="Type the word here... " class="text">
        <div class="end-container">

        </div>
    </div>

    <script src="script.js"></script>
</body>

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 = `
      <h1>Time ran out</h1>
      <p>Your final score is ${score_now}</p>
      <button οnclick="location.reload()">Reload</button>
    `;
    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();
    }
})

Aucanon

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
HTML+CSS+JavaScript实现打字小游戏

github找的项目模仿着做的HTML代码<body> <div class="setting"> <form action=""> <label for="">Difficulty</label> <select name="" class="difficulty"> <option value="easy">easy&lt
复制链接

扫一扫