JSFiddle - React, Tailwind, and code Playground
HTML
<html><head></head><body><img id="paleta1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAABLCAYAAAB5ugdVAAAABmJLR0QA/wD/AP+gvaeTAAAACXBI
WXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH2AMBESox7vQsAgAAA5ZJREFUWMPtmElMk0EYhgkuiQhq
jPsWV6IXEogY5QChVQRcWUSpK2hqoSCIWCOLsohECqVlKbUihGoXqsVStW7Rg2JMgJDQKBricvBi
PBjDQRMTeZ35S2tLS4W2HFT+5Mtk/uk8M987b/70Gx+fYU+4ry9oxMzxYyJ2qOUvDmDCx9VjmZww
3Rz7Zk1FcdAKiEPXonbDOtcQ28n0R7yF/shZORel6wPRFMfG1d0sCEPWOIdYJicFTEbWslnIXz0f
hWsXozh4FYTsDahNjMaVlCQ0pyRCygpF5tKZyFgyA3YA9pRJ4JAtc+f7oYCsLN2yEbKErVDwj0B5
OgOac7lQC9JxJW4LTq1ZgKzls2G3eqK/eeulZGX51jA07mLh2uF4qDJTcOO8AHqJEIaaCtw8kWKv
x/Dcy4lojZs3QrUnGmrODugKTsJAJt/TqmGUS6BNTXAEWCYXkdzlESFo5WxHa/I26Mjq7aIyGJUt
eKBvY8LYILKDjAwgoS/MgUEqglGl+CsA86ZBELiIGVDER/0GVJVZAbSlfTpmBQQHrcQm0onfGQZu
agzO5e2HvCYTyqZcGNuK8cRYjt6ea3jzWs20tC+XnkCeYC+SkyJcAx4aSvD04SX0m+QMoM+kNQPI
eEkex0uA0JBARIQHIfVQFGpEPLS3FjJbp5Pfm67iQ18zBr8ZMTj4gkQPvn6+g86n1aiu4CKdG+tl
AH05MqCHhAkDX+4zAKko3QygGlDAIQ6LeWkB0FxHBaA7iGKFWAFaVR6zuuMOTOMMoBrYpmABfOxX
2KVgEXFUGrzukdkATPj5o3McABNGmjDShJEmjOR1H9COMwBN4fvAo6FjNP0XRtJrKKDIfSNprp/F
g/Zi943UqjyLe7eK3DeSXlPApOC2kXTEyhYNxvxFklziom2sAFsn1onSho6xyE0nVvGsx/gnI4md
OrGSh1tqs4j0KF0ChM6cSDQYfgojGamh2omItUIeETGfATy+e9ElQCbmOxqppuI4NIozViO96210
aqSuDrEj4MC+SEiIMOoWgTWFEQHPxGhuyAb/+DbbHbBReeEYVM2nYdAWMoC3BODMid0dElyWZNhr
cDA5EpVlR9EizyFC5jMavOpucGqk54+FqK9KcwSUnz8MmYQPnZJ+mS/gZVe9A+DLp9voIIA6cuRW
wFj/7jdJs71YL3hc8nhcdP1LhacnxbfH5b9HFxAeX4F45RLG42sgTy6ifgEGBcF70w5TJgAAAABJ
RU5ErkJggg=="/>
<img id="paleta2"...
JavaScript
function colision(e1,e2){
top1 = px(e1.style.top);
top2 = px(e2.style.top);
height1 = px(e1.style.height);
height2 = px(e2.style.height);
width1 = px(e1.style.width);
width2 = px(e2.style.width);
left1 = px(e1.style.left);
left2 = px(e2.style.left);
if((top2 <= (top1+height1)) && ((top2+height2) >= top1)){
if((left2 <= (left1+width1)) && ((left2+width2) >= left1)){
return true;//Colisión
}
}
return false;
}
function px(pixeles){
return parseInt(pixeles.replace("px",""));
}
function Object(obj){
this.objeto = obj;
this.mover = function (x,y){
this.objeto.style.left = px(this.objeto.style.left) + x + "px";
this.objeto.style.top = px(this.objeto.style.top) + y + "px";
}
this.colision = function (e2){
top1 = px(this.objeto.style.top);
top2 = px(e2.style.top);
height1 = px(this.objeto.style.height);
height2 = px(e2.style.height);
width1 = px(this.objeto.style.width);
width2 = px(e2.style.width);
left1 = px(this.objeto.style.left);
left2 = px(e2.style.left);
if((top2 <= (top1+height1)) && ((top2+height2) >= top1)){
if((left2 <= (left1+width1)) && ((left2+width2) >= left1)){
return true;
}
}
return false;
}
this.get = function (){
return this.objeto;
}
}
window.onload = function (){
//--------------------------
punt = [0,0]
e = document.createElement("h1");
e.id = "marcador";
e.style.position = "absolute";
e.style.top = "10px";
e.innerText = punt[0] + "-" + punt[1];
document.body.appendChild(e);
e.style.left = parseInt(window.innerWidth / 2)-parseInt(e.clientWidth/2)+"px";
e = document.createElement("div");
e.style.position = "absolute";
e.style.top = "0px";
e.style.backgroundColor = "black";
e.style.width = "1px";
e.style.height = window.innerHeight + "px";
e.style.left = (window.innerWidth / 2) + "px";
document.body.appendChild(e);
//----------------------------
p1 = document.getElementById('paleta1');
p1.style.left = "10px";
p1.style.top = parseInt(window.innerHeight / 2) + "px";
p1.style.width = "16px";
p1.style.height = "75px";
p1.style.position =...