I need to make proportionally move each 5px in the next array according to its original position, but stop it until a given value, in this case if it increases low, if it decreases it goes up, that is, when it is 300 lower 10px, if it is at 100 it remains in its initial position, but the buttons can still be clicked without performing any function but not disable the button equally if it is at 500 download 20px and click up no longer move because that is the limit. The limits are only 100 and 500, it goes from 100 to 100 and from the pixels it is from the initial position up to 20 px. The whole array is relative to the class, ship.
HTML
<body>
<div>
<div>
<img id="cielo" src="cielo.png">
<img id="fondoPaisaje"src="fondoPaisaje.png">
<img id="rio" src="agua.png">
<div id="barco">
<img id="barca_buena" src="Barca-buena.png">
<img id="layer" src="Layer-1.png">
<img id="objeto_1" src="objeto-1.png">
<img id="objeto_2" src="objeto-2.png">
<img id="escultura" src="escultura.png">
<img id="objeto_3" src="objeto-3.png">
<img id="barca_dentro" src="Barca-dentro.png">
<img id="barca_buena_reflejo" src="Barca-buena_reflejo.png">
</div>
</div>
<div class="botonera">
<p>m=</p>
<input type="numeric" name="campo_masa" value="100" id="masa" disabled="true">
<button id="btnarriba" disabled="false">▴</button>
<button id="btnabajo" disabled="false">▾</button>
<p>kg</p>
<p>a=</p><span id="aceleracion"></span><p>m/s<sup>2</sup></p>
<button id="btniniciar">Iniciar</button>
<button id="btnreiniciar">Reiniciar</button>
</div>
</div>
CSS
#barco{
position: relative;
z-index: 1;
margin-top: -200px;
margin-left: 100px;
padding: 0px;
display: block;
}
JAVASCRIPT JQUERY
$(document).ready(function(){
var fuerza = 600;
var value_masa=100;
$("#masa").val(value_masa);
var imagenes=[$("#objeto_1"),$("#objeto_2"),$("#escultura"),$("#objeto_3")];
$("#btniniciar").click(function(){
$("#btniniciar").hide();
$("#btnreiniciar").show();
$("#masa").prop("disabled",false);
$("#btnarriba").prop("disabled",false);
$("#btnabajo").prop("disabled",false);
});
function redondeo(valor_value){
if (isNaN(valor_value)){
return 100;
}
valor_value=(Math.round(valor_value/100))*100;
if(valor_value <= 100){
return 100;
}
if(valor_value >= 500){
return 500;
}
return valor_value;
}
function casos(valor_value){
var valor_value = (valor_value/100)-1;
for(var i=0; i < imagenes.length; i++){
imagenes[i].show();
if(valor_value <= i){
imagenes[i].hide();
}
}
return valor_value*100;
}
$("#btnarriba").on("click",function(){
value_masa=value_masa+100;
if(value_masa >= 500){
value_masa=500;
}
casos(value_masa);
$("#masa").val(value_masa);
});
$("#btnabajo").on("click",function(){
value_masa=value_masa-100;
if(value_masa <= 100){
value_masa=100;
}
casos(value_masa);
$("#masa").val(value_masa);
});
$("#btnreiniciar").on("click", function(){
value_masa=100;
casos(value_masa);
$("#masa").val(value_masa);
});
$("#masa").keydown(function(e){
if(e.which==13){
var valor_value=$("#masa").val();
var valor_redondeado=redondeo(valor_value);
casos(valor_redondeado);
$("#masa").val(valor_redondeado);
value_masa=valor_redondeado;
}
});
});