como puedo adaptar este fragmento de codigo para ser usado en angular??
<div id="div_palabra"></div>
<script>
let activo
dibujarPalabra('RAT')
capturaTeclado()
function dibujarPalabra(palabra) {
const div = document.getElementById('div_palabra')
for (let i = 0; i < palabra.length; i++) {
const btn = document.createElement('button')
btn.addEventListener('click', (e) => activo = e.target)
const txt = document.createTextNode('_')
btn.appendChild(txt)
div.appendChild(btn)
}
}
function capturaTeclado() {
document.addEventListener('keyup', (e) => {
if (activo && e.keyCode > 64 && e.keyCode < 90) {
activo.innerText = e.key
}
})
}
</script>
- Copiando y pegando el código en el src/index.html debería de funcionar correctamente XD. Pero si quieres integrarlo como un componente tienes que agregar uno como tal y/o editar uno ya existente.
- En otro Post leí que estabas mencionando algo de Routing, entonces supongo que quieres agregar un Componente para registrarlo en el Módulo routing.module.ts.
- Primero agrega el Componente que en mi caso llamaré juego,
ng generate component juego
- Luego ve a tu Módulo routing.module.ts que en mi caso es app-routing.module.ts y agrega la ruta, que en mi caso terminaría todo así:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { JuegoComponent } from './juego/juego.component';
const routes: Routes = [
{
path: 'app-juego',
component: JuegoComponent
}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
- El juego.component.html terminaría así:
<div id="div_palabra"></div>
- Y el juego.component.ts así:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-juego',
templateUrl: './juego.component.html',
styleUrls: ['./juego.component.css']
})
export class JuegoComponent implements OnInit {
activo: any
constructor() { }
ngOnInit(): void {
this.dibujarPalabra('RAT')
this.capturaTeclado()
}
dibujarPalabra(palabra: string): void {
const div = document.getElementById('div_palabra')
for (let i = 0; i < palabra.length; i++) {
const btn = document.createElement('button')
btn.addEventListener('click', (e) => this.activo = e.target)
const txt = document.createTextNode('_')
btn.appendChild(txt)
div.appendChild(btn)
}
}
capturaTeclado(): void {
document.addEventListener('keyup', (e) => {
if (this.activo && e.keyCode > 64 && e.keyCode < 90) {
this.activo.innerText = e.key
}
})
}
}
- Para finalizar ejecutas lo siguiente:
ng serve -o
-- Entonces agregas a la URL /app-juego y al final debería mostrar los botones y funcionar los eventos, en mi caso la URL sería: http://localhost:4200/app-juego
- Esa es una manera poco elaborada, luego se puede adaptar mejor para usar funcionalidades más puras de Angular, primero que funcione lo anterior y luego se corrige lo demás.
me faltan dos cositas,
1) que al ingresar una letra que sea incorrecta el jugador se le descuento 1 vida
2) y que al acertar la palabra completa pase a la siguiente palabra y gane una cantidad de puntos :D