https://punnlert.com/_app/immutable/nodes/14.B5PO2JF0.js

1import"../chunks/Bzak7iHL.js";import"../chunks/agEmGWwY.js";import{c as j,a as s,aB as x,s as e,f as B,g as _,n as h,r as I}from"../chunks/DPNi64M2.js";import{I as R}from"../chunks/D0vE-Iwl.js";import{L as t}from"../chunks/CBaITRbR.js";import{B as T}from"../chunks/D-_9b9g9.js";import{Y}from"../chunks/DVTYdZ_9.js";import{G as A}from"../chunks/DLY10pJd.js";var M=B(`<div class="button_container svelte-1ocurfb"><!> <!></div> <h2 id="introduction"><a class="heading-link" title="Permalink" aria-hidden="true" href="#introduction"><span></span></a>Introduction</h2> <p>“Roger, Roger” is a cooperative game about a rocket travelling through space. Players have to navigate through asteroids by cooperative with each other. There is a total of 3 controls that can be accessed: trajectory control, acceleration control, and gun. trajectory control lets the player control the y-axis of the rocket, acceleration control lets the player control the x-axis, and gun lets player shoots.</p> <!> <!> <h2 id="the-main-screen"><a class="heading-link" title="Permalink" aria-hidden="true" href="#the-main-screen"><span></span></a>The main screen</h2> <p>Upon the welcome screen, the player will be greeted with the title of the game, the IP address of the server, and the prompt “press space”. The reason behind the IP address being displayed will be explained in <a href="#the-control-screen">the control screen</a> section.</p> <!> <p>After all the players have connected and the captain pressed spacebar, the main screen shows the players the rocket they are controlling. It also shows the score and lives they have left.</p> <!> <p>Group of asteroids are streaming through the right side of the screen at different velocity. The players have to use this visual display to based their control on.</p> <!> <p>If the rocket ran out of life, the game ends. The last page will display the final score and whether you got the new highscore.</p> <!> <!> <h2 id="the-control-screen"><a class="heading-link" title="Permalink" aria-hidden="true" href="#the-control-screen"><span></span></a>The control screen</h2> <p>The control screen consisted of two parts: socket connection input and the control.</p> <p>Socket connection input lets the player input the IP address of the server to gain control of the rocket. If the connection is successful, green circle appears on the right side of the input. This is because I want the server to be able to be hosted on the computer and in that case the IP address would be dynamically assigned.</p> <!> <h3 id="gun-controls"><a class="heading-link" title="Permalink" aria-hidden="true" href="#gun-controls"><span></span></a>Gun controls</h3> <p>lets the player controls the gun. There is a two seconds cooldown period for gun firing.</p> <!> <h3 id="trajectory-control"><a class="heading-link" title="Permalink" aria-hidden="true" href="#trajectory-control"><span></span></a>Trajectory control</h3> <p>lets the player controls the up-down movement of the spaceship</p> <!> <h3 id="acceleration"><a class="heading-link" title="Permalink" aria-hidden="true" href="#acceleration"><span></span></a>Acceleration</h3> <p>lets the player controls the left-right of the spaceship</p> <!> <h2 id="the-game-mechanics"><a class="heading-link" title="Permalink" aria-hidden="true" href="#the-game-mechanics"><span></span></a>The game mechanics</h2> <p>Player navigate through the group of asteroids. if they get hit, their lives decreases. they get points for shooting the asteroid depending on the size of it. There are astronauts that you can save. But you can hurt them if you accidentally shoot them. So, be careful around them. But the velocity increase with the score. The gun have a cooldown period of two seconds so players have to be conservative about their shooting. You can collect some lives as you go and save yourselves from dying. If you accidentally shoot the lives, they disappear.</p> <p>To see a clearer picture, you can check my demo on <a href="https://youtu.be/GxBwiM4es7w" rel="nofollow">YouTube</a></p> <h2 id="how-to-start"><a class="heading-link" title="Permalink" aria-hidden="true" href="#how-to-start"><span></span></a>How to start?</h2> <p>After you clone the repository, you have to go into every folder <code>/client/display; gun-control; horizontal control; vertical control</code> and <code>/server</code> then run <code>npm install</code> for each one of them.</p> <p>If you use Visual Studio Code and have a ‘Go Live’ extension, you can launch the control pages by go into <code>/client</code> then click go live.</p> <p>For the display of the main screen, go into <code>/client/display</code> directory and run <code>npm run dev</code></p> <p>To initiate the server, go into<code>/server</code> then run <code>npx nodemon 'index.js'</code></p> <p>If there is an IP address appearing on your ‘display’ screen, you are ready to play!</p> <h2 id="highlight"><a class="heading-link" title="Permalink" aria-hidden="true" href="#highlight"><span></span></a>Highlight</h2> <p>After finishing all the code, I tried to draw some pixel art to elevate the gaming experience. So, I drew this astronaut and asteroid.</p> <div class="drawing_container svelte-1ocurfb"><!> <!></div> <p>I also learned to postpone the socket.io connection and connect to the input IP (in the <a href="#the-control-screen">control sections</a>) and I am really proud of it.</p> <h2 id="software"><a class="heading-link" title="Permalink" aria-hidden="true" href="#software"><span></span></a>Software</h2> <p>The game use node to host the server, P5JS to draw the graphics, and socket.io to allow the communication between devices.</p> <h2 id="the-architecture"><a class="heading-link" title="Permalink" aria-hidden="true" href="#the-architecture"><span></span></a>The architecture</h2> <p>This is the UML of the game code.</p> <!> <h2 id="what-i-would-do-to-make-it-better"><a class="heading-link" title="Permalink" aria-hidden="true" href="#what-i-would-do-to-make-it-better"><span></span></a>What I would do to make it better</h2> <p>Right now, the obstacles are extended from the class asteroid. That is not very organized in terms of the readability of the code. So, in the future, I would like to restructure it to have a base class of “hittable” and extends every obstacle from there.</p> <p>I would also like to add collectibles other than “lives” and “astronaut”; like temporary life extension or gun boost that modify the property of the bullet fired.</p>`,1);function V(S){var l=M(),a=j(l),c=_(a);T(c,{href:"https://github.com/punnlert/RogerRoger-ID311-Individual-Project",children:(o,i)=>{h();var n=x("Github");s(o,n)},$$slots:{default:!0,icon:(o,i)=>{A(o)}}});var L=e(c,2);T(L,{href:"https://youtu.be/GxBwiM4es7w",children:(o,i)=>{h();var n=x("YouTube");s(o,n)},$$slots:{default:!0,icon:(o,i)=>{Y(o)}}}),I(a);var d=e(a,6);t(d,{src:"/images/posts/roger-roger/gameplay_1.png",alt:"Picture showing gameplay while the rocket shoots the asteroid",withLightbox:!0});var p=e(d,2);t(p,{src:"/images/posts/roger-roger/gameplay_2.png",alt:"Start Page",withLightbox:!0});var g=e(p,6);t(g,{src:"/images/posts/roger-roger/start_page.png",alt:"Start Page",withLightbox:!0});var u=e(g,4);t(u,{src:"/images/posts/roger-roger/score_and_info.png",alt:"Start Page",withLightbox:!0});var m=e(u,4);t(m,{src:"/images/posts/roger-roger/asteroid_streaming.png",alt:"Start Page",withLightbox:!0});var f=e(m,4);t(f,{src:"/images/posts/roger-roger/gameplay_2.png",alt:"Start Page",withLightbox:!0});var v=e(f,2);R(v,{src:"/images/posts/roger-roger/new_highscore.png",alt:"Start Page",withLightbox:!0});var y=e(v,8);t(y,{src:"/images/posts/roger-roger/IP_input.jpg",alt:"Start Page",withLightbox:!0});var w=e(y,6);t(w,{src:"/images/posts/roger-roger/gun_control.PNG",alt:"Start Page",withLightbox:!0});var b=e(w,6);t(b,{src:"/images/posts/roger-roger/trajectory_control.PNG",alt:"Start Page",withLightbox:!0});var P=e(b,6);t(P,{src:"/images/posts/roger-roger/acceleration.PNG",alt:"Start Page",withLightbox:!0});var r=e(P,24),k=_(r);t(k,{src:"/images/posts/roger-roger/astronaut.png",alt:"Start Page",withLightbox:!0});var $=e(k,2);t($,{src:"/images/posts/roger-roger/asteroid.png",alt:"Start Page",withLightbox:!0}),I(r);var G=e(r,12);t(G,{src:"/images/posts/roger-roger/RogerRogerUML.drawio.png",alt:"Start Page",withLightbox:!0}),h(6),s(S,l)}export{V as component};