January 30th 2018
Hello! I have finished the JavaScript_30days course today, and I can say it was really fun. I learned a lot and have a few ideas too how to build on the projects that we made. The thing we made today was a Whack a mole. We needed to create a random time and random hole counter to tell the program when to pop up the moles.
return Math.round(Math.random() * (max-min) + min);
This is basic code, but it is important because it is used very often. We also have to set randomHole function to get a hole from the DOM. In a function called peep we add a classList to the hole which will call the css class up to make the mole appear, and later also remove it.
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp)peep(); //stop the code from running
}, time)
We have create a variable earlier timeUp and set it to false. In the startGame() function we tell that if the timeUp is up so true, in other words a particular time passes, it ends the game.
setTimeout(() => timeUp = true, 10000);
And finally there is a bonk() function that counts the number of times you hit the mole and adds it to the scoreboard.
score++;
this.classList.remove('up');
scoreBoard.textContent = score;
Of course it is attached to an event listener “click”.
In the CSS grid course we did grid-auto-flow: it makes all the different items fit nicely even if they are not of the size.
In the Web Development Bootcamp we did a nice score keeper program that keeps tracks of how many times you click on a button and you can also reset the score, as well as change the score you have to reach. This was a great example of how to use the DOM to get the elements from the html and use them in functions as well as listen to them.
if (!gameOver) {
p1Score++; //we add 1 to score
if(p1Score === winningScore) {
p1Display.classList.add("winner");
gameOver = true; //this will prevent us
//from adding more to the score
}
p1Display.textContent = p1Score;
This is how we keep track of the score and add it to the page.
numInput.addEventListener("change", function() {
winningScoreDisplay.textContent = this.value;
winningScore = Number(this.value);
reset(); // it resets in the game
});
With the this.value we can takethe value from the input box where we can see different high score.
We also have to turn the value into a number (because before it is a string).
Cheers!