{"id":1186,"date":"2017-12-29T12:43:05","date_gmt":"2017-12-29T17:43:05","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=1186"},"modified":"2018-02-17T18:21:43","modified_gmt":"2018-02-17T23:21:43","slug":"javascript-intro-web-game-development-part-1-canvas-element","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/12\/29\/javascript-intro-web-game-development-part-1-canvas-element\/","title":{"rendered":"JavaScript: Intro to Web Game Development – Part 1: canvas element"},"content":{"rendered":"

For this series, I am going to detail how to use JavaScript to create a web based browser game by going step by step through all of the concepts involved in creating the game of Pong. I will be using parts of the tutorial<\/a> written by Chris DeLeon, but greatly expanding on and customizing his code example.<\/p>\n

The first concept to introduce when it comes to making JavaScript browser games is the use of the HTML5 canvas object. A canvas is basically a rectangular box that you can insert into any HTML document which JavaScript will use to draw on.<\/p>\n

Here is what w3shcools.com says about the canvas element:<\/p>\n

The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.<\/p>\n

The <canvas> element is only a container for graphics. You must use JavaScript to actually draw the graphics.<\/p>\n

Canvas has several methods for drawing paths, boxes, circles, text, and adding images.<\/p><\/blockquote>\n

Since this game will live in a web page, lets start by setting up an empty HTML document that will serve as a template.<\/p>\n

<html>\r\n<head>\r\n  <meta http-equiv=\"content-type\" content=\"text\/html; charset=UTF-8\">\r\n<\/head>\r\n<body>\r\n\r\nPong 1.0<br>\r\n\r\n<!-- Create an HTML canvas and assign it an id. -->\r\n<canvas id=\"gameCanvas\" width=\"750\" height=\"550\" style=\"border:1px\u00a0solid\u00a0\r\n#000000;\"><\/canvas>\r\n\r\n<script>\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html><\/pre>\n
For this project, I gave the canvas an id name of “gameCanvas” and a size 750 pixels wide by 550 pixels high. Nothing is visible on the page yet except the word “Pong 1.0”, and a 1 pixel border around the canvas, which I added just to make the canvas visible at this point. The HTML template also has <script><\/script><\/code> tags where the JavaScript code will live.<\/p>\n
Here is what the canvas looks like so far:<\/p>\n
\"\"<\/p>\n
For more information about the HTML canvas element, see:
\nhttps:\/\/www.w3schools.com\/html\/html5_canvas.asp<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
For this series, I am going to detail how to use JavaScript to create a web based browser game by going step by step through all of the concepts involved in creating the game of Pong. I will be using parts of the tutorial written by Chris DeLeon, but greatly expanding on and customizing his … Continue reading JavaScript: Intro to Web Game Development – Part 1: canvas element<\/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,81,45],"class_list":["post-1186","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-canvas","tag-html5","tag-javascript"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1186","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=1186"}],"version-history":[{"count":14,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1186\/revisions"}],"predecessor-version":[{"id":1514,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/1186\/revisions\/1514"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=1186"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=1186"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=1186"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}