112 lines
3.2 KiB
HTML
112 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>The Raid by Sarimoko</title>
|
|
<meta name="author" content="Sarimoko by Travis Reames">
|
|
<meta name="description" content="A landing page to redirect people to Sarimoko's Discord server!">
|
|
<meta name="keywords" content="sarimoko, sari, moko, sariboto, boto, raid, discord">
|
|
<link rel="icon"
|
|
type="image/png"
|
|
href="https://en.gravatar.com/userimage/208570096/d7e3f1a8a1358a94a6a45ada4e2d7d51.png">
|
|
<meta http-equiv="Refresh" content="7; url=https://www.streamraiders.com/game/" />
|
|
<style type="text/css">
|
|
.ant {
|
|
position:absolute;
|
|
background-image:url("https://ianparberry.files.wordpress.com/2013/02/antwalk.gif");
|
|
background-size: cover;
|
|
}
|
|
|
|
.raid-logo {
|
|
display:block;
|
|
margin:auto;
|
|
margin-top:50px;
|
|
}
|
|
|
|
html,body {
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
html {
|
|
overflow:hidden;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<span class="ant"></span>
|
|
<span class="ant"></span>
|
|
<span class="ant"></span>
|
|
<span class="ant"></span>
|
|
<span class="ant"></span>
|
|
<img src="https://seeklogo.com/images/R/raid-logo-AAA5EC6038-seeklogo.com.png" class="raid-logo"/>
|
|
<script>
|
|
var mouseCoords = {x:1,y:1}; // current mouse position
|
|
var antSpeed = 100; // ant speed in pixels per second
|
|
var antSize = 30; // ant size in pixels
|
|
var lastUpdate = 0; // time of last animation update
|
|
|
|
var body = document.getElementsByTagName('body')[0];
|
|
var ants = document.getElementsByClassName('ant'); // get ant elements
|
|
|
|
// random position each ant and set size
|
|
for (var i = 0; i < ants.length; i++) {
|
|
randomPositionAnt(ants[i]);
|
|
ants[i].style.height = antSize + "px";
|
|
ants[i].style.width = antSize + "px";
|
|
}
|
|
|
|
// randomly position ant at edge of screen
|
|
function randomPositionAnt(ant) {
|
|
if (Math.random() < 0.5) {
|
|
ant.xLoc = 0;
|
|
} else {
|
|
ant.xLoc = body.clientWidth;
|
|
}
|
|
ant.yLoc = Math.random() * body.clientHeight;
|
|
};
|
|
// return true if distance between ant and cursor is less than 10 pixels
|
|
function isAntTouchingCursor(ant) {
|
|
return Math.sqrt((ant.xLoc - mouseCoords.x) * (ant.xLoc - mouseCoords.x) + (ant.yLoc - mouseCoords.y) * (ant.yLoc - mouseCoords.y)) < 10;
|
|
}
|
|
// set up mouse cursor listening
|
|
window.addEventListener('mousemove', function(data){
|
|
mouseCoords.x = data.clientX;
|
|
mouseCoords.y = data.clientY;
|
|
});
|
|
// function to call each animation cycle
|
|
function update() {
|
|
requestAnimationFrame(update);
|
|
var updateTime = new Date().getTime();
|
|
var timeDiff = (Math.min(100, Math.max(updateTime - lastUpdate, 0))) / 1000;
|
|
lastUpdate = updateTime;
|
|
|
|
for (var i = 0; i < ants.length; i++) {
|
|
var ant = ants[i];
|
|
|
|
var xDiff = mouseCoords.x - ant.xLoc;
|
|
var yDiff = mouseCoords.y - ant.yLoc;
|
|
var multi = Math.sqrt(Math.pow(xDiff, 2) + Math.pow(yDiff, 2));
|
|
var xSpeed = xDiff / multi * antSpeed;
|
|
var ySpeed = yDiff / multi * antSpeed;
|
|
var rotation = (180 * Math.atan2(yDiff, xDiff) / Math.PI) - 180;
|
|
|
|
ant.xLoc += xSpeed * timeDiff;
|
|
ant.yLoc += ySpeed * timeDiff;
|
|
|
|
if (isAntTouchingCursor(ant)) {
|
|
randomPositionAnt(ant);
|
|
}
|
|
|
|
ant.style.left = (ant.xLoc - (antSize / 2)) + "px";
|
|
ant.style.top = (ant.yLoc - (antSize / 2)) + "px";
|
|
ant.style.transform = "rotate(" + rotation + "deg)";
|
|
};
|
|
|
|
}
|
|
|
|
update();
|
|
</script>
|
|
</body>
|
|
</html> |