JavaScript: Intro to Web Game Development – Part 7: add title screen and settings

As of the previous article, the game can be considered to be in a “complete” state, but I want to add a few features, such as a title screen, some options such as score to win, ball speed, and game colors. I also want to add a link back to the title screen from the winner screen, so this will entail some logic for navigation between pages.¬† Here is the previous article in the series:

JavaScript: Intro to Web Game Development – Part 6: add win screen and replay

Here is what the game’s title screen with options looks like:

Here are the coding steps to make all of these new features work:

Step 1: Add some new global variables

var GAME_COLOR = "black"; // default
var startNewGame = false;
var mouseClickX, mouseClickY;
var mouseClicked = false;
var box_1_selected = true; // default
var box_2_selected = false;
var box_3_selected = true; // default
var box_4_selected = false;
var box_5_selected = false;
var box_6_selected = true; // default
var box_7_selected = false;
var box_8_selected = false;
var linkText, linkText2;
var link1, link2;
var linkX2, linkY2;
var mousePosition = {x:0, y:0}
var mousePos;

Step 2: Update the game loop in the window.onload function

    // game loop - begin ------------
    var framesPerSecond = 30;
    setInterval(
        function() {

            if (startNewGame == true) {
                startGame();
            } else if (showGameOverScreen) {
                gameOverScreen();
            } else {
                titlePage();
            }

        }, 1000/framesPerSecond);
    // game loop - end  ------------

Notice the new function calls to startGame() and titlePage(). The startGame() function looks like this:

function startGame() {
    ballMovement();
    drawComponents();
}

Step 3: Enhance mousedown event listener in the window.onload function

    canvas.addEventListener('mousedown',
    function(evt) {
        mousePos = calculateMousePos(evt);
        mouseClickX = mousePos.x;
        mouseClickY = mousePos.y;
        // console.log(mousePos);
        // console.log("mouseClickX: ", mouseClickX, "mouseClickY: ", mouseClickY);
        mouseClicked = true;
    });

mouseClickX and mouseClickY are new variables that will help with determining if a button or link is clicked.

Step 4: Create new function for detecting button and link clicks

function isPointInsideRect(pointX, pointY, rectX, rectY, rectWidth, rectHeight) {
    // returns true if point is inside rect
    return  (rectX <= pointX) &&
            (rectX + rectWidth >= pointX) &&
            (rectY <= pointY) &&
            (rectY + rectHeight >= pointY);
}

This function will return true if a mouse click is within the rectangle of a button or link. Otherwise it will return false.

Step 5: Move the code for drawing the scores into it’s own function

function drawScores() {
    // Left side score - make room for more digits
    canvasContext.font="40px monospace";
    if (player1Score < 10) {
        canvasContext.fillText(player1Score, (canvas_width/2)-60, 40);
    } else if (player1Score > 99) {
        canvasContext.fillText(player1Score, (canvas_width/2)-100, 40);
    } else {
        canvasContext.fillText(player1Score, (canvas_width/2)-80, 40);
    }

    // Right side score
    canvasContext.fillText(player2Score, (canvas_width/2)+35, 40);
}

Step 6: Update the gameOverScreen() function

The winner screen has been updated with the following:

  • [settings] has been added to the bottom of both the left and right pages
  • both the play again and [settings] text now act as links that change the pointer when the mouse hovers over them
  • code has been added to make the mouseover code work
  • boxes have been created to make clicking on the the text links detectable
  • actions have been defined for when a link has been clicked

Here is an example of what the new winner screens look like. Both the “play again” and “[settings]” text are now links that change the pointer on hover and have specific actions when clicked. I also made sure the score and net were left on the screen.

Here is what the new gameOverScreen() looks like:

