daiii ⋆˚࿔𝄢ৎ୭: Còdigo de mi mini juego de vestir ദ്ദി◝ ⩊ ◜.ᐟ

Holiii, dejè muy abandonado mi blog, la verdad que no se me ocurria nada para subir, pero a raìz de que en mi tiktok alguien me pidiò el còdigo de mi mini juego, decidì subirlo por acà, voy a poner el paso a paso para que ustedes tambièn tengan su mini juego!

Paso 1: crear tus personajes ──★ ˙🍓 ̟ !!

♡⸝⸝ Antes de ponerse a programar, tienen que armar su mundo por asì decirlo, en mi caso dibujè desde cero tanto a los personajes como sus ropitas, esto es para que todo encaje y se vea bien a la hora de vestirlas y todo estè en su lugar.

Paso 2: Crear una pàgina nueva en blogger ──★ ˙🍓 ̟ !!

♡⸝⸝ Al ser como un sitio web blogger permite crear distintas pàginas que podemos personalizar totalmente gratis, para ello al entrar con nuestra cuenta, en la barra izquierda hay un apartado que dice "Pàgina", una vez que entramos ahì le damos al botòn "Crear pàgina". Aclaro que este mini juego lo hice en blogger, si bien se maneja con html, el còdigo va a cambiar ya que blogger tiene comandos especificos que no funcionan en otro lado, asì que lo màs probable es que no funcione como una pàgina fuera de blogger, pero no estoy 100% segura.

Paso 3: Pegar el còdigo ──★ ˙🍓 ̟ !!

