<!DOCTYPE html>
<html>
<head>
<title>Australian Animals</title>
<style>
#frame {
height: 500px;
width: 500px;
border: 10px solid green;
position: relative;
overflow: hidden;
}
#emoji {
font-size: 50px;
position: absolute;
top: 0;
left: 0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
</style>
</head>
<body>
<div id="frame"></div>
<script>
var emojis = ["\uD83D\uDC3F", "\uD83D\uDC05", "\uD83D\uDC28"];
var interval = 2000;
var count = 1;
function getRandomEmoji() {
var index = Math.floor(Math.random() * emojis.length);
return emojis[index];
}
function createEmoji() {
var emoji = document.createElement("div");
var top = Math.floor(Math.random() * 450);
var left = Math.floor(Math.random() * 450);
emoji.innerHTML = getRandomEmoji();
emoji.setAttribute("id", "emoji" + count);
emoji.setAttribute("class", "emoji");
emoji.style.top = top + "px";
emoji.style.left = left + "px";
document.getElementById("frame").appendChild(emoji);
count++;
animateEmoji(emoji);
}
function animateEmoji(emoji) {
var x = Math.floor(Math.random() * 5) + 1;
var y = Math.floor(Math.random() * 5) + 1;
var top = parseInt(emoji.style.top);
var left = parseInt(emoji.style.left);
var width = parseInt(getComputedStyle(emoji).getPropertyValue("font-size"));
var height = parseInt(getComputedStyle(emoji).getPropertyValue("font-size"));
var frameTop = parseInt(document.getElementById("frame").style.top);
var frameLeft = parseInt(document.getElementById("frame").style.left);
var frameBottom = frameTop + parseInt(document.getElementById("frame").clientHeight);
var frameRight = frameLeft + parseInt(document.getElementById("frame").clientWidth);
if (top + y + height > frameBottom || top + y < frameTop) {
y = -y;
}
if (left + x + width > frameRight || left + x < frameLeft) {
x = -x;
}
emoji.style.top = top + y + "px";
emoji.style.left = left + x + "px";
setTimeout(function() {
animateEmoji(emoji);
}, 30);
}
setInterval(function() {
createEmoji();
}, interval);
</script>
</body>
</html>
