Unforgettable: Kitty Dress Up (Tuto)

Tutorial de Kitty Dress Up, el minijuego en el que puedes vestir a la Kittyyy

Cualquier duda comentar!!!

Espero que os gusteee <3

Supongo que ya sabéis cómo va, pero os lo recuerdo por si acaso jejejj, para crear este minijuego necesitaremos un código que encontrareis al final del todo donde tendréis que modificar a vuestro gusto y luego en diseño, añadir gadget HTML/JavaScript y pegar el código completo en el contenido para guardarlo y que nos salga en nuestro blog.

Primero tendremos que elegir la imagen de portada que queremos que tenga nuestro minijuego y pegar el URL donde marca ;)

En el segundo enlace tendremos que poner la imagen de fondo que tendremos en el minijuego.

Después bajaremos hasta la parte que dice juego completo donde aquí empezaremos a modificar:

Primero cambiaremos el ancho del juego, yo lo tengo a 250px pero vosotros lo tenéis que ajustar al tamaño de vuestro blog.

Segundo vamos a poner que tenga la imagen de portada un espacio a comparación del cuadrado, yo lo tengo a 10px pero podes poner lo que queráis.

Tercero vamos a cambiar el color del fondo principal, yo lo tengo en negro pero podéis poner también una imagen añadiendo el URL

Cuarto podemos cambiar el color del texto, yo lo tengo en negro ;)

Quinto podéis cambiar el color del borde, el mio esta en rosa pero si no queréis que tenga color pues ponéis el mismo que el de fondo principal.

PARA ELEGIR COLORES OS DEJO ESTA WEB ;) https://htmlcolorcodes.com/es/

Luego vamos donde pone imagen portada:

-Primero cambiaremos el ancho de la imagen de la portada, el mio esta en 170px
-Segundo cambiamos el alto, yo lo tengo en 170px

- Tercero elegimos el color del borde de la portada, el mio es rosita jijiji

Vamos donde dice empezar:

- Primero cambiamos el tamaño del botón de empezar, el mio esta en 25px

- Segundo cambiamos el tamaño del texto del botón

Luego vamos donde pone inicio h1 y inicio p:

- Primero modificamos el tamaño del titulo, yo lo tengo a 21px

- Segundo cambiamos el tamaño del texto, el mio esta en 11px

Luego bajar donde dice preview base donde cambiaremos

el tamaño de las kittys de selección, para que quepan bien en nuestra base de juego, el mio esta en 75px ;)

Vamos hasta donde dice lienzo personaje:

- Primero cambiaremos el tamaño de la kitty, la mía esta en 150px

- Segundo modificamos el alto de la kitty, 150xp
- Tercero cambiamos el borde del lienzo, el mio es rosita

- Cuarto, cambiar el color del lienzo, el mio esta en negro

Luego vamos a donde dice menú contenedor:

- Primero cambiamos el ancho del menú, el mio esta en 200px

- Segundo cambiar el color del fondo del menú
- Tercero, cambiar el espacio interior del menú, el mio esta en 6px

- Cuarto, cambiar el color de los bordes ;)

Bajamos donde dice pestana h3:

- Primero podemos cambiar el color de los títulos del menú
- Segundo cambiamos el tamaño de los títulos, el mio esta en 15px

Vamos donde pone armario y ponemos el alto máximo del armario, el mio esta en 175px ;)))

Vamos donde pone item:

- Primero podemos cambiar el color del fondo de los objetos, el mio esta en negrito
- Segundo podemos cambiar el color de los bordes.

Vamos en la parte de botones donde pone rosa:

- Primero cambiamos el color de los botones al que mas os guste, recordar que arriba esta la pagina web!!
- Segundo cambiamos el color del texto de los botones
- Tercero cambiamos el color del borde de los botones
- Cuarto cambiamos el tamaño, yo lo tengo en 5px y 9px
- Quinto cambiamos el tamaño del texto, el mio esta en 10px

Y POR ÚLTIMO vamos donde dice final:

- Primero cambiamos el tamaño del título final
- Segundo el color del título!!!

Espero que todo se haya entendido biennnn y cualquier duda escribir en comentariosssss!!!

Aquí abajo esta el código ;))))

