Using pixijs to render the whole RTS game appearance.
Divide main page into multi sections.
- Main Map Render
- Mini Map Render
- Room
- User status
- Menu: contains build, move, home four buttons
- build: using for building a building
- move: using for moving population from one chunk to another chunk
- home: using for moving field of version to user's home chunk
- Render 4*2 chunks
One chunk contains 16*16 space
- Rerender 8 chunks if getting map data from backend server
- Press Q can show map info
- Showing user's money, energy, and soldier
- Replace number when getting data from server
- Render all data but with mask, user can only see part of them
- The color of block shows its environment
- The upper block color shows the belonger
- none: no color
- yours: green
- others: red
- User can drag and drop to move mini map mask position
- Showing message/server message when getting data from server
- Click enter or send button to transfer message to server
- server message would save in server
Contains build, move, and home button
- Steps:
- click button and select which building wonna to build
- select the space on the main map where to build
- green means user can build
- red means user cannot build
- sending request to server asking for updating
- Steps:
- click button
- click from button
- click chunk in mini map to select where the user moving solider from
- click to button
- click chunk in mini map to select where the user moving solider to
- click -, + button to set the amount of population to move
- click go button sending request to server asking for updating
user can drag and drop minimap to see other space
- click to move center chunk of main map postion to the place user first occupied
- /src
- /source
- /img
- /media
- /fonts
- /mainMap
- /miniMap
- /GameData
- /status
- /comm
- /building
- /room
- /menu
- /source
- app.js - server enter point