{"id":37149,"date":"2023-02-03T22:29:00","date_gmt":"2023-02-04T02:29:00","guid":{"rendered":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/"},"modified":"2023-02-04T01:35:49","modified_gmt":"2023-02-04T05:35:49","slug":"script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial","status":"publish","type":"post","link":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/","title":{"rendered":"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) &ndash; Tutorial"},"content":{"rendered":"<div align=\"center\" style=\"padding: 2%;\"><iframe loading=\"lazy\" title=\"Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) \u2013 Tutorial\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/7BHs1BzA4fs?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<blockquote style=\"text-align: left; background-color: #E4E4E4; border: 3px dotted gray; padding:2%;\"><p>\n<a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/p>\n<h3>Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) \u2013 Tutorial<\/h3>\n<p><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a> By <a href=\"https:\/\/www.youtube.com\/channel\/UC8butISFwT-Wl7EV0hUK0BQ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><strong>freeCodeCamp.org<\/strong><\/a><br \/>\n<strong>Published<\/strong>: Sep 28, 2022<\/p>\n<p><em style=\"font-family: 'Times New Roman',Times,serif; color: #666;\"><span style=\"font-size: 3.5em; font-weight: bold;\">\u201c<\/span><\/em><br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/i4.ytimg.com\/vi\/7BHs1BzA4fs\/hqdefault.jpg\" class=\"alignright\" align=\"right\" alt=\"freeCodeCamp.org\" style=\"width: 200px; height: auto;\"\/><\/a> Let&#8217;s explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. From sprite animation to parallax backgrounds, today we will build a game completely from scratch, with no frameworks and no libraries, using just HTML, CSS and plain vanilla JavaScript. Have fun!<\/p>\n<p>Course by Frank&#8217;s Laboratory. <a href=\"https:\/\/www.youtube.com\/c\/Frankslaboratory\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.youtube.com\/c\/Frankslabor&#8230;<\/a><\/p>\n<ul><strong>Download Project Art assets<\/strong><\/p>\n<li>\n<ul>** All art assets for this class were made by Frank or by artists he hired, there is NO copyright, you can download and use these freely for any project you want!<\/p>\n<li>Player: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/player.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Projectile: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/projectile.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Particle gears: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/gears.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<\/ul>\n<ul><strong>Backgrounds:<\/strong><\/p>\n<li>Layer 1: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/layer1.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Layer 2: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/layer2.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Layer 3: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/layer3.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Layer 4: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/layer4.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<\/ul>\n<ul><strong>Enemies:<\/strong><\/p>\n<li>Angler 1: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/angler1.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Angler 2: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/angler2.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Lucky Fish: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/lucky.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Hive Whale: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/hivewhale.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Drone: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/drone.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<\/ul>\n<ul><strong>Collision Animations:<\/strong><\/p>\n<li>Smoke: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/smokeExplosion.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<li>Fire: <a href=\"https:\/\/www.frankslaboratory.co.uk\/downloads\/103\/fireExplosion.png\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.frankslaboratory.co.uk\/do&#8230;<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<hr \/>\n<p><strong>EXTENDED class with BONUS lessons and more free sprite sheets:<\/strong> 4 new enemies, sound design, animated shield, animated projectiles and more <a href=\"https:\/\/www.udemy.com\/course\/learn-game-development-with-javascript\/?referralCode=69874A38D543D7F510F2\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.udemy.com\/course\/learn-ga&#8230;<\/a><\/p>\n<hr \/>\n<ul><strong>Contents<\/strong><\/p>\n<li>(0:00:00) Intro<\/li>\n<li>(0:01:07) HTML &amp; CSS setup<\/li>\n<li>(0:02:40) Basic JavaScript setup<\/li>\n<li>(0:04:59) Object Oriented programming with JavaScript<\/li>\n<li>(0:07:25) Creating Player and Game objects<\/li>\n<li>(0:13:18) Animation loop<\/li>\n<li>0:16:36) Keyboard inputs<\/li>\n<li>(0:26:15) Creating projectiles<\/li>\n<li>(0:33:22) Periodic events<\/li>\n<li>(0:38:30) Drawing game UI<\/li>\n<li>(0:41:20) Base enemy class<\/li>\n<li>(0:49:19) Collision detection between rectangles<\/li>\n<li>(0:54:36) Drawing game score<\/li>\n<li>(0:57:49) Win and lose condition<\/li>\n<li>(0:59:52) Counting game time<\/li>\n<li>(1:03:07) Animated parallax backgrounds<\/li>\n<li>(1:13:20) Sprite animation with JavaScript<\/li>\n<li>(1:17:02) Creating a debug mode<\/li>\n<li>(1:18:38) Animating enemy sprite sheets<\/li>\n<li>(1:25:15) Night Angler enemy class<\/li>\n<li>(1:27:39) Lucky Fish enemy class<\/li>\n<li>(1:29:02) Collecting power ups<\/li>\n<li>(1:36:51) Drawing projectiles as images<\/li>\n<li>(1:38:01) Custom fonts and game text<\/li>\n<li>(1:40:43) Cleaning up<\/li>\n<li>(1:42:51) Particle effects and physics<\/li>\n<li>(1:55:03) Particle rotation<\/li>\n<li>(1:58:47) Tweaks and fixes<\/li>\n<li>(2:01:46) Hive Whale enemy class<\/li>\n<li>(2:04:46) Drone enemy class<\/li>\n<li>(2:09:30) Dust effect animation<\/li>\n<li>(2:24:36) Fire effect animation<\/li>\n<li>(2:26:03) Tuning game difficulty<\/li>\n<li>(2:29:26) What to do next?<\/li>\n<\/ul>\n<div style=\"text-align: center; font-weight: bold\">[<a href=\"https:\/\/www.youtube.com\/watch?v=7BHs1BzA4fs\" target=\"offsite\" rel=\"nofollow noopener noreferrer\" title=\"Read More on YouTube\">READ MORE<\/a>]<\/div>\n<p><em style=\"font-family: 'Times New Roman',Times,serif; color: #666;\"><span style=\"font-size: 3.5em; font-weight: bold;\">\u201d<\/span><\/em><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML Canvas. From&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[160,109,380],"tags":[191,2738,1756,2737,193,190],"class_list":["post-37149","post","type-post","status-publish","format-standard","hentry","category-gaming","category-scripting-and-coding","category-video-tutorials","tag-coding","tag-franks-laboratory-2","tag-freecodecamp","tag-game-development","tag-javascript","tag-scripting"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) &ndash; Tutorial - WHUZZUP!<\/title>\n<meta name=\"description\" content=\"Let&#039;s explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML ...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) &ndash; Tutorial - WHUZZUP!\" \/>\n<meta property=\"og:description\" content=\"Let&#039;s explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML ...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"WHUZZUP!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/\" \/>\n<meta property=\"article:author\" content=\"EricBrooksDotComWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-04T02:29:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-04T05:35:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i4.ytimg.com\/vi\/7BHs1BzA4fs\/hqdefault.jpg\" \/>\n<meta name=\"author\" content=\"Eric Brooks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:site\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Brooks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/\"},\"author\":{\"name\":\"Eric Brooks\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\"},\"headline\":\"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\\\/ Free Game Assets) &ndash; Tutorial\",\"datePublished\":\"2023-02-04T02:29:00+00:00\",\"dateModified\":\"2023-02-04T05:35:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/\"},\"wordCount\":394,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i4.ytimg.com\\\/vi\\\/7BHs1BzA4fs\\\/hqdefault.jpg\",\"keywords\":[\"coding\",\"Frank&#039;s Laboratory\",\"freecodecamp\",\"Game Development\",\"javascript\",\"scripting\"],\"articleSection\":[\"Gaming\",\"Scripting and Coding\",\"Video Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/\",\"name\":\"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\\\/ Free Game Assets) &ndash; Tutorial - WHUZZUP!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i4.ytimg.com\\\/vi\\\/7BHs1BzA4fs\\\/hqdefault.jpg\",\"datePublished\":\"2023-02-04T02:29:00+00:00\",\"dateModified\":\"2023-02-04T05:35:49+00:00\",\"description\":\"Let's explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML ...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i4.ytimg.com\\\/vi\\\/7BHs1BzA4fs\\\/hqdefault.jpg\",\"contentUrl\":\"https:\\\/\\\/i4.ytimg.com\\\/vi\\\/7BHs1BzA4fs\\\/hqdefault.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\\\/ Free Game Assets) &ndash; Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"name\":\"WHUZZUP!\",\"description\":\"What&#039;s new at EricBrooks.Com plus news and gossip all over CyberTown\",\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\",\"name\":\"WHUZZUP!\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"contentUrl\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"width\":512,\"height\":512,\"caption\":\"WHUZZUP!\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/EricBrooksDotComWeb\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\",\"https:\\\/\\\/www.instagram.com\\\/ericbrooksdotcom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ericbrooksdotcom\",\"https:\\\/\\\/myspace.com\\\/ericbrooksdotcom\",\"https:\\\/\\\/www.pinterest.com\\\/ericbrookscom\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/ericbrooksdotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\",\"name\":\"Eric Brooks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"caption\":\"Eric Brooks\"},\"description\":\"Web &amp; Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.\",\"sameAs\":[\"https:\\\/\\\/ericbrooks.com\",\"EricBrooksDotComWeb\",\"ericbrooksdotcom\",\"ericbrookscom\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\"],\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/author\\\/site-admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) &ndash; Tutorial - WHUZZUP!","description":"Let's explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML ...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/","og_locale":"en_US","og_type":"article","og_title":"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) &ndash; Tutorial - WHUZZUP!","og_description":"Let's explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML ...","og_url":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/","og_site_name":"WHUZZUP!","article_publisher":"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","article_author":"EricBrooksDotComWeb","article_published_time":"2023-02-04T02:29:00+00:00","article_modified_time":"2023-02-04T05:35:49+00:00","og_image":[{"url":"https:\/\/i4.ytimg.com\/vi\/7BHs1BzA4fs\/hqdefault.jpg","type":"","width":"","height":""}],"author":"Eric Brooks","twitter_card":"summary_large_image","twitter_creator":"@EricBrooksCom","twitter_site":"@EricBrooksCom","twitter_misc":{"Written by":"Eric Brooks","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/#article","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/"},"author":{"name":"Eric Brooks","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a"},"headline":"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) &ndash; Tutorial","datePublished":"2023-02-04T02:29:00+00:00","dateModified":"2023-02-04T05:35:49+00:00","mainEntityOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/"},"wordCount":394,"commentCount":0,"publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/i4.ytimg.com\/vi\/7BHs1BzA4fs\/hqdefault.jpg","keywords":["coding","Frank&#039;s Laboratory","freecodecamp","Game Development","javascript","scripting"],"articleSection":["Gaming","Scripting and Coding","Video Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/","url":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/","name":"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) &ndash; Tutorial - WHUZZUP!","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/i4.ytimg.com\/vi\/7BHs1BzA4fs\/hqdefault.jpg","datePublished":"2023-02-04T02:29:00+00:00","dateModified":"2023-02-04T05:35:49+00:00","description":"Let's explore an alien planet and learn all the techniques you need to make your own 2D games with vanilla JavaScript, HTML5, CSS3 and HTML ...","breadcrumb":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/#primaryimage","url":"https:\/\/i4.ytimg.com\/vi\/7BHs1BzA4fs\/hqdefault.jpg","contentUrl":"https:\/\/i4.ytimg.com\/vi\/7BHs1BzA4fs\/hqdefault.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-code-a-2d-game-using-javascript-html-and-css-w-free-game-assets-ndash-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ericbrooks.com\/whuzzup\/"},{"@type":"ListItem","position":2,"name":"[#Script #Coding] Code a 2D Game Using JavaScript, HTML, and CSS (w\/ Free Game Assets) &ndash; Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/ericbrooks.com\/whuzzup\/#website","url":"https:\/\/ericbrooks.com\/whuzzup\/","name":"WHUZZUP!","description":"What&#039;s new at EricBrooks.Com plus news and gossip all over CyberTown","publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ericbrooks.com\/whuzzup\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization","name":"WHUZZUP!","url":"https:\/\/ericbrooks.com\/whuzzup\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/","url":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","contentUrl":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","width":512,"height":512,"caption":"WHUZZUP!"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","https:\/\/x.com\/EricBrooksCom","https:\/\/www.instagram.com\/ericbrooksdotcom\/","https:\/\/www.linkedin.com\/in\/ericbrooksdotcom","https:\/\/myspace.com\/ericbrooksdotcom","https:\/\/www.pinterest.com\/ericbrookscom\/","https:\/\/www.youtube.com\/user\/ericbrooksdotcom"]},{"@type":"Person","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a","name":"Eric Brooks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","url":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","caption":"Eric Brooks"},"description":"Web &amp; Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.","sameAs":["https:\/\/ericbrooks.com","EricBrooksDotComWeb","ericbrooksdotcom","ericbrookscom\/","https:\/\/x.com\/EricBrooksCom"],"url":"https:\/\/ericbrooks.com\/whuzzup\/author\/site-admin\/"}]}},"_links":{"self":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/37149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/comments?post=37149"}],"version-history":[{"count":4,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/37149\/revisions"}],"predecessor-version":[{"id":37155,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/37149\/revisions\/37155"}],"wp:attachment":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/media?parent=37149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/categories?post=37149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/tags?post=37149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}