<h1>Kitty Dress Up</h1>

<img

class="imagen-portada"

src="https://i.pinimg.com/236x/da/c9/ae/dac9ae7147c8cec372f18a38a0583966.jpg"

EMPEZAR

</button>

</div>

<h1>Kitty Dress Up</h1>

<p>Selecciona una Kitty para comenzar:</p>

<img

class="preview-base"

id="pre-1"

onclick="seleccionarBase(this.src, 'pre-1')"

src="https://blogger.googleusercontent.com/img/a/AVvXsEgy6yzNlh_Mo2S3t8H9bEXTG22a53yL5zTkaZXNsg_h8Hcuuits0gChOm5h3ggpdP3AN9EHFmMmXMVkgroK_CTkoXoYA8gcgwK-WaApMAJJkHza3M5_ccQVYwmTuh05CIblk-1ZMGV-kqJXNLFMIGpCv-KNqtdfJxcQHOXTaQEykEim3NhoZv1QZpoJ3sU"

<img

class="preview-base"

id="pre-2"

onclick="seleccionarBase(this.src, 'pre-2')"

src="https://blogger.googleusercontent.com/img/a/AVvXsEjtYG3DI2gOxtYzCd0OaNYvtiznCgjBjVl_sd2NXKu67uLZIVVBeL-17YFuqxfQ8ZJuXH6NHWmy-Wg4X_vj82qOMDy7QJoIDuXfCkK9XpKKPs-54xAlbYqzyoxC-lvYox9aEPZFWfK-DBkOq521xa8lwmuhK1kHtzZCgSNNzkn9huZSOYQMc2jeZ1LiDWI"

</div>

<button

class="btn-rosa"

id="btn-jugar-inicio"

onclick="irAlJuego()"

style="display:none;"

ENTRAR AL ESTUDIO

</button>

</div>

<img

class="fondo-habitacion"

src="https://i1.sndcdn.com/artworks-tX3aHE9nWb39O2Ry-zapkyQ-t240x240.jpg"

<img

class="capa"

id="base-img"

src=""

style="z-index:10;"

<img

class="capa"

id="ropa-img"

src=""

style="display:none;z-index:20;"

<img

class="capa"

id="mano-img"

src=""

style="display:none;z-index:30;"

<img

class="capa"

id="acc-img"

src=""

style="display:none;z-index:40;"

</div>

<h3>Vestidos</h3>

</div>

</button>

</div>

</div>

Atrás

</button>

</button>

</div>

<h3>Moños y Más</h3>

</div>

Atrás

</button>

<button

class="btn-rosa"

onclick="irAlFinal()"

style="background:#ff1493;"

FINALIZAR

</button>

</div>

<h2>¡Tu diseño es hermoso!</h2>

💾 GUARDAR FOTO

</button>

<button

class="btn-rosa"

onclick="location.reload()"

style="background:#87ceeb;"

REINICIAR

</button>

</div>

<style>

#juego-completo {

width:100%;

max-width:250px;

margin:0 auto;

padding:10px;

box-sizing:border-box;

font-family:Georgia,serif;

text-align:center;

background:#000000;

color:#ffffff;

border:4px double #FF69B4;

border-radius:20px;

}

.pantalla {

display:none;

}

.activa {

display:block !important;

}

/* PORTADA */

#p-portada {

padding:0;

margin:0;

}

#p-portada h1 {

font-size:22px;

margin:2px 0 7px 0;

color:hotpink;

}

.imagen-portada {

display:block;

width:170px;

height:170px;

object-fit:cover;

margin:5px auto 7px auto;

border:2px solid #FF69B4;

border-radius:10px;

box-sizing:border-box;

}

.btn-empezar {

padding:8px 25px;

font-size:11px;

margin:0;

}

/* SELECCIÓN */

#p-inicio {

padding:0;

margin:0;

}

#p-inicio h1 {

font-size:21px;

margin:2px 0 5px 0;

}

#p-inicio p {

font-size:11px;

margin:3px 0 7px 0;

}

.selector-base {

display:flex;

justify-content:center;

align-items:center;

gap:7px;

margin:5px 0 7px 0;

}

