{"id":1231,"date":"2017-12-30T15:52:52","date_gmt":"2017-12-30T20:52:52","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1231"},"modified":"2017-12-30T16:44:49","modified_gmt":"2017-12-30T21:44:49","slug":"javascript-intro-web-game-development-part-3-add-graphical-components","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/12\/30\/javascript-intro-web-game-development-part-3-add-graphical-components\/","title":{"rendered":"JavaScript: Intro to Web Game Development &#8211; Part 3: add graphical components"},"content":{"rendered":"<p>Continuing the series on how to create a web browser game of Pong using JavaScript, this post will show how to add some graphical components to the game, such as the right and left paddles, ball, net and score placeholders. Part 2 is here:<\/p>\n<blockquote class=\"wp-embedded-content\" data-secret=\"2386cGct4P\"><p><a href=\"http:\/\/bluegalaxy.info\/codewalk\/2017\/12\/29\/javascript-intro-web-game-development-part-2-canvascontext-rounded-corners\/\">JavaScript: Intro to Web Game Development &#8211; Part 2: canvasContext with rounded corners<\/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\/2017\/12\/29\/javascript-intro-web-game-development-part-2-canvascontext-rounded-corners\/embed\/#?secret=2386cGct4P\" data-secret=\"2386cGct4P\" width=\"600\" height=\"338\" title=\"&#8220;JavaScript: Intro to Web Game Development &#8211; Part 2: canvasContext with rounded corners&#8221; &#8212; Chris Nielsen Code Walk\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe><\/p>\n<p><strong>Step 1: Draw the net<br \/>\n<\/strong><\/p>\n<p>Here is a function to draw the net, placed outside of the window.onload function:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">function drawNet() {\r\n    for(var i = 0; i &lt; canvas_height; i += 30) {\r\n        canvasContext.fillStyle = 'white';\r\n\tcanvasContext.fillRect(canvas_width\/2, i, 2, 10, 'white');\r\n    }\r\n}<\/pre>\n<p>The middle of the screen is found at canvas_width\/2. i += 30 is what causes the spaces between the dashes.<\/p>\n<p>Then simply call the function from inside the window.onload function:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">drawNet();<\/pre>\n<p>&nbsp;<br \/>\n<strong>Step 2: Draw the right and left paddles<br \/>\n<\/strong><\/p>\n<p>Here is some code, placed inside the window.onload function, that will create the paddles (placed statically for now):<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Left paddle\r\ncanvasContext.fillStyle = 'white';\r\ncanvasContext.fillRect(30, 50, 10, 70);\r\n\r\n\/\/ Right paddle\r\ncanvasContext.fillStyle = 'white';\r\ncanvasContext.fillRect(canvas_width-40, canvas_height-120, 10, 70);<\/pre>\n<p>&nbsp;<br \/>\n<strong>Step 3: Draw the ball<\/strong><\/p>\n<p>For now, I will just draw the ball as a 10 x 10 square:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Draw the ball\r\ncanvasContext.fillStyle = 'white';\r\ncanvasContext.fillRect(200, 300, 10, 10);<\/pre>\n<p>&nbsp;<br \/>\n<strong>Step 4: Draw the placeholders for the scores<br \/>\n<\/strong><\/p>\n<p>I want these at the top of the canvas, on the left and right side of the net:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">\/\/ Place holder for the scores\r\ncanvasContext.font=\"40px monospace\";\r\ncanvasContext.fillText(\"1\", (canvas_width\/2)-60, 40);\r\ncanvasContext.fillText(\"0\", (canvas_width\/2)+35, 40);<\/pre>\n<p>&nbsp;<br \/>\nHere is what the canvas looks like so far:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-1236 size-full\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/12\/pong_canvas.png\" alt=\"\" width=\"382\" height=\"290\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/12\/pong_canvas.png 382w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/12\/pong_canvas-300x228.png 300w\" sizes=\"auto, (max-width: 382px) 100vw, 382px\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Continuing the series on how to create a web browser game of Pong using JavaScript, this post will show how to add some graphical components to the game, such as the right and left paddles, ball, net and score placeholders. Part 2 is here: JavaScript: Intro to Web Game Development &#8211; Part 2: canvasContext with &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/12\/30\/javascript-intro-web-game-development-part-3-add-graphical-components\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: Intro to Web Game Development &#8211; Part 3: add graphical components<\/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":[82,86,45],"class_list":["post-1231","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-canvas","tag-canvascontext","tag-javascript"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1231","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=1231"}],"version-history":[{"count":6,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1231\/revisions"}],"predecessor-version":[{"id":1239,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1231\/revisions\/1239"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1231"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1231"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1231"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}