Hola, leyendo los comentarios veo, que muchos tienen problemas con iniciar el juego. Les comparto el código separado en HTML, CSS y JS po...

André Martín Martínez

Pregunta

student•hace 5 años

Hola, leyendo los comentarios veo, que muchos tienen problemas con iniciar el juego.

Les comparto el código separado en HTML, CSS y JS por si les es más sencillo trabajar así

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Simón Dice</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="gameboard">
        <div id="celeste" class="color celeste left" data-color="celeste"></div>
        <div id="violeta" class="color violeta right" data-color="violeta"></div>
        <div id="naranja" class="color naranja left" data-color="naranja"></div>
        <div id="verde" class="color verde right" data-color="verde"></div>
        <button id="btnEmpezar" class="btn-start" onclick="empezarJuego()">
          Empezar a jugar!
        </button>
    </div>

    <script type="text/javascript" src="simonsays.js"></script>
</body>

CSS

body {
  margin: 0;
  background: #dedede;
  display: flex;
  align-items: center;
  height: 100vh;
}

.gameboard {
  height: 100vh;
  width: 100vh;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
  max-height: 60vh;
  max-width: 60vh;
}

.color {
  width: 50%;
  height: 50%;
  display: inline-block;
}

.left {
  float: left;
}

.right {
  float: left;
}

.celeste {
  background: #22a6b3;
}

.celeste.light {
  background: #7ed6df;
}

.violeta {
  background: #be2edd;
}

.violeta.light {
  background: #e056fd;
}

.naranja {
  background: #f0932b;
}

.naranja.light {
  background: #ffbe76;
}

.verde {
  background: #6ab04c;
}

.verde.light {
  background: #badc58;
}

.btn-start {
  width: 400px;
  height: 100px;
  background: #ecf0f1;
  color: #2c3e50;
  font-size: 2.5rem;
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 200px);
}

.hide {
  display: none;
}

const celeste = document.getElementById("celeste");
const violeta = document.getElementById("violeta");
const naranja = document.getElementById("naranja");
const verde = document.getElementById("verde");
const btnEmpezar = document.getElementById("btnEmpezar");

class Juego{
    constructor(){
        this.inicializar();
    }
    inicializar(){
        btnEmpezar.classList.add('hide')
    }
}

function empezarJuego() {
  alert("Comenzando juego...");
  var juego = new Juego();
}

André Martín Martínez

student•hace 5 años

JAJAJAJAJA, buen error de dedo, es normal que ocurra

Daniel Andres Rojas Paredes

student•hace 5 años

jajaaj neee si te das cuenta escribi costructor en vez de constructor, me rei un rato largo cuando me di cuenta xD

André Martín Martínez

student•hace 5 años

¿Cambiaste todos los btnStart por btnEmpezar? igual puede ser el id de tu elemento HTML.

Daniel Andres Rojas Paredes

student•hace 5 años

genial aporte, pero una pregunta porque al cambiar el nombre de las variables no me funciona igual . mi codigo:

const btnStart =document.getElementById('btnEmpezar');
class Game{
    costructor(){
        this.begin();
    }
    begin(){
        btnStart.classList.add('hide')
    }
}
""" al remplazar la linea
*btnStart.classList.add('hide')
*por la linea
* btnEmpezar.classList.add('hide')
*el metodo .classList.add('hide')   me deja de funcionar"""

Bismark Socompi Rodriguez

student•hace 5 años

Gracias por el aporte... no me funcionaba... hasta que vi tu ejemplo, cometí el error de llamar al script al principio del body.!

Hola, leyendo los comentarios veo, que muchos tienen problemas con iniciar el juego. Les comparto el código separado en HTML, CSS y JS po...

Fundamentos de JavaScript 2018

Fundamentos de JavaScript 2018