Principio

yamoreno2021 · Apr 11, 2024 · 2c03c4b · 2c03c4b
1 parent 1bacd37
commit 2c03c4b
Show file tree

Hide file tree

Showing 9 changed files with 324 additions and 0 deletions.
diff --git a/P3/L9/tp1.css b/P3/L9/tp1.css
@@ -0,0 +1,17 @@
+/* 
+Estilos para el campo de tiro
+*/  
+
+#ctiro {
+    background-color: lightblue;
+    border-style: solid;
+    border-width: 1px;
+    border-color: black;
+    border-radius: 5px;
+  }
+/* Imagen deshabilitada
+   Se usa para leerla desde js y
+   meterla en el canvas */
+   #pajaro {
+    display: none;
+  }  
diff --git a/P3/L9/tp1.html b/P3/L9/tp1.html
@@ -0,0 +1,27 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tiro parabólico</title>
+
+    <!-- Hoja de estilo -->
+    <link rel="stylesheet" href="tp1.css">
+
+    <!-- Código javascript -->
+    <script src="tp1.js" defer></script>
+
+</head>
+<body>
+
+
+    <h1>Tiro parabólico</h1>
+    <canvas id="ctiro"></canvas>
+
+    <input type="button" id="btnLanzar" value="Lanzar">
+    <input type="button" id="btnIniciar" value="Iniciar">
+
+</body>
+</html>
diff --git a/P3/L9/tp1.js b/P3/L9/tp1.js
@@ -0,0 +1,52 @@
+////////////-- Declaración de variables y objetos
+//-- Coordenadas iniciales del proyectil
+let xop = 5;
+let yop = 345;
+let xp = xop;
+let yp = yop;
+
+//-- Obtención del canvas y de los elementos HTML a usar
+
+//-- Función principal de actualización
+function update() 
+{
+  //-- Implementación del algoritmo de animación:
+
+  //-- 1) Actualizar posición de los elementos
+
+  //-- 2) Borrar el canvas
+
+  //-- 3) Pintar los elementos en el canvas
+  //-- Dibujar el proyectil
+  dibujarP(xop, yop, 50, 50, "green"); // Pintar el proyectil
+  //-- 4) Repetir
+  requestAnimationFrame(update);
+}
+
+////////////////-- Otras funciones....
+//-- función para pintar el proyectil
+function dibujarP(x,y,lx,ly,color) {
+
+  //-- Pintando el proyectil
+  ctx.beginPath();
+
+  //-- Definir un rectángulo de dimensiones lx x ly,
+  ctx.rect(x, y, lx, ly);
+
+  //-- Color de relleno del rectángulo
+  ctx.fillStyle = color;
+
+  //-- Mostrar el relleno
+  ctx.fill();
+
+  //-- Mostrar el trazo del rectángulo
+  ctx.stroke();
+
+  ctx.closePath();
+}
+
+
+
+
+//-- Hay que llamar a update la primera vez
+update();
diff --git a/P3/cerdo.webp b/P3/cerdo.webp
diff --git a/P3/index.html b/P3/index.html
@@ -0,0 +1,35 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Tiro parabólico</title>
+
+    <!-- Hoja de estilo -->
+    <link rel="stylesheet" href="tiro-parabolico.css">
+
+    <!-- Código javascript -->
+    <script src="tiro-parabolico.js" defer></script>
+
+</head>
+<body>
+
+
+    <h1>Tiro parabólico</h1>
+    <img src="pajaro.webp" alt="No encontrada" id="pajaro">
+    <img src="cerdo.webp" alt="No encontrada" id="pig">
+    <canvas id="ctiro"></canvas>
+
+    <p>Ángulo de disparo:</p>
+    <input type="range" id="angle" min="0" max="90" value="0" step="1"><br>
+    <p><span id="angle_disp">0</span></p>
+    <p>Velocidad de disparo:</p>
+    <input type="range" id="velocity" min="0" max="100" value="0" step="1"><br>
+    <p><span id="velocity_disp">0</span></p>
+    <input type="button" id="btnLanzar" value="Lanzar">
+    <input type="button" id="btnIniciar" value="Iniciar">
+
+</body>
+</html>
diff --git a/P3/pajaro.webp b/P3/pajaro.webp
diff --git a/P3/rebote.mp3 b/P3/rebote.mp3
diff --git a/P3/tiro-parabolico.css b/P3/tiro-parabolico.css
@@ -0,0 +1,20 @@
+/* 
+Estilos para el campo de tiro
+*/  
+
+#ctiro {
+    background-color: lightblue;
+    border-style: solid;
+    border-width: 1px;
+    border-color: black;
+    border-radius: 5px;
+  }
+/* Imagen deshabilitada
+Se usa para leerla desde js y
+meterla en el canvas */
+#pajaro {
+  display: none;
+}  
+#pig {
+  display: none;
+}  
diff --git a/P3/tiro-parabolico.js b/P3/tiro-parabolico.js
@@ -0,0 +1,173 @@
+//-- 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");
+
+//-- Acceder al botón de disparo
+const btnLanzar = document.getElementById("btnLanzar");
+
+//-- Acceder al botón de iniciar
+const btnIniciar = document.getElementById("btnIniciar");
+
+//-- Sonidos
+//-- Crear los elementos de sonido
+const rebote_sound = new Audio('rebote.mp3');
+
+canvas.width = 800;
+canvas.height = 400;
+
+//-- Obtener el contexto del canvas 2d
+const ctx = canvas.getContext("2d");
+
+//-- Leer la imagen del documento html
+//-- Esta deshabilitada
+var bird = document.getElementById("pajaro");
+var pig = document.getElementById("pig");
+
+//-- Coordenadas iniciales del proyectil
+let xop = 5;
+let yop = 340;
+let xp = xop;
+let yp = yop;
+
+//-- Coordenadas iniciales del objetivo
+let xomin = 200;
+let xomax = 770;
+let xo = 500; //getRandomXO(xomin,xomax);
+let yo = 370;
+
+
+//-- Dibujar el proyectil
+//dibujarP(xop, yop, 50, 50, "green"); // Pintar el proyectil
+dibujarP(xop, yop, 50, 50); // Pintar el proyectil //Sin color
+
+//-- Dibujbar el objetivo
+dibujarO(xo,yo); // Pintar el objetivo
+
+//-- Velocidad del proyectil
+let velpx = 5;
+let velpy = 1;
+
+//-- Escribir ángulo
+angle.onchange = () => {
+    if (angle.value != "") {
+      angle_disp.innerHTML = angle.value;
+    }
+}
+
+//-- Escribir velocidad
+velocity.onchange = () => {
+    if (velocity.value != "") {
+      velocity_disp.innerHTML = velocity.value;
+    }
+}
+
+//-- Función principal de actualización
+//-- Gravedad
+const g = 0.2; // Ajusta según sea necesario
+
+//-- Tiempo inicial
+let t = 0;
+
+function lanzar() {
+    //-- Calcular la posición en función del tiempo
+    xp = xop + velpx * t;
+    yp = yop - (velpy * t - 0.5 * g * t ** 2);
+
+    //-- Incrementar el tiempo para el próximo cuadro
+    t += 1;
+
+    //-- Borrar el canvas
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+    //-- Pintar los elementos en el canvas
+    dibujarP(xp, yp, 50, 50, "red"); // Pintar el proyectil
+    dibujarO(xo, yo); // Pintar el objetivo
+
+    //-- Verificar colisión
+    if (xp >= xo && xp <= xo + 50 && yp >= yo && yp <= yo + 50) {
+        // Si el proyectil alcanza el objetivo, detener la animación
+        return;
+    }
+
+    //-- Solicitar el próximo cuadro de animación
+    requestAnimationFrame(lanzar);
+}
+
+//-- Función de retrollamada del botón de disparo
+btnLanzar.onclick = () => {
+    lanzar();
+}
+
+
+function bound_sound() {
+
+    rebote_sound.currentTime = 0;
+    rebote_sound.play();
+}
+
+//-- función para pintar el proyectil
+function dibujarP(x,y,lx,ly,color) {
+
+    //-- Pintando el proyectil
+    ctx.beginPath();
+    ctx.drawImage(bird, x,y,lx,ly);
+    //-- Definir un rectángulo de dimensiones lx x ly,
+    ctx.rect(x, y, lx, ly);
+
+    //-- Color de relleno del rectángulo
+    ctx.fillStyle = color;
+
+    //-- Mostrar el relleno
+    ctx.fill();
+
+    //-- Mostrar el trazo del rectángulo
+    ctx.stroke();
+
+    ctx.closePath();
+}
+
+//-- función para pintar el objetivo
+function dibujarO(x,y) {
+
+    //-- Pintando el objetivo
+    ctx.beginPath();
+    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);
+    ctx.strokeStyle = 'blue';
+    ctx.lineWidth = 2;
+    ctx.fillStyle = 'red';
+
+    //-- Dibujar el relleno
+    ctx.fill()    
+
+    //-- Dibujar el trazo
+    ctx.stroke();
+
+    ctx.closePath();
+}
+
+//-- Función de retrollamada del botón de disparo
+btnLanzar.onclick = () => {
+    lanzar();
+}
+
+//-- Función de retrollamada del botón de inicio
+btnIniciar.onclick = () => {
+
+    //-- Reinicio
+    location.reload();
+
+    //-- Dibujar el proyectil
+    dibujarP(xop, yop, 50, 50, "green"); // Pintar el proyectil
+
+
+}