Foro de elhacker.net

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