Question 305379 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can I add sounds and a scoreboard to my tic tac toe site?

I have an assignment that I have mostly done. It is coding a tic tac toe game using Javascript. But the two big things I cannot figure out how to do are to add a working scoreboard to the site that will increment wins and ties, and adding a sound that plays when someone wins and a different sound for when there is a tie game. I really need help. I’m so confused as to what to do. I’ve looked for solutions, but I can’t see how any of the ones I’ve found work with my specific case. I’m just getting really frustrated with the whole thing and I’m tired of staring at this stupid code.

My HTML code is here.

<!DOCTYPE html>
<html lang="en">
    <audio src="../sounds/win.mp3" id="win"></audio>
    <audio src="../sounds/fail.mp3" id="tie"></audio>
    
    <head>
        <title>Tic Tac Toe</title>
        <link href="css/style.css" rel="stylesheet" type="text/css">
        <script src="js/script.js"></script>
    </head>

    <body onload="startGame();">
        <h2 id="game-message">Tic Tac Toe</h2>
        <div id="game-board"></div>
        <table id="scoreboard">
            <tr>
                <th>Player 1</th>
                <th>Player 2</th>
                <th>Ties</th>
            </tr>
            <tr id="scores">
                <td class="score" id="p1score">
                    0
                </td>
                <td class="score" id="p2score">
                    0
                </td>
                <td class="score" id="tiescore">
                    0
                </td>
            </tr>
        </table>
        <div id=button><button id="playAgain" onclick="startGame();">Play Again?</button></div>
        
    </body>
</html>

And here’s my Javascript code:

var markers = ["X", "O"];
var players = [];
players[0] = prompt("Enter player one:");
players[1] = prompt("Enter player two:");
var totals = [];
var winCodes = [7,56,73,84,146,273,292,448];
var gameOver = false;
var whoseTurn = 0;
var p1Score = 0;
var p2Score = 0;
var win = new Audio('../sounds/success.mp3');
var tie = new Audio('../sounds/fail.mp3');

function startGame()
{
    var counter = 1;
    var innerDivs = "";
    for (i = 1; i <=3; i++)
    {
        innerDivs += '<div id="row-' + i + '">';
        
        for (j = 1; j <=3; j++)
        {
            innerDivs += '<div onclick="playGame(this,' + counter + ');"></div>';
            counter *=2;
        }

        innerDivs += '</div>';
    }

    document.getElementById("game-board").innerHTML = innerDivs;
    totals = [0, 0];
    gameOver = false;
    document.getElementById("game-message").innerText = "It's " + players[whoseTurn] + "'s Turn";
}

function playGame(clickedDiv, divValue)
{
    if (!gameOver)
    {
        //add x or o
        clickedDiv.innerText = markers[whoseTurn];

        //increment total for possible win
        totals[whoseTurn] += divValue;

        //call isWin() function
        if (isWin())
        {
            document.getElementById("game-message").innerText = players[whoseTurn] + " Wins!";
        }
        else if (gameOver)
            {
                document.getElementById("game-message").innerText = "Game Over, Man!";
            }
        else
        {
        //toggle player turn
        if (whoseTurn) whoseTurn = 0; else whoseTurn = 1;

        //prevent clicking same div again
        clickedDiv.onclick = "";

        //toggle message to display next player
        document.getElementById("game-message").innerText = "It's " + players[whoseTurn] +"'s turn";
        }
    }
}
//win code logic
function isWin()
{
    for (i = 0; i < winCodes.length; i++)
    {
        if ((totals[whoseTurn] & winCodes[i]) == winCodes[i]) { gameOver = true; return true; }        
    }

    if (totals[0] + totals[1] == 511) {gameOver = true;}

    return false;

}

var playSound = function()
{
    if (isWin() = true)
    {
        win.play();
    }
    if (gameOver = true)
    {
        tie.play();
    };
    playSound();
}

The last bit on the Javascript code was my attempt at making the audio work based off of an answer I saw to somebody else who seemed to have a similar issue, but it doesn’t work for me.

As far as the scoreboard goes, I don’t even know where to start.

ETA: I have tried moving the win.play() into the isWin function like this:

if ((totals[whoseTurn] & winCodes[i]) == winCodes[i]) { gameOver = true; win.play(); return true; }

It doesn’t work, either.

Tags:

2

Answers


  1. 0

    Your playSound function won’t work, as you’re calling it within itself. Call playSound() elsewhere, when the game is over within the isWin() function

    Login or Signup to reply.
  2. 0

    The main issue is indeed the playSound function

    Since you are just triggering a sound for the end of the game, you are best putting that logic in the relevant if statements

    if (isWin())
{
    document.getElementById("game-message").innerText = players[whoseTurn] + " Wins!";
    win.play();
}
else if (gameOver)
{
    document.getElementById("game-message").innerText = "Game Over, Man!";
    tie.play();
}

    Check your developer console for any problems with loading resources. The relative path of ../sounds/<file>.mp3 is a little strange. I would suggest to just move that sounds directory into your project.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search