I'm in the process of creating a Pacman ghost using visual 2D arrays. I would like the ghost to move similar to this: https://i.sstatic.net/KPmUt.gif
I am considering implementing CSS transitions for the movement, but I'm unsure about how to do it! If there's a way to achieve this using JavaScript, that would also be very helpful. Below is my code:
<!doctype html>
<html>
<head>
<title>Visualizing 2D arrays</title>
<style>
#stage {
position:relative;
}
.cell {
position:absolute;
width:30px;
height:30px;
border:1px solid black;
background-color:black;
}
</style>
</head>
<body>
<div id="stage"></div>
<script>
// JavaScript code goes here...
</script>
</body>
</html>
Any guidance on achieving the desired movement effect would be greatly appreciated!