function gameOverScreen() {

    canvasContext.fillStyle = 'white';
    drawScores();
    drawNet();

    if(player1Score >= WINNING_SCORE) {

        canvasContext.font="54px monospace";
        canvasContext.fillText("Winner", canvas_width/8, canvas_height/4);
        canvasContext.font="44px monospace";
        canvasContext.fillText("Left Player", canvas_width/12, canvas_height/3);

        linkText = "begin game";
        linkX = (canvas_width/10);
        linkY = canvas_height/2;
        boxY = (canvas_height/2)- 50;
        var link1 = {x:65, y:235, width:280, height:60};
        // canvasContext.fillStyle = 'gray';
        // canvasContext.fillRect(link1.x, link1.y, link1.width, link1.height);
        canvasContext.fillStyle = 'white';
        canvasContext.fillText("play again", linkX, linkY);


        // options link
        canvasContext.font="38px monospace";
        linkText2 = "[settings]";
        linkX2 = canvas_width/8;
        linkY2 = canvas_height-70;
        var link2 = {x:90, y:445, width:235, height:55};
        // canvasContext.fillStyle = 'gray';
        // canvasContext.fillRect(link2.x, link2.y, link2.width, link2.height);
        canvasContext.fillStyle = 'white';
        canvasContext.fillText(linkText2, linkX2, linkY2);


    } else if(player2Score >= WINNING_SCORE) {
        canvasContext.font="54px monospace";
        canvasContext.fillText("Winner", (canvas_width/2 + canvas_width/8), (0 + canvas_height/4));
        canvasContext.font="44px monospace";
        canvasContext.fillText("Right Player", (canvas_width/2 + canvas_width/24), (0 + canvas_height/3));

        linkX = (canvas_width/2 + canvas_width/16);
        linkY = canvas_height/2;
        var link1 = {x:415, y:235, width:280, height:60};
        // canvasContext.fillStyle = 'gray';
        // canvasContext.fillRect(link1.x, link1.y, link1.width, link1.height);
        canvasContext.fillStyle = 'white';
        canvasContext.fillText("play again", linkX, linkY);


        // options link
        canvasContext.font="38px monospace";

        linkText2 = "[settings]";
        linkX2 = (canvas_width/2 + canvas_width/12);
        linkY2 = canvas_height-70;
        var link2 = {x:435, y:445, width:235, height:55};
        // canvasContext.fillStyle = 'gray';
        // canvasContext.fillRect(link2.x, link2.y, link2.width, link2.height);
        canvasContext.fillStyle = 'white';
        canvasContext.fillText(linkText2, linkX2, linkY2);

    }
    var x = mousePosition.x;
    var y = mousePosition.y;

    onlink2 = isPointInsideRect(x, y, link1.x, link1.y, link1.width, link1.height);
    onlink3 = isPointInsideRect(x, y, link2.x, link2.y, link2.width, link2.height);
    if (onlink2 == true || onlink3 == true) {
        document.body.style.cursor = "pointer";
    } else {
        document.body.style.cursor = "";
    }

    if (mouseClicked) {
        link1_clicked = isPointInsideRect(mouseClickX, mouseClickY, link1.x, link1.y, link1.width, link1.height);
        if (link1_clicked == true) {
            link1_selected = true;
            link2_selected = false;
            startNewGame = true;
            player1Score = 0;
            player2Score = 0;
            showGameOverScreen = false;
            document.body.style.cursor = "";
            startGame();
        }

        link2_clicked = isPointInsideRect(mouseClickX, mouseClickY, link2.x, link2.y, link2.width, link2.height);
        if (link2_clicked == true) {
            link1_selected = false;
            link2_selected = true;
            startNewGame = false;
            player1Score = 0;
            player2Score = 0;
            showGameOverScreen = false;
            box_1_selected = true;
            mouseClicked = false;
            titlePage();
        }

    }
    // reset to false so that the mouse click only registers once in the game loop
    mouseClicked = false;
}

Step 7: Update the computer paddle A.I. for the new ball speeds

Since there are now two new options for ball  speeds (2x and 3x), I decided to update the computer A.I. so that the game will be a little more challenging. (Otherwise the computer would almost certainly always lose.)

function computerPaddleAI() {
    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);

    var normal = 6;
    var fast = 10; // just a little less than 2x
    var crazy = 16;
    var moveSpeed;

    if (ballSpeedX == 20 ){
        moveSpeed = fast;
    } else if (ballSpeedX > 20 ){
        moveSpeed = crazy;
    } else {
        moveSpeed = normal
    }

    if(paddle2YCenter < ballY - 35) {
	paddle2Y = paddle2Y + moveSpeed;
    } else if(paddle2YCenter > ballY + 35) {
	paddle2Y = paddle2Y - moveSpeed;
    }
}

Step 8: Create the titlePage() function

