How to create a start screen for my Blackjack game in HTML

user_14665749 0
Viewed 47

I am working on a beginner project and I have extreme trouble creating a simple start screen. I want to have a blank screen with a play button and a title. Pressing the play button should cause the header and button to disappear and the cards to be shown. However, when I press the play button I get this error:

Uncaught TypeError: GameLoop.start is not a function 
at enterGame (blackjack.js:30:14)
at HTMLButtonElement.onclick (index.html:16:43)

I cannot figure out what this means as start is definitely a function in GameLoop. This is what I see now when I enter my game:

enter image description here

The dealer card and buttons show for some reason, unknown to me. Here is the code:

index.html:

    <!DOCTYPE html>
    <html>
        <head>
            <title>cwd.gameloop.js</title>
            <meta charset="UTF-8">
            <meta name="viewport" content=""width=device-width, initial-scale="1.0">
            <title>Black Jack</title>
            <link rel="stylesheet" href="blackjack.css">
            <script src="blackjack.js"></script>
            <script src="gameloop.js"></script>
        </head>
    
        <body>
            <div id="start-screen" class="screen" style="display:block">
                <h1>Welcome to the Blackjack trainer!</h1>
                <button onclick="enterGame()">Play</button>
            </div>
            <canvas id="canvas" style="display:none"></canvas>
    
            <h2>Dealer: <span id="dealer-sum"></span></h2>
            <div id="dealer-cards">
                <img id="hidden" src="./Card images/card_back.png">
            </div>
    
            <h2>You: <span id="player-sum"></span></h2>
            <div id="player-cards"></div>
    
            <br>
            <button id="hit">Hit</button>
            <button id="stand":>Stand</button>
            <button id="double":>Double</button>
            <button id="surr":>Surrender</button>
            <p id="results"></p>
    
        </body>
    </html>

blackjack.css:

    body {
        font-family: Arial, Helvetica, sans-serif;
        text-align: center;
        color: white;
        background-color: #225338; 
    }
    
    #dealer-cards img {
        height:  280px;
        width: 200px;
        margin: 1px;
    }
    
    #player-cards img {
        height:  280px;
        width: 200px;
        margin: 1px;
    }
    
    #hit {
        width: 100px;
        height: 50px;
        font-size: 20px;
    }
    
    #stand {
        width: 100px;
        height: 50px;
        font-size: 20px;
    }
    
    #double {
        width: 100px;
        height: 50px;
        font-size: 20px;
    }
    
    #surr {
        width: 100px;
        height: 50px;
        font-size: 20px;
    }

relevant parts of blackjack.js:

    window.onload = function() {
    
    }
    
    window.onresize = function() {
        GameLoop.onresize();
    }
    
    function enterGame() {
        GameLoop.start();
    }

gameloop.js:

    class GameLoop {
    
        constructor() {
            this.fps = 60;
            this.ctx = null;
            this.cnv = null;
            this.loop = null;
        }
    
        prepareCanvas() {
            this.cnv = document.getElementById('canvas');
            this.ctx = this.cnv.getContext('2d');
            document.body.style.margin = 0;
            document.body.style.padding = 0;
            this.onresize();
        }
    
        onresize() {
            if ( this.cnv ) {
                this.cnv.width = window.innerWidth;
                this.cnv.height = window.innerHeight;
                this.resize();
            }
        }
    
        start() {
            this.toggleScreen('start-screen',false);
            this.toggleScreen('canvas',true);
            this.prepareCanvas();
            this.init();
            this.loop = setInterval(() => {
                this.update();
                this.render();
            }, 1000/this.fps);
        }
    
        toggleScreen(id,toggle) {
            let element = document.getElementById(id);
            let display = ( toggle ) ? 'block' : 'none';
            element.style.display = display;
        }

I have been stuck on this for hours.

blackjack css html javascript
1 Answers

You have not implemented the following methods of your GameLoop class:

resize()
init()
update()
render()

You have instantiated the GameLoop class incorrectly. This is the way to do it properly:

const blackJackGame = new GameLoop()

blackJackGame.start();

Your toggleScreen() function is not a toggle function. It is a set function. You are passing the id of an element to this function with a true or false setting. A proper toggle function checks the state of the element and then flips it to the other state.

It is very difficult to understand how you want this code to work, so all that can be done is show you what is definitely not working with this code.

Finally, in your HTML, you have created a div called start-screen. It might be an idea to wrap the rest of your HTML in another div called game-screen. Then you can start by displaying the start screen and after the Enter button is pressed, you can hide the start screen and show the game screen.

Please note that I have created a CSS class called #game-screen so that the game screen is not visible at the beginning.

function enterGame() {
  document.getElementById('start-screen').style.display = 'none';
  document.getElementById('game-screen').style.display = 'block';
}
body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  color: white;
  background-color: #225338;
}

#game-screen {
  display: none;
}

#dealer-cards img {
  height: 280px;
  width: 200px;
  margin: 1px;
}

#player-cards img {
  height: 280px;
  width: 200px;
  margin: 1px;
}

#hit {
  width: 100px;
  height: 50px;
  font-size: 20px;
}

#stand {
  width: 100px;
  height: 50px;
  font-size: 20px;
}

#double {
  width: 100px;
  height: 50px;
  font-size: 20px;
}

#surr {
  width: 100px;
  height: 50px;
  font-size: 20px;
}
<div id="start-screen" class="screen" style="display:block">
  <h1>Welcome to the Blackjack trainer!</h1>
  <button onclick="enterGame()">Play</button>
</div>
<div id="game-screen">
  <canvas id="canvas" style="display:none"></canvas>

  <h2>Dealer: <span id="dealer-sum"></span></h2>
  <div id="dealer-cards">
    <img id="hidden" src="https://source.unsplash.com/random/100x100/?card">
  </div>

  <h2>You: <span id="player-sum"></span></h2>
  <div id="player-cards"></div>

  <br>
  <button id="hit">Hit</button>
  <button id="stand" :>Stand</button>
  <button id="double" :>Double</button>
  <button id="surr" :>Surrender</button>
  <p id="results"></p>
</div>

user_185953210
Related