JSFiddle - React, Tailwind, and code Playground

by tara5

HTML

<div id='box'></div>

CSS

#box {
    height: 30px;
    position: absolute;
    width: 30px;
    background-color: red;
}

JavaScript

var box = {
	setX: function(velocity) {
    	this.x += velocity;
    },
    setY: function(velocity) {
    	this.y += velocity;
    },
    render: function() {
    	this.el.style.left = this.x + "px";
      this.el.style.top = this.y + "px";
    },
	x: 10,
  y: 0,
	el: document.getElementById("box")
};

var safeGuard = 0,
	pause = false,
	modifier = 1,
	timePerFrame = 1000/60, // ms
	currentTime,
    frameDelta = 0,
	timeOfLastUpdate = Date.now(),
    delta;
    
function render() {
	box.render();
};

function update(d) {
	  if (box.x <= 10) {
    	modifier = 1;
    } 

	  if (box.x >= 200) {
      box.setY((0.08 * d) * modifier)
    } else if (box.y <= 10) {
    	box.setX((0.08 * d) * modifier);
    }
    
    if (box.y >= 200) {
  		  modifier = -1;
        box.setX((0.08 * d) * modifier);
    }
    
    if (box.y >= 10 && box.x <= 10) {
    	modifier = -1;
      box.setY((0.08 * d) * modifier)
    }
};

function gameLoop() {
	if (!pause) {
    	currentTime = Date.now();
        delta = currentTime - timeOfLastUpdate;
        frameDelta += delta;
        timeOfLastUpdate = currentTime;

        while (frameDelta >= timePerFrame) {
            update(timePerFrame);
            frameDelta -= timePerFrame;
        }
        render();
    } else {
    	timeOfLastUpdate = Date.now();
    }
	
}

box.el.onclick = function() {
	pause = !pause;
}

var timeout = setInterval(gameLoop);