AJUDA URGENTE JavaScript :)

pchelpme

pchelpme

Power Member
Ola, estou a trabalhar num project usando javascript e por alguma razao, eu tenho a variavel cirY = canvas.height - altura e essa variavel so toma o valor certo depois de clicar no butao "go" pela segunda vez

Código: 
<!DOCTYPE html>
<html>
<head>
    <title>Things</title>
</head>
<body>
    <p>Cada pixel corresponde a 1m</p><br>
    <input id="width" type="text" placeholder="Width em px"><br>
    <input id="height" type="text" placeholder="Eight em px"><br>
    <input id="v0" type="text" placeholder="Velocidade inicial m/s"><br>
    <input id="h" type="text" placeholder="altura em m"><br>
    <input type="button" value="Go" onclick="setValues()"><br>

    <canvas id="canvas" width="400" height="300"></canvas>
    <script type="text/javascript" language="javascript">
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");
        PI = Math.PI;
        var canvasW, canavsH, v0, altura, t;
        var fps = 30;
        var gravidade = 9.8;
        var cirX = 10, cirY, speedX , speedY ;
        var tempo = 0;

        function setValues(){
            canvasW = document.getElementById("width").value;
            canvasH = document.getElementById("height").value;
            v0 = document.getElementById("v0").value;
            speedX = document.getElementById("v0").value;
            altura = document.getElementById("h").value;
            cirY = (canvas.height - (document.getElementById("h").value));
            calcTempo(gravidade);
            window.alert("tempo = "+t);

            if (canvasW <= 400){
                if (canvasH <= 400){
                    window.alert("Too Small");
                }
            }

            canvas.width = canvasW;
            canvas.height = canvasH;
            animate();
        }

        function animate(){
            setInterval(function(){
                draw();
            }, 1000/fps);
        }

       
        function timeLapse(){
            if (tempo < t){
                tempo = tempo + (1/30);
                speedY = gravidade * tempo;
            }
        }

        function draw(){
            moveCircle();
            console.log(cirX + " " + cirY);
            timeLapse();   
            drawBG();
            drawCircle("white",cirX, cirY, 10);
        }

        function moveCircle(){
            if (cirY < 500){
                ciX = cirX + v0;
            }
            console.log(v0);
        }

        function drawCircle(cor, x,y,Radius){
            ctx.fillStyle = cor;
          ctx.beginPath();
            ctx.arc(x,y,Radius, 0, PI*2, false);
            ctx.fill();
        }

        function drawBG(){
            ctx.fillStyle = "black";
            ctx.fillRect(0, 0, canvasW, canvasH);
        }

        function calcTempo(g){
            t = (2*altura)/g;
        }

        function posTemp(v0,t,g){
            var x = v0*t;
            var y = (g*t)/2;
            return{
                x,y
            };
        }

    </script>
</body>
</html>
 
Nova duvida
if (cirY < 500){
cirX = v0 + cirX;
cirY = speedY + cirY;
console.log(cirX + " " + speedY + cirY);
}
porque e que isto nao funciona?????????? diz que cirY é undefined
 
Pelo que percebo a linha
Código: 
canvas.height = canvasH;
devia estar antes de
Código: 
cirY = (canvas.height - (document.getElementById("h").value));

Btw não devias usar
Código: 
document.getElementById("h").value
se já tens uma variável com o nome altura
 
Qual é o efeito que queres dar à bola?
É para fazer um pan da esquerda para a direita, ou simular a gravidade a ser atirada do topo para baixo?
 
Inicie sessão ou registe-se para poder participar.
Back
Topo