Столкновение объектов в JavaScript...

var block = document.getElementById('test');
var left = 0;
var top1 = 0;
var right = 0;

document.onkeydown = function (event){
console.log(event);
if (event.key == 'ArrowLeft'){
left -= 20;
block.style.left = left +'px';
}
if (event.key == 'ArrowUp'){
top1 -= 20;
block.style.top = top1 +'px';
}
if (event.key == 'ArrowRight'){
left += 20;
block.style.left = left +'px';
}
if (event.key == 'ArrowDown'){
top1 += 20;
block.style.top = top1 +'px';
}
}

CSS:

* {
margin: 0;
}
body {
background-image: url(Screenshots%20for%20game/Unknown.jpeg);
}
#test {
width: 130px;
height: 100px;
background-image: url(Screenshots%20for%20game/images.png);
position: absolute;

}

HTML:












</html

HTML:














*