viernes, 12 de enero de 2024

Ejercicios html 2

Toca con dedo cuadrado y se movera Mover Cuadrado

















TOCA EL CUADRADO Y SE MOVERA

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mover Cuadrado</title>
    <style>
      .square {
        width: 100px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 0;
        transition: all 0.4s;
      }

      .square.move {
        left: calc(100% - 100px);
      }
    </style>
  </head>

  <body>
    <div class="square" ontouchstart="moveSquare()"></div>

    <script>
      function moveSquare() {
        var square = document.querySelector(".square");
        square.classList.add("move");

        setTimeout(function () {
          square.classList.remove("move");
        }, 400);
      }
    </script>
  </body>
</html>








Ejercicios html

Tocas el cuadrado y salen bolas hacia arriba Interactive Square

jueves, 11 de enero de 2024

Script para godot3d 4.2 cuando presiono tecla "M" se reinicia el juego; esta puesto en un MeshInstance3D; y es bicnieto;

 extends MeshInstance3D



# Called when the node enters the scene tree for the first time.

func _ready():

pass # Replace with function body.



# Called every frame. 'delta' is the elapsed time since the previous frame.

func _process(delta):

pass

func _unhandled_input(event):

if event is InputEventKey:

if event.pressed and event.keycode == KEY_M:

get_tree().reload_current_scene()

#rotate_y(90.88)



-------------------------------------------------------------------------------------------------

-----------------------------------------------------------------------------------------------------------

Explicacion;

Script para godot3d 4.2 cuando presiono tecla "M"  se reinicia el juego; esta puesto en un MeshInstance3D; y es bicnieto; me vengo a referir , intento aclarar el nodo raiz padre del juego es un

World de el sale un Area3d de esta sale un CollisionShape3D de este asi mismo sale el MeshInstance3D contenedor del script que funciona perfectamente, ejecuto el juego y cuando presiono tecla "m" se empieza el juego de nuevo.




miércoles, 10 de enero de 2024

Script para Godot3d cuando algo entra en el area3d borra nodos hijos y nodos hermanos; mas complejo;

 extends Area3D



# Called when the node enters the scene tree for the first time.

func _ready():

pass # Replace with function body.



# Called every frame. 'delta' is the elapsed time since the previous frame.

func _process(delta):

pass







func _on_area_entered(area):

var parent = get_parent()

var Turbo = parent.get_node("Turbo")

var Turbo2 = parent.get_node("Turbo2")

var CollisionShape3DCARROCERIA = parent.get_node("CollisionShape3DCARROCERIA")

var ModeloElicopteroobj = parent.get_node("ModeloElicopteroobj")

Turbo.queue_free()

Turbo2.queue_free()

CollisionShape3DCARROCERIA.queue_free()

ModeloElicopteroobj.queue_free()

get_node("CollisionShape3D mas amarillo aun").queue_free()

get_node("MeshInstance3D SUPERAMARILLO").queue_free()

pass # Replace with function body.


Script para Godot3d cuando algo entra en el area3d borra nodos hijos y nodos hermanos;

 extends Area3D


# Called when the node enters the scene tree for the first time.

func _ready():

pass # Replace with function body.


# Called every frame. 'delta' is the elapsed time since the previous frame.

func _process(delta):

pass


func _on_area_entered(area):

var parent = get_parent()

var Turbo = parent.get_node("Turbo")

Turbo.queue_free()

get_node("CollisionShape3D mas amarillo aun").queue_free()

get_node("MeshInstance3D SUPERAMARILLO").queue_free()

pass # Replace with function body.




EXPLICACION:

El script se pone en el Area 3d donde estan los elementos que borraremos cuando algo entre en dicha area3d contenedora tambien del script, esta parte son hermanos:

var parent = get_parent()

var Turbo = parent.get_node("Turbo")

Turbo.queue_free()

 

esta otra parte son hijos:

get_node("CollisionShape3D mas amarillo aun").queue_free()

get_node("MeshInstance3D SUPERAMARILLO").queue_free()

pass # Replace with function body.



martes, 9 de enero de 2024

Otro html

TOCA CON EL DEDO Y DISPARAS BOLAS AZULES




<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Animación de círculos</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="200" height="200"></canvas>
    <script>
      const canvas = document.getElementById('myCanvas');
      const ctx = canvas.getContext('2d');

      // Dibuja un cuadrado en el canvas
      ctx.fillStyle = 'red';
      ctx.fillRect(50, 50, 100, 100);

      // Agrega un evento touchstart al canvas
      canvas.addEventListener('touchstart', function(event) {
        // Dibuja círculos en el canvas y los mueve hacia el eje -y-
        let y = 50;
        let radius = 10;
        let intervalId = setInterval(function() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          ctx.fillStyle = 'red';
          ctx.fillRect(50, 50, 100, 100);
          ctx.fillStyle = 'blue';
          ctx.beginPath();
          ctx.arc(100, y, radius, 0, 2 * Math.PI);
          ctx.fill();
          y += 10;
          if (y > canvas.height + radius) {
            clearInterval(intervalId);
          }
        }, 50);
      });
    </script>
  </body>
</html>

Animación de círculos

lunes, 8 de enero de 2024

Dispara cudrados toca la pantalla

Toca el cuadrado rojo con el dedo, luego el azul .....y asi sucesibamente........

Click on the red square to see the effect


<!DOCTYPE html>
<html>
<head>
<style>
.container {
  width: 200px;
  height: 200px;
  position: relative;
  background-color: #f1f1f1;
}

.square {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: red;
  cursor: pointer;
}

.square:hover ~ .moving-square {
  animation: move-up 1s ease-in-out forwards;
}

@keyframes move-up {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100px);
  }
}

.moving-square {
  width: 50px;
  height: 50px;
  position: absolute;
  background-color: blue;
  top: 200px;
}
</style>
</head>
<body>

<h2>Click on the red square to see the effect</h2>

<div class="container">
  <div class="square"></div>
  <div class="moving-square"></div>
</div>

</body>
</html>