.preview-base {

width:75px;

height:auto;

cursor:pointer;

border:2px solid #FFB7C5;

border-radius:8px;

background:#ffffff;

}

/* JUEGO */

.game-container {

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

gap:6px;

margin:0;

padding:0;

}

/* LIENZO */

#lienzo-personaje {

width:150px;

height:150px;

border:2px solid #FF69B4;

border-radius:8px;

position:relative;

overflow:hidden;

flex-shrink:0;

margin:0 auto;

background:#000000;

}

.fondo-habitacion {

position:absolute;

top:0;

left:0;

width:100%;

height:100%;

object-fit:cover;

z-index:1;

opacity:.6;

}

.capa {

position:absolute;

top:0;

left:0;

width:150px !important;

height:150px !important;

object-fit:contain;

pointer-events:none;

background:transparent !important;

}

/* MENÚ */

.menu-contenedor {

width:100%;

max-width:200px;

background:#000000;

padding:6px;

border-radius:8px;

border:2px solid #FF69B4;

box-sizing:border-box;

margin:0 auto;

}

.pestana {

display:none;

}

.pestana-visible {

display:block;

}

.pestana h3 {

color:hotpink;

font-size:15px;

margin:0 0 5px 0;

}

/* ARMARIO */

.armario-grid {

display:grid;

grid-template-columns:repeat(3,1fr);

gap:3px;

margin:0 0 5px 0;

max-height:175px;

overflow-y:auto;

}

.item-img {

width:100%;

aspect-ratio:1 / 1;

background:#ffffff;

border:1px solid #FF69B4;

border-radius:4px;

cursor:pointer;

object-fit:contain;

}

/* BOTONES */

.btn-rosa {

background:#FF69B4;

color:#ffffff;

border:2px solid #FF69B4;

padding:5px 9px;

border-radius:30px;

cursor:pointer;

font-weight:bold;

margin:2px 0 0 0;

font-size:10px;

font-family:Georgia,serif;

}

.botones-navegacion {

display:flex;

gap:4px;

justify-content:center;

margin:0;

}

/* FINAL */

#p-final {

padding:0;

margin:0;

}

#p-final h2 {

font-size:17px;

color:#ffffff;

margin:2px 0 6px 0;

}

#zona-foto {

margin:0;

padding:0;

}

</style>

let baseLink = "";

/* PORTADA */

function empezarJuego() {

document

.getElementById('p-portada')

.classList

.remove('activa');

document

.getElementById('p-inicio')

.classList

.add('activa');

}

/* SELECCIONAR KITTY */

function seleccionarBase(url,id) {

baseLink = url;

document

.querySelectorAll('.preview-base')

.forEach(img => {

img.style.borderColor="#FFB7C5";

});

document

.getElementById(id)

.style

.borderColor="#FF69B4";

document

.getElementById('btn-jugar-inicio')

.style

.display='inline-block';

}

/* ENTRAR AL ESTUDIO */

function irAlJuego() {

document

.getElementById('base-img')

.src=baseLink;

document

.getElementById('p-inicio')

.classList

.remove('activa');

document

.getElementById('p-juego')

.classList

.add('activa');

}

/* PONER PRENDA */

function ponerPrenda(id,url) {

const el=document.getElementById(id);

el.src=url;

el.style.display='block';

}

/* CAMBIAR PESTAÑA */

function cambiarPestana(id) {

document

.querySelectorAll('.pestana')

.forEach(p => {

p.classList.remove('pestana-visible');

});

document

.getElementById(id)

.classList

.add('pestana-visible');

}

/* FINAL */

function irAlFinal() {

document

.getElementById('zona-foto')

.appendChild(

document.getElementById('lienzo-personaje')

);

document

.getElementById('p-juego')

.classList

.remove('activa');

document

.getElementById('p-final')

.classList

.add('activa');

}

/* DESCARGAR */

function descargar() {

html2canvas(

document.getElementById('lienzo-personaje')

).then(canvas => {

const link=document.createElement('a');

link.download='my-kitty-room.png';

link.href=canvas.toDataURL();

link.click();

});

}

</script>

jueves, 20 de agosto de 2026

Kitty Dress Up (Tuto)

2 comentarios:

Vestidos

En la Mano

Moños y Más