<!-- doctype html -->
<html>
<head>
<title>
MyGame
</title>
<link href="MyGame.css" type="text/css" rel="stylesheet">
</head>
<body>
<center>
<font face="arial" color="White" size="7">
Black'n
<font face="arial" color="Black" size="7">
White
</font>
</center>
<script>
var pixel = 2;
//document.getElementsByTagName('body')[0].innerHTML += '<div id="box1"></div> ';
var box1 = document.createElement("div");
box1.id = "box1"
document.getElementsByTagName('body')[0].appendChild(box1);
box1.style.position = 'absolute';
//box1.style.top = oben+'px';
var elm = document.getElementById('box1')
document.body.addEventListener('keydown', function(e) {
var taste = e.keyCode;
if (taste == 40) {
var ab = getAbsoluteY(elm)
var e = ab + pixel;
box1.style.top = e + 'px';
}
if (taste == 38) {
var ab = getAbsoluteY(elm)
var e = ab - pixel;
box1.style.top = e + 'px';
}
if (taste == 39) {
var ab = getAbsoluteX(elm)
var e = ab + pixel;
box1.style.left = e + 'px';
}
if (taste == 37) {
var ab = getAbsoluteX(elm)
var e = ab - pixel;
box1.style.left = e + 'px';
}
document.getElementById('box1').innerHTML = e;
});
function getAbsoluteX(elm) {
var x = 0;
if (elm && typeof elm.offsetParent != "undefined") {
while (elm && typeof elm.offsetLeft == "number") {
x += elm.offsetLeft;
elm = elm.offsetParent;
}
}
return x;
}
// Findet die absolute y Position eines Elementes raus
function getAbsoluteY(elm) {
var y = 0;
if (elm && typeof elm.offsetParent != "undefined") {
while (elm && typeof elm.offsetTop == "number") {
y += elm.offsetTop;
elm = elm.offsetParent;
}
}
return y;
}
</script>
</body>
</html>
CSS
body {
animation:pulse 30s infinite;
}
@keyframes pulse {
0% {background-color:white}
25% {background-color:black}
50% {background-color:white}
75% {background-color:black}
100% {background-color:white}
}
canvas {
border:1px solid #d3d3d3;
background-color: #f1f1f1;
}
#box1 {
width: 50px;
height: 50px;
background: black;
border: 10px solid black;
border-radius: 50%;
}