El código es este:
HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!--[if lte IE 8]><meta http-equiv="X-UA-Compatible" content="chrome=1" /><![endif]-->
<title>My First Canvas Game</title>
</head>
<body>
<h1>My First Canvas Game</h1>
<p><canvas id="canvas" width="900" height="450" style="background:#999">
Canvas not supported by your browser.
</canvas></p>
</br>
<form name="registro">
Ancho del borde del rectángulo: <input type="range" id="ancho_del_cuadro" min="1" max="20" value="1" /><div id="ancho"></div></br>
<script type="application/javascript" src="game.js"></script>
</form>
</body>
</html>
JS:
window.addEventListener('load',init,false);
var canvas=null,ctx=null;
var a=0,b=0,x=0,y=0,ce=1, ar=5;
function init(){
canvas=document.getElementById('canvas');
x=canvas.height;
y=canvas.width;
ctx=canvas.getContext('2d');
run();
}
function run(){
requestAnimationFrame(run);
act();
paint(ctx);
}
function act(){
a+=ce;
b+=ce;
x-=ce*2;
y-=ce*2;
modificaciones();
}
function random(max){
return Math.floor(Math.random()*max);
}
function modificaciones(){
ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
ce=ancho_rectangulo;
document.getElementById('ancho').innerHTML=ce;
}
function paint(ctx){
ctx.lineWidth=ce;
ctx.strokeStyle='rgb('+random(255)+','+random(255)+','+random(255)+')';
ctx.strokeRect(a,b,y,x);
}
window.requestAnimationFrame=(function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){window.setTimeout(callback,17);};
})();
El caso es que si yo cambio el:
ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
por un:
ancho_rectangulo = 1;
todo funciona bien, pero cuando pongo el otro es como si el valor de la variable aumentase (y eso que mas abajo inserta la variable en el html y sale un 1).
No se si es que he cogido el valor mal o que, pero me tiene loco.
Un saludo y gracias por leer!! :D
Cogiendo solo el HTML, y testeando con "javascript:alert(document.getElementById("ancho_del_cuadro").value);", me da el valor bien (1).
¿Qué valor dices que te sale a ti? El que está mal.
No me da números, simplemente la posición el píxeles de los cuadros se va alargando. Y probando y sustituyendo he descubierto que el error reside en esa parte de código que da un valor que no es a la variable.
Si quieres copia y pega el código y sustituye los "ce" por 1 u otros números para comprobarlo.
a+=ce;
b+=ce;
x-=ce*2;
y-=ce*2;
ctx.lineWidth=ce;
¿Cóm que no te da números? Ponme exactamente la salida que te da el .value()
O sino..
function modificaciones(){
ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
//ce=ancho_rectangulo;
document.getElementById('ancho').innerHTML=ancho_rectangulo;
}
Cuando le pido el valor de la variable con
document.getElementById('ancho').innerHTML=ce;
me da el correcto (1 por defecto), pero no es el correcto cuando lo pongo aquí:
a+=ce;
b+=ce;
x-=ce*2;
y-=ce*2;
Si yo lo escribo así:
a+=1;
b+=1;
x-=1*2;
y-=1*2;
todo se ejecuta bien (A excepción de que no puedo cambiar el valor)
También, si lo pongo así está mal:
ancho_rectangulo = document.getElementById("ancho_del_cuadro").value;
pero an cambio así va bien:
ancho_rectangulo = 1;
Solo por si acaso: inicializaste las variables? 'a', 'b', 'x' e 'y'
Si, lo puedes ver en la explicación de el tema. Está todo el código ahí.
No entendí el problema.. xD
ancho_rectangulo = parseInt(document.getElementById("ancho_del_cuadro").value);
Me va bien.. o eso se supone..
Saludos
Con ese "parseInt" si que me va!! Muchas gracias! :D
Siempre que vayas a tratar valores en campos, usa parseInt() para asegurarte de que estas tratando con un integro =)
Saludos
JA, me dio mucha risa el tema....
En si, casi cualquier valor que venga del DOM es tratado como un string.