未捕获的 TypeError：juego 不是构造函数

Question

At first it gave me that error then what I did was put only game = new game , and the code was executed normally, then when the game ends wanting to start it again this gave me that error again and I do not know how to solve it.

I do not understand if you are supposed to declare the game variable and even try to put var game = new game ( ) but nothing happens.

2VM16862 
    cod.js:127 Uncaught TypeError: juego is not a constructor
    at comienzaJ (VM16862 cod.js:127)
    at HTMLButtonElement.onclick (index.html:24)
    comienzaJ @ VM16862 cod.js:127
    onclick @ index.html:24

my javascript:

const celeste = document.getElementById('celeste')
const rojo = document.getElementById('rojo')
const verde = document.getElementById('verde')
const amarillo = document.getElementById('amarillo')
const btn = document.getElementById('btnEmpezar')
const Ultnivel = 1
class juego {
    constructor(){
        this.iniciar = this.iniciar.bind(this)
        this.iniciar()
        this.genSec()
        this.nextL()
    }
    iniciar(){
        this.selectC = this.selectC.bind(this)
        this.toggleBtn()
        this.nivel = 1
        this.colores = {
            celeste,
            rojo,
            verde,
            amarillo
        }
    }
    toggleBtn(){
        if(btn.classList.contains('ocult')){
            btn.classList.remove('ocult')
        } else {
        btn.classList.add('ocult')
        }
    }
    genSec(){
        this.secuencia = new Array(Ultnivel).fill(0).map( n => Math.floor(Math.random()*4))
    }
    nextL(){
        this.Subnivel = 0 
        this.iluminarS()
        this.addEvclick()
    }
    transFnumC(numero){
        switch (numero){
            case 0:
                return'celeste'
            case 1:
                return'rojo'
            case 2:
                return 'verde'
            case 3:
                return 'amarillo'
        }
    }
    transFColorN(color){
        switch (color){
            case 'celeste':
                return 0
            case 'rojo':
                return 1
            case 'verde':
                return 2
            case 'amarillo':
                return 3
        }
    }
    iluminarS(){
        for (let i = 0; i < this.nivel;i++){
            const color = this.transFnumC(this.secuencia[i])
            setTimeout(()=>this.iluminarC(color),1000 * i)
        }
    }
    iluminarC(color){
        this.colores[color].classList.add('lig')
        setTimeout(()=> this.apagarC(color),350)
    }
    apagarC(color){
        this.colores[color].classList.remove('lig')
    }
    addEvclick(){
        this.colores.celeste.addEventListener('click',this.selectC)
        this.colores.rojo.addEventListener('click',this.selectC)
        this.colores.verde.addEventListener('click',this.selectC)
        this.colores.amarillo.addEventListener('click',this.selectC)
    }

    elimC(){    
        this.colores.celeste.removeEventListener('click',this.selectC)
        this.colores.rojo.removeEventListener('click',this.selectC)
        this.colores.verde.removeEventListener('click',this.selectC)
        this.colores.amarillo.removeEventListener('click',this.selectC)    
    }

    selectC(ev){
        const nombreC = ev.target.dataset.color
        const numeroC = this.transFColorN(nombreC)
        this.iluminarC(nombreC)
        if (numeroC=== this.secuencia[this.Subnivel]){
            this.Subnivel++
            if (this.Subnivel===this.nivel){
                this.nivel++
                this.elimC()
                if (this.nivel=== (Ultnivel+1)){
                    this.win()
                } else{
                    setTimeout(this.nextL.bind(this),1500)
                }
            }
        }else{
            this.gameO()
        }
    }
    win(){
        swal('J99','FELICITACIONES GANASTE','success')
        .then(()=>{
            this.elimC()
            this.iniciar()
        })
    }
    gameO(){
        swal('J99','OW PERDISTE :C','error')
        .then(()=>{
            this.elimC()
            this.iniciar()
        })
    }
}
function comienzaJ() {
  juego = new juego()  
}

And html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MI SIMON</title>
    <link rel="stylesheet" href="css/estil.css">
</head>
<body>
<section class="sim_cont">
    <div class="simon">
        <div id="celeste" class="bt celeste L" data-color="celeste">

        </div>
        <div id="rojo" class="bt rojo R" data-color="rojo">

        </div>
        <div id="verde" class="bt verde L" data-color="verde">

        </div>
        <div id="amarillo" class="bt amarillo R" data-color="amarillo">

        </div>    
        <button id="btnEmpezar" class="btn_start" onclick= "comienzaJ()" >COMENCEMOS!!!</button>
    </div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
<script src="js/cod.js"></script>
</body>
</html>

And my css:

body{
    overflow: hidden;
}
.btn_start{
    position: fixed;
    text-align: center;
    top: 50%;
    left: 50%;
    z-index: 2;
    /* transform: translate(-50%, -50%); */
}
.sim_cont{
    margin: 0;
    background: #dedede;
    display: flex;
    align-items: center;
    height: 100vh;
}
.simon{
    height: 100vh;
    width: 100vh;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    max-height: 60vh;
    max-width: 60vh;
}
    .bt {
    background: blue;
    width: 50%;
    height: 50%;
    display: inline-block;
    }
    .L{
        float: left;
    }
    .R{
        float: right;
    }
    .celeste{
        background: rgb(0, 0, 182);
    }

    .rojo {
        background: rgb(199, 1, 1);
    }
    .verde {
        background: green;
    }

    .amarillo {
        background: rgb(207, 207, 0);
    }
.btn_start{
        width: 400px;
        height: 100px;
        background: #ecf0f1;
        color: #2c3e50;
        font-size: 2.5rem;
        position: absolute;
        top: calc(50% - 50px);
        left: calc(50% - 200px);
}

.ocult{
    display: none;
}
.celeste.lig{
    background: rgb(17, 0, 255);
}

.rojo.lig {
    background: rgb(255, 9, 9);
}
.verde.lig {
    background: rgb(58, 248, 58);
}

.amarillo.lig {
    background: rgb(255, 255, 3);
}

Answer 1

I didn't change much. Capitalized the class name. Assigned the instance to another variable. returned the instance in comienzaJ function.

const celeste = document.getElementById("celeste");
const rojo = document.getElementById("rojo");
const verde = document.getElementById("verde");
const amarillo = document.getElementById("amarillo");
const btn = document.getElementById("btnEmpezar");
const Ultnivel = 1;

class Juego {
  constructor() {
    this.iniciar = this.iniciar.bind(this);
    this.iniciar();
    this.genSec();
    this.nextL();
  }
  iniciar() {
    this.selectC = this.selectC.bind(this);
    this.toggleBtn();
    this.nivel = 1;
    this.colores = {
      celeste,
      rojo,
      verde,
      amarillo,
    };
  }
  toggleBtn() {
    if (btn.classList.contains("ocult")) {
      btn.classList.remove("ocult");
    } else {
      btn.classList.add("ocult");
    }
  }
  genSec() {
    this.secuencia = new Array(Ultnivel)
      .fill(0)
      .map((n) => Math.floor(Math.random() * 4));
  }
  nextL() {
    this.Subnivel = 0;
    this.iluminarS();
    this.addEvclick();
  }
  transFnumC(numero) {
    switch (numero) {
      case 0:
        return "celeste";
      case 1:
        return "rojo";
      case 2:
        return "verde";
      case 3:
        return "amarillo";
    }
  }
  transFColorN(color) {
    switch (color) {
      case "celeste":
        return 0;
      case "rojo":
        return 1;
      case "verde":
        return 2;
      case "amarillo":
        return 3;
    }
  }
  iluminarS() {
    for (let i = 0; i < this.nivel; i++) {
      const color = this.transFnumC(this.secuencia[i]);
      setTimeout(() => this.iluminarC(color), 1000 * i);
    }
  }
  iluminarC(color) {
    this.colores[color].classList.add("lig");
    setTimeout(() => this.apagarC(color), 350);
  }
  apagarC(color) {
    this.colores[color].classList.remove("lig");
  }
  addEvclick() {
    this.colores.celeste.addEventListener("click", this.selectC);
    this.colores.rojo.addEventListener("click", this.selectC);
    this.colores.verde.addEventListener("click", this.selectC);
    this.colores.amarillo.addEventListener("click", this.selectC);
  }

  elimC() {
    this.colores.celeste.removeEventListener("click", this.selectC);
    this.colores.rojo.removeEventListener("click", this.selectC);
    this.colores.verde.removeEventListener("click", this.selectC);
    this.colores.amarillo.removeEventListener("click", this.selectC);
  }

  selectC(ev) {
    const nombreC = ev.target.dataset.color;
    const numeroC = this.transFColorN(nombreC);
    this.iluminarC(nombreC);
    if (numeroC === this.secuencia[this.Subnivel]) {
      this.Subnivel++;
      if (this.Subnivel === this.nivel) {
        this.nivel++;
        this.elimC();
        if (this.nivel === Ultnivel + 1) {
          this.win();
        } else {
          setTimeout(this.nextL.bind(this), 1500);
        }
      }
    } else {
      this.gameO();
    }
  }
  win() {
    swal("J99", "FELICITACIONES GANASTE", "success").then(() => {
      this.elimC();
      this.iniciar();
    });
  }
  gameO() {
    swal("J99", "OW PERDISTE :C", "error").then(() => {
      this.elimC();
      this.iniciar();
    });
  }
}
function comienzaJ() {
  const juego = new Juego();
  return juego;
}

console.log(comienzaJ());