{"id":1371,"date":"2018-01-08T19:00:23","date_gmt":"2018-01-09T00:00:23","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1371"},"modified":"2021-01-17T20:18:45","modified_gmt":"2021-01-18T01:18:45","slug":"javascript-intro-web-game-development-part-7-add-title-screen-settings","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2018\/01\/08\/javascript-intro-web-game-development-part-7-add-title-screen-settings\/","title":{"rendered":"JavaScript: Intro to Web Game Development &#8211; Part 7: add title screen and settings"},"content":{"rendered":"<p>As of the previous article, the game can be considered to be in a &#8220;complete&#8221; 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.\u00a0 Here is the previous article in the series:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"tLNWFF72a1\"><p><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/01\/08\/javascript-intro-to-web-game-development-part-6-add-win-screen\/\">JavaScript: Intro to Web Game Development &#8211; Part 6: add win screen and replay<\/a><\/p><\/blockquote>\n<p><iframe loading=\"lazy\" class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; clip: rect(1px, 1px, 1px, 1px);\" src=\"http:\/\/bluegalaxy.info\/codewalk\/2018\/01\/08\/javascript-intro-to-web-game-development-part-6-add-win-screen\/embed\/#?secret=tLNWFF72a1\" data-secret=\"tLNWFF72a1\" width=\"600\" height=\"338\" title=\"&#8220;JavaScript: Intro to Web Game Development &#8211; Part 6: add win screen and replay&#8221; &#8212; Chris Nielsen Code Walk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p>Here is what the game&#8217;s title screen with options looks like:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1373 \" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/pong_blue_title_screen.png\" alt=\"\" width=\"600\" height=\"440\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/pong_blue_title_screen.png 758w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/pong_blue_title_screen-300x220.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/pong_blue_title_screen-676x496.png 676w\" sizes=\"auto, (max-width: 600px) 100vw, 600px\" \/><\/p>\n<p>Here are the coding steps to make all of these new features work:<\/p>\n<p><strong>Step 1: Add some new global variables<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var GAME_COLOR = \"black\"; \/\/ default\nvar startNewGame = false;\nvar mouseClickX, mouseClickY;\nvar mouseClicked = false;\nvar box_1_selected = true; \/\/ default\nvar box_2_selected = false;\nvar box_3_selected = true; \/\/ default\nvar box_4_selected = false;\nvar box_5_selected = false;\nvar box_6_selected = true; \/\/ default\nvar box_7_selected = false;\nvar box_8_selected = false;\nvar linkText, linkText2;\nvar link1, link2;\nvar linkX2, linkY2;\nvar mousePosition = {x:0, y:0}\nvar mousePos;<\/pre>\n<p><strong>Step 2: Update the game loop in the window.onload function<br \/>\n<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">    \/\/ game loop - begin ------------\n    var framesPerSecond = 30;\n    setInterval(\n        function() {\n\n            if (startNewGame == true) {\n                startGame();\n            } else if (showGameOverScreen) {\n                gameOverScreen();\n            } else {\n                titlePage();\n            }\n\n        }, 1000\/framesPerSecond);\n    \/\/ game loop - end  ------------<\/pre>\n<p>Notice the new function calls to startGame() and titlePage(). The startGame() function looks like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function startGame() {\n    ballMovement();\n    drawComponents();\n}<\/pre>\n<p><strong>Step 3: Enhance mousedown event listener in the window.onload function<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">    canvas.addEventListener('mousedown',\n    function(evt) {\n        mousePos = calculateMousePos(evt);\n        mouseClickX = mousePos.x;\n        mouseClickY = mousePos.y;\n        \/\/ console.log(mousePos);\n        \/\/ console.log(\"mouseClickX: \", mouseClickX, \"mouseClickY: \", mouseClickY);\n        mouseClicked = true;\n    });\n\n<\/pre>\n<p>mouseClickX and mouseClickY are new variables that will help with determining if a button or link is clicked.<\/p>\n<p><strong>Step 4: Create new function for detecting button and link clicks<br \/>\n<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function isPointInsideRect(pointX, pointY, rectX, rectY, rectWidth, rectHeight) {\n    \/\/ returns true if point is inside rect\n    return  (rectX &lt;= pointX) &amp;&amp;\n            (rectX + rectWidth &gt;= pointX) &amp;&amp;\n            (rectY &lt;= pointY) &amp;&amp;\n            (rectY + rectHeight &gt;= pointY);\n}<\/pre>\n<p>This function will return true if a mouse click is within the rectangle of a button or link. Otherwise it will return false.<\/p>\n<p><strong>Step 5: Move the code for drawing the scores into it&#8217;s own function<br \/>\n<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function drawScores() {\n    \/\/ Left side score - make room for more digits\n    canvasContext.font=\"40px monospace\";\n    if (player1Score &lt; 10) {\n        canvasContext.fillText(player1Score, (canvas_width\/2)-60, 40);\n    } else if (player1Score &gt; 99) {\n        canvasContext.fillText(player1Score, (canvas_width\/2)-100, 40);\n    } else {\n        canvasContext.fillText(player1Score, (canvas_width\/2)-80, 40);\n    }\n\n    \/\/ Right side score\n    canvasContext.fillText(player2Score, (canvas_width\/2)+35, 40);\n}<\/pre>\n<p><strong>Step 6: Update the gameOverScreen() function<br \/>\n<\/strong><\/p>\n<p>The winner screen has been updated with the following:<\/p>\n<ul>\n<li>[settings] has been added to the bottom of both the left and right pages<\/li>\n<li>both the play again and [settings] text now act as links that change the pointer when the mouse hovers over them<\/li>\n<li>code has been added to make the mouseover code work<\/li>\n<li>boxes have been created to make clicking on the the text links detectable<\/li>\n<li>actions have been defined for when a link has been clicked<\/li>\n<\/ul>\n<p>Here is an example of what the new winner screens look like. Both the &#8220;play again&#8221; and &#8220;[settings]&#8221; 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.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1377 \" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/pong_green_win_screen.png\" alt=\"\" width=\"601\" height=\"444\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/pong_green_win_screen.png 755w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/pong_green_win_screen-300x221.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2018\/01\/pong_green_win_screen-676x499.png 676w\" sizes=\"auto, (max-width: 601px) 100vw, 601px\" \/><\/p>\n<p>Here is what the new gameOverScreen() looks like:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function gameOverScreen() {\n\n    canvasContext.fillStyle = 'white';\n    drawScores();\n    drawNet();\n\n    if(player1Score &gt;= WINNING_SCORE) {\n\n        canvasContext.font=\"54px monospace\";\n        canvasContext.fillText(\"Winner\", canvas_width\/8, canvas_height\/4);\n        canvasContext.font=\"44px monospace\";\n        canvasContext.fillText(\"Left Player\", canvas_width\/12, canvas_height\/3);\n\n        linkText = \"begin game\";\n        linkX = (canvas_width\/10);\n        linkY = canvas_height\/2;\n        boxY = (canvas_height\/2)- 50;\n        var link1 = {x:65, y:235, width:280, height:60};\n        \/\/ canvasContext.fillStyle = 'gray';\n        \/\/ canvasContext.fillRect(link1.x, link1.y, link1.width, link1.height);\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillText(\"play again\", linkX, linkY);\n\n\n        \/\/ options link\n        canvasContext.font=\"38px monospace\";\n        linkText2 = \"[settings]\";\n        linkX2 = canvas_width\/8;\n        linkY2 = canvas_height-70;\n        var link2 = {x:90, y:445, width:235, height:55};\n        \/\/ canvasContext.fillStyle = 'gray';\n        \/\/ canvasContext.fillRect(link2.x, link2.y, link2.width, link2.height);\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillText(linkText2, linkX2, linkY2);\n\n\n    } else if(player2Score &gt;= WINNING_SCORE) {\n        canvasContext.font=\"54px monospace\";\n        canvasContext.fillText(\"Winner\", (canvas_width\/2 + canvas_width\/8), (0 + canvas_height\/4));\n        canvasContext.font=\"44px monospace\";\n        canvasContext.fillText(\"Right Player\", (canvas_width\/2 + canvas_width\/24), (0 + canvas_height\/3));\n\n        linkX = (canvas_width\/2 + canvas_width\/16);\n        linkY = canvas_height\/2;\n        var link1 = {x:415, y:235, width:280, height:60};\n        \/\/ canvasContext.fillStyle = 'gray';\n        \/\/ canvasContext.fillRect(link1.x, link1.y, link1.width, link1.height);\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillText(\"play again\", linkX, linkY);\n\n\n        \/\/ options link\n        canvasContext.font=\"38px monospace\";\n\n        linkText2 = \"[settings]\";\n        linkX2 = (canvas_width\/2 + canvas_width\/12);\n        linkY2 = canvas_height-70;\n        var link2 = {x:435, y:445, width:235, height:55};\n        \/\/ canvasContext.fillStyle = 'gray';\n        \/\/ canvasContext.fillRect(link2.x, link2.y, link2.width, link2.height);\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillText(linkText2, linkX2, linkY2);\n\n    }\n    var x = mousePosition.x;\n    var y = mousePosition.y;\n\n    onlink2 = isPointInsideRect(x, y, link1.x, link1.y, link1.width, link1.height);\n    onlink3 = isPointInsideRect(x, y, link2.x, link2.y, link2.width, link2.height);\n    if (onlink2 == true || onlink3 == true) {\n        document.body.style.cursor = \"pointer\";\n    } else {\n        document.body.style.cursor = \"\";\n    }\n\n    if (mouseClicked) {\n        link1_clicked = isPointInsideRect(mouseClickX, mouseClickY, link1.x, link1.y, link1.width, link1.height);\n        if (link1_clicked == true) {\n            link1_selected = true;\n            link2_selected = false;\n            startNewGame = true;\n            player1Score = 0;\n            player2Score = 0;\n            showGameOverScreen = false;\n            document.body.style.cursor = \"\";\n            startGame();\n        }\n\n        link2_clicked = isPointInsideRect(mouseClickX, mouseClickY, link2.x, link2.y, link2.width, link2.height);\n        if (link2_clicked == true) {\n            link1_selected = false;\n            link2_selected = true;\n            startNewGame = false;\n            player1Score = 0;\n            player2Score = 0;\n            showGameOverScreen = false;\n            box_1_selected = true;\n            mouseClicked = false;\n            titlePage();\n        }\n\n    }\n    \/\/ reset to false so that the mouse click only registers once in the game loop\n    mouseClicked = false;\n}<\/pre>\n<p><strong>Step 7: Update the computer paddle A.I. for the new ball speeds<br \/>\n<\/strong><\/p>\n<p>Since there are now two new options for ball\u00a0 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.)<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function computerPaddleAI() {\n    var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT\/2);\n\n    var normal = 6;\n    var fast = 10; \/\/ just a little less than 2x\n    var crazy = 16;\n    var moveSpeed;\n\n    if (ballSpeedX == 20 ){\n        moveSpeed = fast;\n    } else if (ballSpeedX &gt; 20 ){\n        moveSpeed = crazy;\n    } else {\n        moveSpeed = normal\n    }\n\n    if(paddle2YCenter &lt; ballY - 35) {\n\tpaddle2Y = paddle2Y + moveSpeed;\n    } else if(paddle2YCenter &gt; ballY + 35) {\n\tpaddle2Y = paddle2Y - moveSpeed;\n    }\n}<\/pre>\n<p><strong>Step 8: Create the titlePage() function<br \/>\n<\/strong><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function titlePage() {\n\n    if(showGameOverScreen) {\n        return;\n    }\n\n    \/\/ clear the game screen\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.roundRect(0, 0, canvas_width, canvas_height, 40, GAME_COLOR, 0);\n\n    \/\/ draw the pong title\n    canvasContext.fillStyle = 'white';\n    canvasContext.font=\"120px monospace\";\n    canvasContext.fillText(\"pong\", 230, 120);\n\n    \/\/draw the begin game link\n    canvasContext.font=\"44px monospace\";\n    linkText = \"begin game\";\n    linkX = 230;\n    linkY = 500;\n    var begin_game_link = {x:210, y:455, width:300, height:60};\n    \/\/ A gray box around the text link for debugging\n    \/\/ canvasContext.fillStyle = 'gray';\n    \/\/ canvasContext.fillRect(begin_game_link.x, begin_game_link.y, begin_game_link.width, begin_game_link.height);\n    canvasContext.fillStyle = 'white';\n    canvasContext.fillText(linkText, linkX, linkY);\n\n\n    \/\/ ---- Game options ----\n\n    \/\/ ----------------------- Score limit ----------------------- \/\/\n    canvasContext.fillStyle = 'white';\n    canvasContext.font=\"20px monospace\";\n    canvasContext.fillText(\"score limit\", 100, 225);\n    var bt = 28; \/\/ distance text is to the right of the box\n\n    \/\/ box 1\n    var box1 = {x:100, y:240, width:20, height:20};\n    canvasContext.fillText(\"3\", box1.x + bt, 257);\n    canvasContext.fillRect(box1.x, box1.y, box1.width, box1.height);\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.fillRect(102, 242, 16, 16);\n\n    if (box_1_selected == true) {\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillRect(104, 244, 12, 12);\n    }\n\n    \/\/ box 2\n    var box2 = {x:180, y:240, width:20, height:20};\n    canvasContext.fillStyle = 'white';\n    canvasContext.fillText(\"10\", box2.x + bt, 257);\n    canvasContext.fillRect(box2.x, box2.y, box2.width, box2.height);\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.fillRect(182, 242, 16, 16);\n\n    \/\/ box 2 selected\n    if (box_2_selected == true) {\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillRect(184, 244, 12, 12);\n    }\n\n    \/\/ ----------------------- color options ----------------------- \/\/\n    canvasContext.fillStyle = 'white';\n    canvasContext.font=\"20px monospace\";\n    canvasContext.fillText(\"game color\", 450, 225);\n\n    \/\/ box 3\n    var box3 = {x:450, y:240, width:20, height:20};\n    canvasContext.fillText(\"black &amp; white\", box3.x + bt, 257);\n    canvasContext.fillRect(box3.x, box3.y, box3.width, box3.height);\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.fillRect(452, 242, 16, 16);\n\n    if (box_3_selected == true) {\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillRect(454, 244, 12, 12);\n    }\n\n    \/\/ box 4\n    var box4 = {x:450, y:267, width:20, height:20};\n    canvasContext.fillStyle = 'white';\n    canvasContext.fillText(\"retro green\", box4.x + bt, 282);\n    canvasContext.fillRect(box4.x, box4.y, box4.width, box4.height);\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.fillRect(452, 269, 16, 16);\n\n    \/\/ box 4 selected\n    if (box_4_selected == true) {\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillRect(454, 271, 12, 12);\n    }\n\n    \/\/ box 5\n    var box5 = {x:450, y:294, width:20, height:20};\n    canvasContext.fillStyle = 'white';\n    canvasContext.fillText(\"cool blue\", box5.x + bt, 309);\n    canvasContext.fillRect(box5.x, box5.y, box5.width, box5.height);\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.fillRect(452, 296, 16, 16);\n\n    \/\/ box 5 selected\n    if (box_5_selected == true) {\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillRect(454, 298, 12, 12);\n    }\n\n    \/\/ ----------------------- ball speed ----------------------- \/\/\n    canvasContext.fillStyle = 'white';\n    canvasContext.font=\"20px monospace\";\n    canvasContext.fillText(\"ball speed\", 100, 325);\n\n    \/\/ box 6\n    var box6 = {x:100, y:340, width:20, height:20};\n    canvasContext.fillText(\"normal\", box6.x + bt, 355);\n    canvasContext.fillRect(box6.x, box6.y, box6.width, box6.height);\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.fillRect(102, 342, 16, 16);\n\n    if (box_6_selected == true) {\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillRect(104, 344, 12, 12);\n    }\n\n    \/\/ box 7\n    var box7 = {x:100, y:367, width:20, height:20};\n    canvasContext.fillStyle = 'white';\n    canvasContext.fillText(\"fast 2x\", box7.x + bt, 382);\n    canvasContext.fillRect(box7.x, box7.y, box7.width, box7.height);\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.fillRect(102, 369, 16, 16);\n\n    \/\/ box 7 selected\n    if (box_7_selected == true) {\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillRect(104, 371, 12, 12);\n    }\n\n    \/\/ box 8\n    var box8 = {x:100, y:394, width:20, height:20};\n    canvasContext.fillStyle = 'white';\n    canvasContext.fillText(\"crazy 3x\", box8.x + bt, 409);\n    canvasContext.fillRect(box8.x, box8.y, box8.width, box8.height);\n    canvasContext.fillStyle = GAME_COLOR;\n    canvasContext.fillRect(102, 396, 16, 16);\n\n    \/\/ box 7 selected\n    if (box_8_selected == true) {\n        canvasContext.fillStyle = 'white';\n        canvasContext.fillRect(104, 398, 12, 12);\n    }\n\n    \/\/ check to see if the mouse is over the begin game link\n    \/\/ if so, change the pointer to a hand, indicating a link\n    var x = mousePosition.x;\n    var y = mousePosition.y;\n\n    onlink1 = isPointInsideRect(x, y, begin_game_link.x, begin_game_link.y, begin_game_link.width, begin_game_link.height);\n    if (onlink1) {\n        document.body.style.cursor = \"pointer\";\n    } else {\n        document.body.style.cursor = \"\";\n    }\n\n    \/\/ handle the case of a mouse click\n    if (mouseClicked) {\n        \/\/ check to see if the mouse clicked box1\n        box_1_clicked = isPointInsideRect(mouseClickX, mouseClickY, box1.x, box1.y, box1.width, box1.height);\n        if (box_1_clicked == true) {\n            box_1_selected = true;\n            box_2_selected = false;\n            WINNING_SCORE = 3;\n        }\n        \/\/ check to see if the mouse clicked box 2\n        box_2_clicked = isPointInsideRect(mouseClickX, mouseClickY, box2.x, box2.y, box2.width, box2.height);\n        if (box_2_clicked == true) {\n            box_1_selected = false;\n            box_2_selected = true;\n            WINNING_SCORE = 10;\n        }\n\n        \/\/ check to see if the mouse clicked box 3\n        box_3_clicked = isPointInsideRect(mouseClickX, mouseClickY, box3.x, box3.y, box3.width, box3.height);\n        if (box_3_clicked == true) {\n            box_3_selected = true;\n            box_4_selected = false;\n            box_5_selected = false;\n            GAME_COLOR = \"black\";\n        }\n\n        \/\/ check to see if the mouse clicked box 4\n        box_4_clicked = isPointInsideRect(mouseClickX, mouseClickY, box4.x, box4.y, box4.width, box4.height);\n        if (box_4_clicked == true) {\n            box_3_selected = false;\n            box_4_selected = true;\n            box_5_selected = false;\n            GAME_COLOR = \"#003300\";\n        }\n\n        \/\/ check to see if the mouse clicked box 5\n        box_5_clicked = isPointInsideRect(mouseClickX, mouseClickY, box5.x, box5.y, box5.width, box5.height);\n        if (box_5_clicked == true) {\n            box_3_selected = false;\n            box_4_selected = false;\n            box_5_selected = true;\n            GAME_COLOR = \"#004080\";\n        }\n\n        \/\/ check to see if the mouse clicked box 6\n        box_6_clicked = isPointInsideRect(mouseClickX, mouseClickY, box6.x, box6.y, box6.width, box6.height);\n        if (box_6_clicked == true) {\n            box_6_selected = true;\n            box_7_selected = false;\n            box_8_selected = false;\n            ballSpeedX = 10;\n            ballSpeedY = 4;\n        }\n\n        \/\/ check to see if the mouse clicked box 7\n        box_7_clicked = isPointInsideRect(mouseClickX, mouseClickY, box7.x, box7.y, box7.width, box7.height);\n        if (box_7_clicked == true) {\n            box_6_selected = false;\n            box_7_selected = true;\n            box_8_selected = false;\n            ballSpeedX = 20;\n            ballSpeedY = 8;\n        }\n\n        \/\/ check to see if the mouse clicked box 8\n        box_8_clicked = isPointInsideRect(mouseClickX, mouseClickY, box8.x, box8.y, box8.width, box8.height);\n        if (box_8_clicked == true) {\n            box_6_selected = false;\n            box_7_selected = false;\n            box_8_selected = true;\n            ballSpeedX = 30;\n            ballSpeedY = 12;\n        }\n\n        \/\/ check to see if the mouse clicked the begin game link\n        begin_game_link_clicked = isPointInsideRect(mouseClickX, mouseClickY, begin_game_link.x, begin_game_link.y, begin_game_link.width, begin_game_link.height);\n        if (begin_game_link_clicked == true) {\n            box_1_selected = false;\n            box_2_selected = false;\n            startNewGame = true;\n            player1Score = 0;\n            player2Score = 0;\n            showGameOverScreen = false;\n            document.body.style.cursor = \"\";\n            startGame();\n        }\n\n    }\n    \/\/ reset to false so that the mouse click only registers once in the game loop\n    mouseClicked = false;\n\n}<\/pre>\n<p>Notice that each box is defined as an object with x, y, width, height:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var box8 = {x:100, y:394, width:20, height:20};<\/pre>\n<p>And then the isPointInsideRect() function is used in conjunction with mouse click coordinates to determine if a box has been clicked:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">box_8_clicked = isPointInsideRect(mouseClickX, mouseClickY, box8.x, box8.y, box8.width, box8.height);<\/pre>\n<p>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.<\/p>\n<p>Here is the game as it stands at this point:<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" id=\"iframe_drop_shadow\" src=\"https:\/\/bluegalaxy.info\/js\/pong_pt7.html\" width=\"770\" height=\"575\" scrolling=\"no\" name=\"pong\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n","protected":false},"excerpt":{"rendered":"<p>As of the previous article, the game can be considered to be in a &#8220;complete&#8221; 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 &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2018\/01\/08\/javascript-intro-web-game-development-part-7-add-title-screen-settings\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: Intro to Web Game Development &#8211; Part 7: add title screen and settings<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[68,45],"class_list":["post-1371","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-addeventlistener","tag-javascript"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1371","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=1371"}],"version-history":[{"count":13,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1371\/revisions"}],"predecessor-version":[{"id":3325,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1371\/revisions\/3325"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1371"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1371"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1371"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}