function titlePage() {

    if(showGameOverScreen) {
        return;
    }

    // clear the game screen
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.roundRect(0, 0, canvas_width, canvas_height, 40, GAME_COLOR, 0);

    // draw the pong title
    canvasContext.fillStyle = 'white';
    canvasContext.font="120px monospace";
    canvasContext.fillText("pong", 230, 120);

    //draw the begin game link
    canvasContext.font="44px monospace";
    linkText = "begin game";
    linkX = 230;
    linkY = 500;
    var begin_game_link = {x:210, y:455, width:300, height:60};
    // A gray box around the text link for debugging
    // canvasContext.fillStyle = 'gray';
    // canvasContext.fillRect(begin_game_link.x, begin_game_link.y, begin_game_link.width, begin_game_link.height);
    canvasContext.fillStyle = 'white';
    canvasContext.fillText(linkText, linkX, linkY);


    // ---- Game options ----

    // ----------------------- Score limit ----------------------- //
    canvasContext.fillStyle = 'white';
    canvasContext.font="20px monospace";
    canvasContext.fillText("score limit", 100, 225);
    var bt = 28; // distance text is to the right of the box

    // box 1
    var box1 = {x:100, y:240, width:20, height:20};
    canvasContext.fillText("3", box1.x + bt, 257);
    canvasContext.fillRect(box1.x, box1.y, box1.width, box1.height);
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.fillRect(102, 242, 16, 16);

    if (box_1_selected == true) {
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(104, 244, 12, 12);
    }

    // box 2
    var box2 = {x:180, y:240, width:20, height:20};
    canvasContext.fillStyle = 'white';
    canvasContext.fillText("10", box2.x + bt, 257);
    canvasContext.fillRect(box2.x, box2.y, box2.width, box2.height);
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.fillRect(182, 242, 16, 16);

    // box 2 selected
    if (box_2_selected == true) {
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(184, 244, 12, 12);
    }

    // ----------------------- color options ----------------------- //
    canvasContext.fillStyle = 'white';
    canvasContext.font="20px monospace";
    canvasContext.fillText("game color", 450, 225);

    // box 3
    var box3 = {x:450, y:240, width:20, height:20};
    canvasContext.fillText("black & white", box3.x + bt, 257);
    canvasContext.fillRect(box3.x, box3.y, box3.width, box3.height);
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.fillRect(452, 242, 16, 16);

    if (box_3_selected == true) {
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(454, 244, 12, 12);
    }

    // box 4
    var box4 = {x:450, y:267, width:20, height:20};
    canvasContext.fillStyle = 'white';
    canvasContext.fillText("retro green", box4.x + bt, 282);
    canvasContext.fillRect(box4.x, box4.y, box4.width, box4.height);
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.fillRect(452, 269, 16, 16);

    // box 4 selected
    if (box_4_selected == true) {
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(454, 271, 12, 12);
    }

    // box 5
    var box5 = {x:450, y:294, width:20, height:20};
    canvasContext.fillStyle = 'white';
    canvasContext.fillText("cool blue", box5.x + bt, 309);
    canvasContext.fillRect(box5.x, box5.y, box5.width, box5.height);
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.fillRect(452, 296, 16, 16);

    // box 5 selected
    if (box_5_selected == true) {
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(454, 298, 12, 12);
    }

    // ----------------------- ball speed ----------------------- //
    canvasContext.fillStyle = 'white';
    canvasContext.font="20px monospace";
    canvasContext.fillText("ball speed", 100, 325);

    // box 6
    var box6 = {x:100, y:340, width:20, height:20};
    canvasContext.fillText("normal", box6.x + bt, 355);
    canvasContext.fillRect(box6.x, box6.y, box6.width, box6.height);
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.fillRect(102, 342, 16, 16);

    if (box_6_selected == true) {
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(104, 344, 12, 12);
    }

    // box 7
    var box7 = {x:100, y:367, width:20, height:20};
    canvasContext.fillStyle = 'white';
    canvasContext.fillText("fast 2x", box7.x + bt, 382);
    canvasContext.fillRect(box7.x, box7.y, box7.width, box7.height);
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.fillRect(102, 369, 16, 16);

    // box 7 selected
    if (box_7_selected == true) {
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(104, 371, 12, 12);
    }

    // box 8
    var box8 = {x:100, y:394, width:20, height:20};
    canvasContext.fillStyle = 'white';
    canvasContext.fillText("crazy 3x", box8.x + bt, 409);
    canvasContext.fillRect(box8.x, box8.y, box8.width, box8.height);
    canvasContext.fillStyle = GAME_COLOR;
    canvasContext.fillRect(102, 396, 16, 16);

    // box 7 selected
    if (box_8_selected == true) {
        canvasContext.fillStyle = 'white';
        canvasContext.fillRect(104, 398, 12, 12);
    }

    // check to see if the mouse is over the begin game link
    // if so, change the pointer to a hand, indicating a link
    var x = mousePosition.x;
    var y = mousePosition.y;

    onlink1 = isPointInsideRect(x, y, begin_game_link.x, begin_game_link.y, begin_game_link.width, begin_game_link.height);
    if (onlink1) {
        document.body.style.cursor = "pointer";
    } else {
        document.body.style.cursor = "";
    }

    // handle the case of a mouse click
    if (mouseClicked) {
        // check to see if the mouse clicked box1
        box_1_clicked = isPointInsideRect(mouseClickX, mouseClickY, box1.x, box1.y, box1.width, box1.height);
        if (box_1_clicked == true) {
            box_1_selected = true;
            box_2_selected = false;
            WINNING_SCORE = 3;
        }
        // check to see if the mouse clicked box 2
        box_2_clicked = isPointInsideRect(mouseClickX, mouseClickY, box2.x, box2.y, box2.width, box2.height);
        if (box_2_clicked == true) {
            box_1_selected = false;
            box_2_selected = true;
            WINNING_SCORE = 10;
        }

        // check to see if the mouse clicked box 3
        box_3_clicked = isPointInsideRect(mouseClickX, mouseClickY, box3.x, box3.y, box3.width, box3.height);
        if (box_3_clicked == true) {
            box_3_selected = true;
            box_4_selected = false;
            box_5_selected = false;
            GAME_COLOR = "black";
        }

        // check to see if the mouse clicked box 4
        box_4_clicked = isPointInsideRect(mouseClickX, mouseClickY, box4.x, box4.y, box4.width, box4.height);
        if (box_4_clicked == true) {
            box_3_selected = false;
            box_4_selected = true;
            box_5_selected = false;
            GAME_COLOR = "#003300";
        }

        // check to see if the mouse clicked box 5
        box_5_clicked = isPointInsideRect(mouseClickX, mouseClickY, box5.x, box5.y, box5.width, box5.height);
        if (box_5_clicked == true) {
            box_3_selected = false;
            box_4_selected = false;
            box_5_selected = true;
            GAME_COLOR = "#004080";
        }

        // check to see if the mouse clicked box 6
        box_6_clicked = isPointInsideRect(mouseClickX, mouseClickY, box6.x, box6.y, box6.width, box6.height);
        if (box_6_clicked == true) {
            box_6_selected = true;
            box_7_selected = false;
            box_8_selected = false;
            ballSpeedX = 10;
            ballSpeedY = 4;
        }

        // check to see if the mouse clicked box 7
        box_7_clicked = isPointInsideRect(mouseClickX, mouseClickY, box7.x, box7.y, box7.width, box7.height);
        if (box_7_clicked == true) {
            box_6_selected = false;
            box_7_selected = true;
            box_8_selected = false;
            ballSpeedX = 20;
            ballSpeedY = 8;
        }

        // check to see if the mouse clicked box 8
        box_8_clicked = isPointInsideRect(mouseClickX, mouseClickY, box8.x, box8.y, box8.width, box8.height);
        if (box_8_clicked == true) {
            box_6_selected = false;
            box_7_selected = false;
            box_8_selected = true;
            ballSpeedX = 30;
            ballSpeedY = 12;
        }

        // check to see if the mouse clicked the begin game link
        begin_game_link_clicked = isPointInsideRect(mouseClickX, mouseClickY, begin_game_link.x, begin_game_link.y, begin_game_link.width, begin_game_link.height);
        if (begin_game_link_clicked == true) {
            box_1_selected = false;
            box_2_selected = false;
            startNewGame = true;
            player1Score = 0;
            player2Score = 0;
            showGameOverScreen = false;
            document.body.style.cursor = "";
            startGame();
        }

    }
    // reset to false so that the mouse click only registers once in the game loop
    mouseClicked = false;

}

Notice that each box is defined as an object with x, y, width, height:

var box8 = {x:100, y:394, width:20, height:20};

And then the isPointInsideRect() function is used in conjunction with mouse click coordinates to determine if a box has been clicked:

box_8_clicked = isPointInsideRect(mouseClickX, mouseClickY, box8.x, box8.y, box8.width, box8.height);

At this point, the game is essentially complete. The only other things I can think of to add are sound effects and perhaps options for changing the computer AI player from the right to the left and maybe adding a two player option that uses keyboard arrows.

Here is the game as it stands at this point: