Códigos Fuente de JavaScript

Este simple código, muestra como dibujar dos tipos de árbol de navidad con asteriscos.

Código que genera un array bidimensional donde pone los barcos necesarios para jugar al juego de Guerra de barcos y muestra su posición en la pantalla utilizando canvas.



Los barcos no se pueden tocar en la cuadricula.
Los tipos de barcos a utilizar en el juego son:
- 1 de 4 posiciones
- 2 de 3 posiciones
- 3 de 2 posiciones
- 4 de 1 posición

Muy agradecido a mi amigo Kip por su ayuda en el desarrollo!!!

Este simple código muestra como eliminar los acentos y eñes de una cadena utilizando la función replace con una expresión regular.

Visor de fotos e imágenes con efectos fade y zoom, responsive y compatible. Se puede ajustar para resoluciones inferiores a 480px (móvil), evitando que se ejecute la función JavaScript.
Al clicar en una imagen, se amplía y se posiciona fija en primer plano; volver a clicar para cerrar la imagen. Los procesos indicados, van acompañados de efectos declarados en Clases CSS. Una función JavaScript procesa los eventos.

Este código muestra como utilizar los evento de javascript mouseover y mouseout para simular el evento de CSS hover al pasar el ratón por encima de una imagen.

Al pasar el ratón por encima de cualquiera de las imágenes, muestra dicha imagen como background de un div.

Código que muestra como determinar la versión del navegador Edge

Agenda de nombres con búsqueda filrada por JavaScript nativo.
Al teclear una o varias letras, aparecen por separado las palabras / nombres según el criterio indicado.
El diseño es responsive, se adapta al tamaño de cualquier navegador y/o dispositivo con CSS-Style.

Espero sea útil.

Un saludo

Hice modificaciones a un código que saque de un libro ya que:
1.- Las cartas no siempre generaban pares
2.- Podía voltear mas de 2 cartas sin cubrirlas
3.- Cuando se terminaban las cartas quedaba el fondo

Así que las cartas ya siempre son en pares y limita a descubrir solo 2.
Al terminar las cartas dice "juego terminado" y al clickar comienza uno nuevo.

Es muy sencillo pero es base para desarrollos mas complejos, si tengo oportunidad luego lo publico con imágenes jeje

Este código muestra como se puede visualizar una imagen seleccionada en el disco del usuario en le navegador sin enviarlas al servidor.
Se utiliza el objeto FileReader que se encuentra en los navegadores https://developer.mozilla.org/es/docs/Web/API/FileReader

El objeto FileReader permite que las aplicaciones web lean ficheros (o información en buffer) almacenados en el cliente de forma asíncrona, usando los objetos File o Blob dependiendo de los datos que se pretenden leer.

Script que actúa con el botón derecho del mouse. Al hacer click, aparece un menú personalizable con CSS-Style.

Si no queremos que aparezca el menú contextual por defecto en nuestra web, esta puede ser una opción configurable con facilidad.

Espero sea útil.

Un saludo