JSFiddle - React, Tailwind, and code Playground

by Tan

HTML

<div class="canvas">
<div class="ball" id="ball" style="top:200px;left:200px;" onmouseover="move()">

</div>
</div>

<div id="top_num">200</div>
<div id="left_num">200</div>

CSS

.canvas {width:500px;height:400px; background-color:#eeeeee;position:relative;}
.ball {width:20px;height:20px;position:absolute;background-color:blue;}

JavaScript

function move() {

var rando = Math.floor(Math.random() * 4) + 1;
var ball = document.getElementById('ball');
var top = document.getElementById('top_num');
var left = document.getElementById('left_num');

if (rando == 1) {var topNum = (Number(top.innerHTML) - 20); top.innerHTML = topNum;
var leftNum = left.innerHTML;}
if (rando == 2) {var leftNum = (Number(left.innerHTML) + 20); left.innerHTML = leftNum;
var topNum = top.innerHTML;}
if (rando == 3) {var topNum = (Number(top.innerHTML) + 20); top.innerHTML = topNum;
var leftNum = left.innerHTML;}
if (rando == 4) {var leftNum = (Number(left.innerHTML) - 20); left.innerHTML = leftNum;
var topNum = top.innerHTML;}

ball.style = "top:" + topNum + "px;left:" + leftNum + "px;";

}