document.onkeydown = arrowKey; let transformStatus = "rotate(0deg)"; function getOffset(el) { const rect = el.getBoundingClientRect(); return { left: rect.left + window.scrollX, top: rect.top + window.scrollY }; } let position = "north"; let hitCounter = 0; function arrowKey(e) { let fromTop = parseInt(document.getElementById("guy").style.top); let fromLeft = parseInt(document.getElementById("guy").style.left); if(!e.keyCode){ e = {"keyCode": parseInt(e)}; } switch(e.keyCode) { //right arrow case 39: if(transformStatus == "rotate(90deg)"){ // do this when guy does not change orientation document.getElementById("guy").style.left = fromLeft + 20 +"px"; }else{ //do this when guy changes orientation removeBullets(); } document.getElementById("guy").style.transform = "rotate(90deg)"; position = "east"; break; //up arrow case 38: if(transformStatus == "rotate(0deg)"){ // do this when guy does not change orientation document.getElementById("guy").style.top = fromTop - 20 +"px"; }else{ //do this when guy changes orientation removeBullets(); } document.getElementById("guy").style.transform = "rotate(0deg)"; position = "north"; break; //down arrow case 40: if(transformStatus == "rotate(180deg)"){ // do this when guy does not change orientation document.getElementById("guy").style.top = fromTop + 20 +"px"; }else{ //do this when guy changes orientation removeBullets(); } document.getElementById("guy").style.transform = "rotate(180deg)"; position = "south"; break; //left arrow case 37: if(transformStatus == "rotate(270deg)"){ // do this when guy does not change orientation document.getElementById("guy").style.left = fromLeft - 20 +"px"; }else{ //do this when guy changes orientation removeBullets(); } document.getElementById("guy").style.transform = "rotate(270deg)"; position = "west"; break; //spacebar case 32: var x = getOffset( document.getElementById('guy')).left+30; var y = getOffset( document.getElementById('guy')).top+30; var dot = document.createElement("div"); dot.className = "dot"; dot.style = `left: ${x}px; top: ${y}px;`; document.getElementById("body").appendChild(dot); setTimeout(moveBullet, 100); break; default: // code block } transformStatus = document.getElementById("guy").style.transform; } //decide which way the bullet should move based on "guy" orientation function moveBullet(){ let dotsArray = document.getElementsByClassName("dot"); let x = transformStatus; switch(x) { case "rotate(90deg)": for(i=0;i= parseInt(guyPositionY)){ // covids[i].parentNode.removeChild(covids[i]); setTimeout(removeCovids(covids[i]), 1000); hitCounter++ } } break; case "east": for(i=0;i= parseInt(guyPositionX)){ // covids[i].parentNode.removeChild(covids[i]); setTimeout(removeCovids(covids[i]), 1000); hitCounter++ } } break; case "west": for(i=0;i 0) elements[0].remove(); } function covidSpread(){ var covid = document.createElement("div"); covid.classList.add("covid"); covid.style.backgroundColor = "#"+Math.floor(Math.random()*1000); covid.style.top = Math.floor(Math.random()*window.innerHeight)+"px"; covid.style.left = Math.floor(Math.random()*window.innerWidth)+"px"; var body = document.getElementById("body"); body.appendChild(covid); let covids = document.getElementsByClassName("covid"); for(i=0;i5){ covids[i-2].parentNode.removeChild(covids[i-2]); } } setTimeout(covidSpread, 2000); document.getElementById("hitCounter").innerHTML = hitCounter; }

Covid-19 Blaster (Desktop Game)