<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
@keyframes colChange {
0% {
color: white;
}
20% {
color: yellow;
}
40% {
color: green;
}
60% {
color: red;
}
80% {
color: darkblue;
}
100% {
color: white;
}
}
@keyframes rotate_moveLR {
0% {
transform: rotate(0deg);
left: 0px;
}
12.5% {
transform: rotate(45deg);
left: 300px;
}
25% {
transform: rotate(90deg);
left: 600px;
}
37.5% {
transform: rotate(135deg);
left: 900px;
}
50% {
transform: rotate(180deg);
left: 950px;
}
62.5% {
transform: rotate(225deg);
left: 900px;
}
75% {
transform: rotate(270deg);
left: 600px;
}
87.5% {
transform: rotate(315deg);
left: 300px;
}
100% {
transform: rotate(360deg);
left: 0px;
}
}
@keyframes rotate_moveUD {
0% {
top: -600px;
}
12.5% {
top: -400px;
}
25% {
top: -700px;
}
37.5% {
top: -300px;
}
50% {
top: 0px;
}
62.5% {
top: -400px;
}
75% {
top: -900px;
}
87.5% {
top: 0px;
}
100% {
top: -600px;
}
}
@keyframes rotate_moveUDLR {
0% {
transform: rotate(0deg);
left: 0px;
}
12.5% {
transform: rotate(45deg);
left: 300px;
}
25% {
transform: rotate(90deg);
left: 600px;
}
37.5% {
transform: rotate(135deg);
left: 900px;
}
50% {
transform: rotate(180deg);
left: 950px;
}
62.5% {
transform: rotate(225deg);
left: 900px;
}
75% {
transform: rotate(270deg);
left: 600px;
}
87.5% {
transform: rotate(315deg);
left: 300px;
}
100% {
transform: rotate(360deg);
left: 0px;
}
}
body {
background: black;
font-family: roboto;
color: white;
text-align: center;
}
#points {
animation: colChange;
animation-duration: 4s;
animation-iteration-count: infinite;
}
#scoreContainer {
animation: colChange;
animation-duration: 4s;
animation-iteration-count: infinite;
}
.divLeft-Right {
background: blue;
height: 100px;
width: 100px;
position: relative;
animation: rotate_moveLR;
animation-iteration-count: infinite;
animation-duration: 4s;
}
.divUp-Down {
left: 300px;
background: red;
height: 100px;
width: 500px;
position: relative;
animation: rotate_moveUD;
animation-iteration-count: infinite;
animation-duration: 4s;
}
.divUDLR {
background: yellow;
height: 75px;
width: 75px;
position: relative;
animation: rotate_moveUDLR;
animation-iteration-count: infinite;
animation-duration: 4s;
}
</style>
</head>
<body>
<script>
var points = 0;
while (0==0) {
points++;
document.getElementById('points').innerHTML = points;
}
function gameOver() {
this.style.background = 'black';
alert('Game Over!');
alert('You won ' + points + ' points, congratulations!');
close();
}
</script>
<h1 id="scoreContainer">Score:</h1>
<h1 id="points">0</h1>
<div id="divide_one" class="divLeft-Right" onmouseover="gameOver();"></div>
<div id="divide_two" class="divLeft-Right" onmouseover="gameOver();"></div>
<div id="divide_three" class="divLeft-Right" onmouseover="gameOver();"></div>
<div id="divide_four" class="divUp-Down" onmouseover="gameOver();"></div>
<div id="divide_eight" class="divUDLR" onmouseover="gameOver();"></div>
<div id="divide_nine" class="divUDLR" onmouseover="gameOver();"></div>
<div id="divide_ten" class="divUDLR" onmouseover="gameOver();"></div>
<div id="divide_eleven" class="divUDLR" onmouseover="gameOver();"></div>
</body>
</html>