Simple Vanilla JS typing game-- need help

Simple Vanilla JS typing game-- need help
0
#1

Hi Yall I found this really neat typing game tutorial on Youtube (Travesty Media) and the challenges was to add more stuff to it. So I decided that I wanted to set the difficulty by seconds (I.E Easy = 5 Medium= 3 Hard =2). And I’m kinda stuck. I still have problems with Javascript and I know I need to add eventlisteners to these buttons i just don’t know how to go about it. I have an object for the levels so I want to see if I can someone get these button to work based off that object.

Any help would be great!. I’m just really stumped.

HTML:

One Piece WordBeater

One Piece Word Beater

Current Level:

Type the Given Word Within 5 Seconds.

luffy

High Score:

Time left: 0

Score: 0

Instructions

Type each word in the given amount of seconds to score. To play again, just type the current word. Your score will reset

Select the Difficulty
Easy Medium Hard
</body>

JavaScript:

window.addEventListener(‘load’, init);

// global Varibales

//Avaible levels
const levels = {
easy: 5,
medium: 3,
hard: 2,
}

//to cchange level
const currentLevel = levels.easy;

let time = currentLevel;
let score = 0;
let isPLaying;//initalzies game…true if game is on false if game is off

//DOM Elements
const wordInput = document.querySelector(’#word-input’);
const currentWord = document.querySelector(’#current-word’);
const scoreDisplay = document.querySelector(’#score’);
const timeDisplay = document.querySelector(’#time’);
const message = document.querySelector(’#message’);
const seconds = document.querySelector(’#seconds’);
const levelDisplay = document.querySelector(’#levels’);

const words = [
‘luffy’,
‘zoro’,
‘shanks’,
‘nami’,
‘brook’,
‘chooper’,
‘sanji’,
‘franky’,
‘jinbe’,
‘carrot’,
‘pekoms’,
‘ace’,
‘sabo’,
‘robin’,
‘bellamy’,
‘crocodile’,
‘merry’,
‘yonko’,
‘camie’,
‘nefertari’,
‘raizo’,
‘momo’,
‘law’,
‘dracule’,
‘boa’,
‘buggy’,
‘golroger’,
‘bigmom’,
‘smoker’,
‘kaido’
];

//initialize Game

function init() {
//Show number of seconds
seconds.innerHTML = currentLevel;
//load a word from array
showWord(words);
//Start Matching on word input
wordInput.addEventListener(‘input’, startMatch);
//Call countdown every second
setInterval(countdown, 1000);
//Check status
setInterval(checkStatus, 50)
}

//level Buttons
//Easy Mode
document.getElementById(‘easy’).addEventListener(‘click’, easyMode);
function easyMode(levels) {

}

//Start Match

function startMatch() {
if(matchWords()){
isPLaying = true;
time = currentLevel + 1;
showWord(words);
wordInput.value=’’;
score++;
}

//if score negative -1 display 0
if(score === -1){
    scoreDisplay.innerHTML = 0;
}else{
    scoreDisplay.innerHTML = score;
}

}

//Match Current Word to word imput

function matchWords() {
if(wordInput.value === currentWord.innerHTML) {
message.innerHTML = ‘Correct!!!’;
return true;
} else {
message.innerHTML = ‘’;
return false;
}
}

//Pick & Show random word
function showWord(words) {
//Generate random array index
const randIndex = Math.floor(Math.random() * words.length);
//Output random word
currentWord.innerHTML = words[randIndex];
}
//Countdown Timer
function countdown() {
//Make sure time is not run out
if(time > 0) {
//Decrease time
time–;
}else if(time === 0) {
//Game Over
isPLaying = false;
}
//Show time
timeDisplay.innerHTML = time;
}

//Check game Status
function checkStatus() {
if(!isPLaying && time === 0){
message.innerHTML = ‘Game Over!!’;
score = -1;
}
}

0 Likes