JSFiddle - React, Tailwind, and code Playground

by carsont

HTML

<div id="container">
  <div id="character">
  </div>
  <div id="imaginaryBullet">
  </div>
</div>

CSS

#container {
  position: relative;
  height: 933px;
  width: 1653px;
  outline: 2px solid black;
}
#character {
  position: absolute;
  height: 50px;
  width: 50px;
  outline: 2px solid black;
  background-color: #FF6600;
  left: 0;
  top: 0;
}
#imaginaryBullet {
  position: absolute;
  top: 450px;
  left: 810px;
  height: 5px;
  width: 40px;
  background-color: #00FFFF;
  border: 1px solid black;
}

JavaScript

var imaginaryBullet = document.getElementById('imaginaryBullet');
        var imaginaryBulletLeft = 810;
        var imaginaryBulletTop = 450;
        var characterLeft = 0;
        var characterTop = 0;
        var imaginaryBulletBounce = 1;
        var switchStuff = [imaginaryBulletBounce % 2 == 0, imaginaryBulletBounce % 2 == 1]


  //making the imaginaryBullet move.


// Creating the bonuce effect
if (imaginaryBulletLeft <= 0) {
  imaginaryBulletBounce++;
}


if (imaginaryBulletLeft <= 0) {
  imaginaryBulletBounce++;
}


if (imaginaryBulletLeft >= 1600) {
  imaginaryBulletBounce++;
}


if (imaginaryBulletTop <= 0) {
  imaginaryBulletBounce++;
}

if (imaginaryBulletTop >= 920) {
  imaginaryBulletBounce++;
}


switch (switchstuff) {
  case 1:
    window.setInterval(moveImaginaryBullet, 10);
  case 2:
    window.setInterval(moveImaginaryBullet2, 10);
}




function moveImaginaryBullet2() {
  imaginaryBulletLeft -= imaginaryBulletBounce;
  imaginaryBulletTop -= imaginaryBulletBounce;
  imaginaryBullet.style.left = imaginaryBulletLeft + 'px';
  imaginaryBullet.style.top = imaginaryBulletTop + 'px';
}


function moveImaginaryBullet() {
  imaginaryBulletLeft += imaginaryBulletBounce;
  imaginaryBulletTop += imaginaryBulletBounce;
  imaginaryBullet.style.left = imaginaryBulletLeft + 'px';
  imaginaryBullet.style.top = imaginaryBulletTop + 'px';
}