In this lab, I followed the instruction from JavaScript30 and recreated the Wack-a-mole activity. First off, I made the HTML, CSS, and JavaScript files. Secondly, the <html>, <head>, <body>, <meta>, and <title> tags were already inserted in the HTML file. Thirdly, I typed in <link rel="stylesheet" type="text/css" href="Lab_44.css"> inside the <head> tags to link the CSS file with my HTML file. Fourthly, I typed in <script src="Lab_44.js" type="text/javascript"></script> inside the <body> tags which linked my JavaScript file with my HTML file. Inside the <body> tags, I typed the heading for the lab which has my name, date, and lab number with <div id="heading"><h1>Lab 44</h1><h2>Wei Jian Zhen</h2><h3>12/24/2019</h3></div>. After that, I typed in <h1> tags and inside those tags I put "Wack-a-mole" for text and <span class="score">0</span>. Next, I typed <button onClick="startGame();">Start!</button> for a start button. Afterwords, I typed in <p id="end"><b>Game Over!</b></p> which bolds the text shown when the game has ended. Then I typed in <div class="game"></div> and inside those div tags, I typed in multiple divs for the Wack-a-mole game. Lastly I typed in a legal notice via <p id="txt">Images from <a href="http://clipart-library.com/">http://clipart-library.com/</a></p> to cite the images used from clipart-library.com. Lastly, I made the copyright notice with <p> and <div> tags. For the CSS, I typed in html {width: 100%; height: auto;} body {background-color: #00FFA8; min-width: 100%; min-height: 100%;} to make the webpage responsive to screen size changes. I typed in #heading {text-align: center; font-size: 16px;} to center the heading of the lab. #txt {text-align: center;} to center the legal notice text. #end {display: none; font-size: 24px;} to hide the text that displays when the Wack-a-mole game ends and increase the font size of it. .score {background: rgba(255,255,255,0.2); padding: 0 3rem; line-height: 1; border-radius: 1rem;} to highlight the score that the player got in the game. .game {width: 600px; height: 400px; display: flex; flex-wrap: wrap; margin: 0 auto;} to give the game a defined size. .hole {flex: 1 0 33.33%; overflow: hidden; position: relative;} .hole:after {display: block; background: url("1798891.gif") bottom center no-repeat; background-size: contain; content: ''; width: 100%; height:70px; position: absolute; z-index: 2; bottom: -30px;} .mole {background: url("2044864.png") bottom center no-repeat; background-size: 60%; position: absolute; top: 100%; width: 100%; height: 100%; transition:all 0.4s;} .hole.up .mole {top: 0;} to position where the holes and the mole were going to be. For the JavaScript, I typed in:
const holes = document.querySelectorAll('.hole');
const scoreBoard = document.querySelector('.score');
const moles = document.querySelectorAll('.mole');
let lastHole;
let timeUp = false;
let score = 0;
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
const idx = Math.floor(Math.random() * holes.length);
const hole = holes[idx];
if (hole === lastHole) {
console.log('Ah nah thats the same one bud');
return randomHole(holes);
}
lastHole = hole;
return hole;
}
function peep() {
const time = randomTime(200, 1000);
const hole = randomHole(holes);
hole.classList.add('up');
setTimeout(() => {
hole.classList.remove('up');
if (!timeUp) {
peep();
document.getElementById("end").style.display = "none";
} else if (timeUp) {
document.getElementById("end").style.display = "block";
}
}, time);
}
function startGame() {
scoreBoard.textContent = 0;
timeUp = false;
score = 0;
peep();
setTimeout(() => timeUp = true, 10000)
}
function bonk(e) {
if(!e.isTrusted) return; // cheater!
score++;
this.parentNode.classList.remove('up');
scoreBoard.textContent = score;
}
moles.forEach(mole => mole.addEventListener('click', bonk));
This JavaScript makes the game functional by making the game be animated and shows the text before and after the game. Knowing how to use JavaScript is useful to a web designer because it allows web designers to make website functional and implement games into their website.
Link:
http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_44/Lab_44.html
No comments:
Post a Comment