{"componentChunkName":"component---src-templates-project-js","path":"/projects/moba-game/","result":{"data":{"site":{"siteMetadata":{"title":"David Liu"}},"markdownRemark":{"id":"5c8af86b-388f-5df7-b4dc-59188aa41833","excerpt":"Was kinda bored and I liked making games, so I decided to make this app. How to play Basically go to game.stuffbydavid.ca and enter a username. Get your friends…","html":"<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 720px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/f074095c032a58693425130c9508fcc1/9c6a1/game.png\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 48.33333333333333%; position: relative; bottom: 0; left: 0; background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAABJ0AAASdAHeZh94AAAB60lEQVQoz21QyW4aQRCdn4gVxwKCme6exY7jPwhitWa6pwejSEkOOTkREKGAzWCmF5ZgyBdEyt0Qf15Y7IgDcgqfckjrqVV6elXvVRlcEKYyfg8zYe8QO1TYNLaYQr7M0NgOlEOlQ594pggFsUBMOmHfNfwYgy7Q5O30tDQ4Puu7oXa8mFCBmURcW4F0vWs71C5TtgceCsxwpe94kQXNFkjD4cvXzU+Nd077IlEcWCzGoPNGDh9iqMsR9FhUAkl8mKvNcIDLHWQAy5RJRTofu62PB62LZHlo057ryVeXbbMam55K+8LkCjwgixVo5IlDptKeSIMzZIYdCBeoNELFfiaQiEpQkEYtcd7d5aTykIoM04jutkVcYdaD/ZFBBdhirrEvUSAIgCvCNYKh3shiGkPanaEkACZNJuAQmCoYZBkBVAIoN1R2RR5V9SmXx0zCkRGLCZdHXNtVdXKuT0ATKAw87TkV7QaxZZTig8L18zdfX5S7qUInmW0ncleAg0J3L9vey7UTpSiVu9zx+atkPtrPR8+yrf1iJ1WMUkbnx/vuzw/fbus3s8Z41rh5wmT+ZXpXn/yqTefN73fNyRzI+hhwWxvPPo9n8IOmYSwXq4f7P4//vO12u1qsl8v1/eph8Xu1Wq43m83j/95fTQrueh+eCHMAAAAASUVORK5CYII='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"screenshot\"\n        title=\"screenshot\"\n        src=\"/static/f074095c032a58693425130c9508fcc1/37523/game.png\"\n        srcset=\"/static/f074095c032a58693425130c9508fcc1/e9ff0/game.png 180w,\n/static/f074095c032a58693425130c9508fcc1/f21e7/game.png 360w,\n/static/f074095c032a58693425130c9508fcc1/37523/game.png 720w,\n/static/f074095c032a58693425130c9508fcc1/302a4/game.png 1080w,\n/static/f074095c032a58693425130c9508fcc1/07a9c/game.png 1440w,\n/static/f074095c032a58693425130c9508fcc1/9c6a1/game.png 1869w\"\n        sizes=\"(max-width: 720px) 100vw, 720px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n      />\n  </a>\n    </span></p>\n<p>Was kinda bored and I liked making games, so I decided to make this app.</p>\n<h2>How to play</h2>\n<p>Basically go to <a href=\"https://game.stuffbydavid.ca/\">game.stuffbydavid.ca</a> and enter a username. Get your friends to join. Change your team and abilities at <a href=\"https://game.stuffbydavid.ca/settings\">game.stuffbydavid.ca/settings</a></p>\n<h2>Features</h2>\n<ul>\n<li>Multiple players</li>\n<li>10 abilities</li>\n<li>Multiple teams</li>\n<li>Lotso fun</li>\n</ul>\n<h2>Lessons learned</h2>\n<p>I’ve learned that making games require a LOT of math. Making a 2d game requires knowledge of basic trigonometry, since I’m working in 2d cartesian plane. In addition, collision checking also requires its own mathematical formulas.</p>\n<h2>Areas of improvement</h2>\n<ul>\n<li>I can further compartmentalize and modularize the code, it’s a bit like spaghetti right now.</li>\n</ul>\n<h2>Important Design Choices I made</h2>\n<ul>\n<li>I’ve abstracted a projectile class that contains many important actions related to the abilities - this saved lots of time coding the current 10 abilities.</li>\n</ul>","frontmatter":{"project":"Node.js Moba Game","date":"May 12, 2019","description":"A real-time online multiplayer game inspired by MOBA games like League Of Legends. Game includes support for many players, teams, and customizable abilities. Play it with your friends, it's pretty fun - for a couple of minutes."}}},"pageContext":{"slug":"/moba-game/","previous":{"fields":{"slug":"/rapviz/"},"frontmatter":{"project":"RapViz [HackTech 2020 Finalist]"}},"next":{"fields":{"slug":"/this-site/"},"frontmatter":{"project":"This Site!"}}}}}