♡⸝⸝ Ahora si, se viene la parte màs tediosa, programar (¬`‸´¬) pero como no somos programadores profesionales, pedimos ayuda a nuestra queridisima IA, en mi caso le pedì ayuda a gemini, sin embargo debo aclarar que se te hace mucho màs fàcil cuando si sabes un poco de còdigos, en mi caso si conocìa html y varias de sus funciones, y todos sabemos que las IA cometen errores, asì que me era fàcil detectarlos.

♡⸝⸝ Ya que estemos en la pàgina, ponemos la opciòn "Vista Html" y pegamos el siguiente còdigo, una vez pegado el còdigo subimos nuestras imàgenes y lo personalizamos como queramos.

♡⸝⸝ El còdigo:

"<div id="juego-completo">

<h1 style="color: hotpink;">Titulo</h1>

<p style="color: #666666;">Selecciona una Kitty para comenzar:</p>

Bases:

</div>

<button class="btn-rosa" id="btn-jugar-inicio" onclick="irAlJuego()" style="display: none; padding: 15px 40px;">✨ ¡ENTRAR AL ESTUDIO! ✨</button>

</div>

</div>

Ropita:

<h3 style="color: hotpink; margin-top: 0px;">👗 Vestidos</h3>

</div>

<button class="btn-rosa" onclick="cambiarPestana('tab-mano')">Siguiente →</button>

</div>

Accesorios:

</div>

<button class="btn-rosa" onclick="cambiarPestana('tab-vestidos')">Atrás</button>

<button class="btn-rosa" onclick="cambiarPestana('tab-detalles')">Siguiente</button>

</div>

<h3 style="color: hotpink; margin-top: 0px;">🎀 Moños y Más</h3>

</div>

<button class="btn-rosa" onclick="cambiarPestana('tab-mano')">Atrás</button>

<button class="btn-rosa" onclick="irAlFinal()" style="background: rgb(255, 20, 147);">✨ FINALIZAR</button>

</div>

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

<br />

<button class="btn-rosa" onclick="descargar()">💾 GUARDAR FOTO</button>

<button class="btn-rosa" onclick="location.reload()" style="background: rgb(135, 206, 235);">REINICIAR</button>

</div>

<style>

#juego-completo { width: 100%; max-width: 850px; margin: 0 auto; font-family: 'Courier New', monospace; text-align: center; background: #FFF; border: 4px double #FFB7C5; border-radius: 20px; padding: 20px; box-sizing: border-box; }

.pantalla { display: none; }

.activa { display: block !important; }

.game-container { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }

#lienzo-personaje { width: 320px; height: 320px; border: 3px solid #FF69B4; border-radius: 15px; position: relative; overflow: hidden; flex-shrink: 0; }

.fondo-habitacion { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0.6; }

.capa { position: absolute; top: 0; left: 0; width: 320px !important; height: 320px !important; object-fit: contain; pointer-events: none; background: transparent !important; }

.menu-contenedor { width: 350px; background: #FFF0F5; padding: 15px; border-radius: 15px; border: 2px solid #FFB7C5; }

.pestana { display: none; }

.pestana-visible { display: block; }

.armario-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 15px; max-height: 300px; overflow-y: auto; }

.item-img { width: 100%; aspect-ratio: 1/1; background: #fff; border: 1px solid #FFB7C5; border-radius: 8px; cursor: pointer; object-fit: contain; }

.btn-rosa { background: #FF69B4; color: white; border: 2px solid #FFF; padding: 10px 20px; border-radius: 30px; cursor: pointer; font-weight: bold; margin-top: 5px; }

.selector-base { display: flex; justify-content: center; gap: 20px; margin: 20px 0; }

.preview-base { width: 110px; cursor: pointer; border: 3px solid #FFB7C5; border-radius: 15px; }

</style>

let baseLink = "";

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';

}

function irAlJuego() {

document.getElementById('base-img').src = baseLink;

document.getElementById('p-inicio').classList.remove('activa');

document.getElementById('p-juego').classList.add('activa');

}

function ponerPrenda(id, url) {

const el = document.getElementById(id);

el.src = url; el.style.display = 'block';

}

function cambiarPestana(id) {

document.querySelectorAll('.pestana').forEach(p => p.classList.remove('pestana-visible'));

document.getElementById(id).classList.add('pestana-visible');

}

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');

}

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>"

♡⸝⸝ Este serìa el còdigo, un tip extra es que para obtener los links de las imàgenes deben crear una entrada (que quede como borrador), subir sus imàgenes como normalmente lo harìan y luedo dar a la opciòn "Vista html", ahì les van a salir los links, solo quedaria copiarlos y pegarlos en los contenedores de las bases, ropita, etc.

Paso 4: Crear un botòn que los mande directamente al juego ──★ ˙🍓 ̟ !!

♡⸝⸝ Para que puedan entrar al juego, es importante que haya algùn botòn que los mande allì, para eso vamos a ir a Diseño, bajar hasta llegar a las barras laterales y poner Crear Gadget > Java Script/Html, allì vamos a pegar el siguiente còdigo:

<p style="font-family: 'Courier New', monospace; font-size: 14px; color: #FF69B4; font-weight: bold; margin: 5px 0;">¡Viste a Hello Kitty!</p>

<a href="https://dailydaibritos.blogspot.com/p/sanrio-dress-up.html" style="

display: inline-block;

padding: 10px 20px;

background-color: #FFB7C5;

color: white;

text-decoration: none;

border-radius: 20px;

font-family: Arial, sans-serif;

font-weight: bold;

border: 2px solid white;

box-shadow: 2px 2px 5px rgba(0,0,0,0.1);

transition: 0.3s;

" onmouseover="this.style.backgroundColor='#FF69B4'" onmouseout="this.style.backgroundColor='#FFB7C5'">

🎀 JUGAR AHORA 🎀

</a>

</div>

Eso serìa todo, si tienen alguna duda dejenla en el chat, y si quieren algùn otro còdigo no duden en pedirlo, espero que les sirva!! (˶>⩊<˶)

domingo, 22 de febrero de 2026

Còdigo de mi mini juego de vestir ദ്ദി◝ ⩊ ◜.ᐟ

1 comentario:

Còdigo de mi mini juego de vestir ദ്ദി◝ ⩊ ◜.ᐟ