{"id":979,"date":"2022-11-07T21:39:46","date_gmt":"2022-11-08T02:39:46","guid":{"rendered":"https:\/\/coderaider.tech\/?p=979"},"modified":"2022-11-07T22:12:58","modified_gmt":"2022-11-08T03:12:58","slug":"milestone-project-1","status":"publish","type":"post","link":"https:\/\/coderaider.tech\/?p=979","title":{"rendered":"Milestone Project 1"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"979\" class=\"elementor elementor-979\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b33cca9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b33cca9\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-13d9bd6\" data-id=\"13d9bd6\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap\">\n\t\t\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-2834ea1 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"2834ea1\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-847960a\" data-id=\"847960a\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1198a3f elementor-widget elementor-widget-image\" data-id=\"1198a3f\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-widget-image{text-align:center}.elementor-widget-image a{display:inline-block}.elementor-widget-image a img[src$=\".svg\"]{width:48px}.elementor-widget-image img{vertical-align:middle;display:inline-block}<\/style>\t\t\t\t\t\t\t\t\t\t<img fetchpriority=\"high\" decoding=\"async\" width=\"600\" height=\"600\" src=\"https:\/\/coderaider.tech\/wp-content\/uploads\/2022\/11\/Gem_Raider.png\" class=\"attachment-large size-large wp-image-980\" alt=\"Gem Raider\" srcset=\"https:\/\/coderaider.tech\/wp-content\/uploads\/2022\/11\/Gem_Raider.png 600w, https:\/\/coderaider.tech\/wp-content\/uploads\/2022\/11\/Gem_Raider-300x300.png 300w, https:\/\/coderaider.tech\/wp-content\/uploads\/2022\/11\/Gem_Raider-150x150.png 150w\" sizes=\"(max-width: 600px) 100vw, 600px\" \/>\t\t\t\t\t\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-f37fc2a elementor-widget elementor-widget-text-editor\" data-id=\"f37fc2a\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\/*! elementor - v3.23.0 - 05-08-2024 *\/\n.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#69727d;color:#fff}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap{color:#69727d;border:3px solid;background-color:transparent}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap{margin-top:8px}.elementor-widget-text-editor:not(.elementor-drop-cap-view-default) .elementor-drop-cap-letter{width:1em;height:1em}.elementor-widget-text-editor .elementor-drop-cap{float:left;text-align:center;line-height:1;font-size:50px}.elementor-widget-text-editor .elementor-drop-cap-letter{display:inline-block}<\/style>\t\t\t\t<h2>&#8220;Success is not final; failure is not fatal: It is the courage to continue that counts.&#8221;<\/h2><h2><span style=\"font-family: inherit; font-size: 2rem; background-color: var( --e-global-color-primary );\">&#8211;<\/span>Winston S. Churchill<\/h2>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-b7eda03 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"b7eda03\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-0503d86\" data-id=\"0503d86\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-b8f5588 elementor-widget elementor-widget-text-editor\" data-id=\"b8f5588\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<p>This is the first of the significant milestone projects for my software development Bootcamp. This project aims to combine and progress frontend development skills by making a PC-supported browser game. For this project, I chose to create a game called Gem Raider. It is a simple 2D action-adventure game centered around hunting for treasure.<\/p><p>\u00a0<\/p><p>\u201cThe game\u2019s objectives are to find and collect all the gems scattered around the map while avoiding environmental hazards and dangerous NPCs. There is no time to waste; it is time to get Raiding. Progress through all four game-level difficulties to become the Master Gem Raider!\u201d<\/p><p>\u00a0<\/p><p>I enjoyed completing this project&#8217;s development cycle and putting in more time and energy than was required for a grade because I had so much fun learning and implementing the new features. Below are some key elements that comprise the ~4,000 lines of code so far.<\/p><p>Core Features:<\/p><ul><li>Move Character via keyboard input<\/li><li>Dig for Gems via the spacebar<\/li><li>Pickup gems by running them over<\/li><li>Explorable map<\/li><li>Defined win state; collect all the gems before time runs out!<\/li><li>Multiple game levels (4 total)<\/li><li>Lose state 1 (timer)<\/li><li>Lose state 2 (NPCs Collision)<\/li><li>Randomly roaming NPCs, hostile on collision with your Adventurer<\/li><li>Detect screen size and adjust the explorable map accordingly<\/li><\/ul><p>\u00a0<\/p><p>I added the base framework for mobile and tablet screen detection and a dynamic scaling world from the beginning. I knew it would take too much time for the initial project build to have an app fully optimized for phones, tablets, and PCs. Still, I wanted to ensure the base framework was there so that expanding support to smaller devices wouldn\u2019t mean a complete overhaul. Admittedly, it added complexity and slowed down my development on this project, but I think the learning value was worth it. \u00a0<\/p><p>\u00a0<\/p><p>Things to add:<\/p><ul><li>Lose state 3 (hostile environment)<\/li><li>Complete mobile and tablet-friendly optimization for screen size and dynamic scaling environment<\/li><li>Add mouse movement alternative and click support<\/li><li>Add mobile-friendly touch support<\/li><li>Expand dynamically scaling environment features to include, becoming increasingly hospitable as time elapses. The higher the level of the map, the faster conditions worsen<\/li><\/ul><p>\u00a0<\/p><p>In summary, I made a great effort to maximize my learning potential from this project by carefully planning an approach, creating a base framework that was adaptable to multiple devices, making sure to capitalize on the separation of concerns, refactoring for efficiency constantly, and making sure to be generous on the comment code.<\/p><p>\u00a0<\/p><p>Link to playable game: <a href=\"https:\/\/danthecoderaider.github.io\/MP1\/\">https:\/\/danthecoderaider.github.io\/MP1\/<\/a><\/p><p>Link to code repository: <a href=\"https:\/\/github.com\/DantheCodeRaider\/MP1\">https:\/\/github.com\/DantheCodeRaider\/MP1<\/a><\/p>\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>&#8220;Success is not final; failure is not fatal: It is the courage to continue that counts.&#8221; -Winston S. Churchill This is the first of the significant milestone projects for my software development Bootcamp. This project aims to combine and progress frontend development skills by making a PC-supported browser game. For this project, I chose to [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":980,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[18],"tags":[],"_links":{"self":[{"href":"https:\/\/coderaider.tech\/index.php?rest_route=\/wp\/v2\/posts\/979"}],"collection":[{"href":"https:\/\/coderaider.tech\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coderaider.tech\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/coderaider.tech\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/coderaider.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=979"}],"version-history":[{"count":11,"href":"https:\/\/coderaider.tech\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions"}],"predecessor-version":[{"id":1003,"href":"https:\/\/coderaider.tech\/index.php?rest_route=\/wp\/v2\/posts\/979\/revisions\/1003"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/coderaider.tech\/index.php?rest_route=\/wp\/v2\/media\/980"}],"wp:attachment":[{"href":"https:\/\/coderaider.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=979"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coderaider.tech\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=979"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coderaider.tech\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=979"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}