JSFiddle - React, Tailwind, and code Playground

by alemarch

HTML

<div id="casella" onclick="alert('a')"></div>  
<input type="button" value="+" id="p1" onclick="aggiorna(1)">
<input type="button"  value="-" id="p2" onclick="aggiorna(-1)">

CSS

#casella {
  position: absolute;
  
  left: 80px;
  top: 100px;
  height: 100px;
  width: 150px;
  height: 150px;
  border: solid 1px blue;

}

JavaScript

var bordo = 1
function aggiorna(n){
  bordo +=n;
  document.getElementById("casella").style.outline = "solid " + bordo + "px red"
}

window.onkeydown = function () {
  document.getElementById("casella").innerHTML = event.keyCode
}

var direzione = +1
var spostamento = 10
var posizione = 100

function sposta(){
    posizione += spostamento * direzione
    document.getElementById("casella").style.left =  posizione +"px"
    console.log (posizione, direzione)
    if ((posizione > 300) || (posizione < 0)) {
        direzione *= -1
    }
}

//setInterval(function(){sposta()}, 100)


document.getElementById("casella").onmousemove = function(event){
     document.getElementById("casella").innerHTML = event.clientX + "," + event.clientY
}


function spostaOgg(oggetto, dx, dy) {
    if (typeof oggetto == 'string') {
        var obj = document.getElementById(oggetto)
    } else {
        var obj = oggetto   
    }
    
    var oldx = oggetto.offsetLeft
    var oldy = oggetto.offsetTop
    var newx = oldx + dx
    var newy = oldy + dy
    console.log("sposta", oldx,oldy,newx,newy)
    oggetto.style.left = newx +"px"
    oggetto.style.top = newy +"px"
}

var marginex1 = 50
    var marginex2 = 400
    var marginey1 = 50
    var marginey2 = 200
    var dx = 2
    var dy = 2

setInterval(function(){
    
    var ogg = document.getElementById("casella")
    if ((ogg.offsetLeft <= marginex1) || (ogg.offsetLeft >= marginex2)) {
       dx = -dx
       spostaOgg(ogg, dx, dy)
    }
    if ((ogg.offsetTop<= marginey1) || (ogg.offsetTop >= marginey2)) {
       dy = -dy
       spostaOgg(ogg, dx, dy)
    }
    spostaOgg(ogg, dx, dy)
    console.log (ogg.offsetLeft,ogg.offsetTop, dx, dy)
    
},50)