mejora

yamoreno2021 · Apr 12, 2024 · 8c59a27 · 8c59a27
1 parent 4b57b1f
commit 8c59a27
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 18 deletions.
diff --git a/P3/crono.js b/P3/crono.js
@@ -0,0 +1,64 @@
+//-- Clase cronómetro
+class Crono {
+
+    //-- Constructor. Hay que indicar el 
+    //-- display donde mostrar el cronómetro
+    constructor(display) {
+        this.display = display;
+
+        //-- Tiempo
+        this.cent = 0, //-- Centésimas
+        this.seg = 0,  //-- Segundos
+        this.min = 0,  //-- Minutos
+        this.timer = 0;  //-- Temporizador asociado
+    }
+
+    //-- Método que se ejecuta cada centésima
+    tic() {
+        //-- Incrementar en una centesima
+        this.cent += 1;
+
+        //-- 100 centésimas hacen 1 segundo
+        if (this.cent == 100) {
+        this.seg += 1;
+        this.cent = 0;
+        }
+
+        //-- 60 segundos hacen un minuto
+        if (this.seg == 60) {
+        this.min = 1;
+        this.seg = 0;
+        }
+
+        //-- Mostrar el valor actual
+        this.display.innerHTML = this.min + ":" + this.seg + ":" + this.cent;
+    }
+
+    //-- Arrancar el cronómetro
+    start() {
+       if (!this.timer) {
+          //-- Lanzar el temporizador para que llame 
+          //-- al método tic cada 10ms (una centésima)
+          this.timer = setInterval( () => {
+              this.tic();
+          }, 10);
+        }
+    }
+
+    //-- Parar el cronómetro
+    stop() {
+        if (this.timer) {
+            clearInterval(this.timer);
+            this.timer = null;
+        }
+    }
+
+    //-- Reset del cronómetro
+    reset() {
+        this.cent = 0;
+        this.seg = 0;
+        this.min = 0;
+
+        this.display.innerHTML = "0:0:0";
+    }
+}
diff --git a/P3/index.html b/P3/index.html
@@ -12,6 +12,7 @@
 
     <!-- Código javascript -->
     <script src="tiro-parabolico.js" defer></script>
+    <script src="crono.js"></script>
 
 </head>
 <body>
@@ -22,6 +23,8 @@ <h1>Tiro parabólico</h1>
     <img src="cerdo.webp" alt="No encontrada" id="pig">
     <canvas id="ctiro"></canvas>
 
+    <p>Timer</p>
+    <p id = "crono">0:0:0</p>
     <p>Ángulo de disparo:</p>
     <input type="range" id="angle" min="0" max="70" value="15" step="1"><br>
     <p><span id="angle_disp">0</span></p>

diff --git a/P3/tiro-parabolico.js b/P3/tiro-parabolico.js
@@ -1,13 +1,15 @@
 //-- Elementos del DOM
 const canvas = document.getElementById("ctiro");
 
+
+
 //-- Acceder al angulo
 const angle = document.getElementById("angle");
 const angle_disp = document.getElementById("angle_disp");
 
 //-- Acceder a la velocidad
-const velocity = document.getElementById("velocity");
-const velocity_disp = document.getElementById("velocity_disp");
+var velocity = document.getElementById("velocity");
+var velocity_disp = document.getElementById("velocity_disp");
 
 //-- Acceder al botón de disparo
 const btnLanzar = document.getElementById("btnLanzar");
@@ -36,11 +38,23 @@ let yop = 340;
 let xp = xop;
 let yp = yop;
 
+//-- Cronometro
+var display = document.getElementById("crono")
+
+//-- Definir un objeto cronómetro
+const crono = new Crono(display);
+
+
+
+//-- Generar números aleatorios con un valor máximo
+function getRandomInt(min, max) {
+    return Math.floor(Math.random() * (max - min + 1)) + min;
+}
 //-- Coordenadas iniciales del objetivo
 let xomin = 200;
 let xomax = 770;
-let xo = 500; //getRandomXO(xomin,xomax);
-let yo = 370;
+let xo = getRandomInt(430, 770); //getRandomXO(xomin,xomax);
+let yo = getRandomInt(30, 370);
 
 
 //-- Dibujar el proyectil
@@ -51,22 +65,27 @@ dibujarP(xop, yop, 50, 50, "green"); // Pintar el proyectil
 dibujarO(xo,yo); // Pintar el objetivo
 
 
-
+angle_disp.innerHTML = angle.value;
 //-- Escribir ángulo
 angle.onchange = () => {
     if (angle.value != "") {
       angle_disp.innerHTML = angle.value;
     }
 }
 
+velocity_disp.innerHTML = velocity.value;
+//-- Velocidad inicial total
+var v0 = parseFloat(velocity.value); // Obtener la velocidad inicial del input
+
 //-- Escribir velocidad
 velocity.onchange = () => {
     if (velocity.value != "") {
       velocity_disp.innerHTML = velocity.value;
+      v0 = parseFloat(velocity.value);
     }
+
 }
-//-- Velocidad inicial total
-var v0 = parseFloat(velocity.value); // Obtener la velocidad inicial del input
+
 
 //-- Ángulo de lanzamiento (en radianes)
 var theta = parseFloat(angle.value) * Math.PI / 180; // Convertir a radianes
@@ -107,10 +126,6 @@ function lanzar() {
     requestAnimationFrame(lanzar);
 }
 
-//-- Función de retrollamada del botón de disparo
-btnLanzar.onclick = () => {
-    lanzar();
-}
 
 
 function bound_sound() {
@@ -124,18 +139,18 @@ function dibujarP(x,y,lx,ly,color) {
 
     //-- Pintando el proyectil
     ctx.beginPath();
-    ctx.drawImage(bird, x,y,lx,ly);
+    //ctx.drawImage(bird, x,y,lx,ly);
     //-- Definir un rectángulo de dimensiones lx x ly,
-    //ctx.rect(x, y, lx, ly);
+    ctx.rect(x, y, lx, ly);
 
     //-- Color de relleno del rectángulo
-    //ctx.fillStyle = color;
+    ctx.fillStyle = color;
 
     //-- Mostrar el relleno
-   // ctx.fill();
+    ctx.fill();
 
     //-- Mostrar el trazo del rectángulo
-    //ctx.stroke();
+    ctx.stroke();
 
     ctx.closePath();
 }
@@ -145,7 +160,7 @@ function dibujarO(x,y) {
 
     //-- Pintando el objetivo
     ctx.beginPath();
-    ctx.drawImage(pig, x,y-30,50,50);
+    //ctx.drawImage(pig, x,y-30,50,50);
     //-- Dibujar un circulo: coordenadas x,y del centro
     //-- Radio, Angulo inicial y angulo final
     ctx.arc(x, y, 25, 0, 2 * Math.PI);
@@ -165,6 +180,9 @@ function dibujarO(x,y) {
 //-- Función de retrollamada del botón de disparo
 btnLanzar.onclick = () => {
     lanzar();
+    //-- Arranque del cronometro
+    console.log("Start!!");
+    crono.start();
 }
 
 //-- Función de retrollamada del botón de inicio
@@ -177,4 +195,4 @@ btnIniciar.onclick = () => {
     dibujarP(xop, yop, 50, 50, "green"); // Pintar el proyectil
 
 
-}
+}