Vectors, Thrust, & Spaceships: Movement & Images

Planning
Step 1
What we're building

We will be building a game that handles physics for spaceships which can turn and accelerate in any direction. Many games can be built using these physics, but we will cover three

  • Race
  • Survival
  • Adventure

Temp1558993973
Step 2
Grab the p5js CDN
Temp1558994225 Temp1558994385
Step 3
Setup the index
Temp1558994620
Step 4
Create a file to store our images
Temp1558994724 Temp1558994830
Step 5
Find a background image

I chose stars, but you can use whatever image you want

Temp1558995390
Step 6
Load in your image
Temp1558996039 Temp1558995861
Step 7
Display the image

We will use push to create a new canvas to draw on

Translate moves that canvas ( in this case 250px to the right and 250px down)

Pop returns us to the original canvas

You may wish to add additional parameters to your image function to modify it's size. The goal is to have it extend off the screen.

Temp1567023706 Temp1558996417
Step 8
Add a file to store our ship
Temp1558996471 Temp1558996593
Step 9
Create the ship class
Temp1558996861
Step 10
Add a draw method
Temp1566261240
Step 11
Create a ship named player
Temp1566261349
Step 12
Draw the player
Temp1566261397 Temp1566261415
Step 13
Center it

This will draw rectangles from their center instead of the top left corner

Temp1566261564 Temp1566261580
Information
Step 14
Rotation

Radians are another way of keeping track of rotation

There are Pi Radians per 180 degrees

Because JavaScript uses radians by default we will have to keep this in mind

Temp1566261937
Step 15
Add a Direction

For now we will randomly set the direction to test our draw method

Temp1566262163 Temp1566262185
Challenge
Step 16
Images

Load in a new image for your space ship

Temp1568324989 Temp1566262601
Step 17
Velocity

Add properties to keep track of your ship's velocity

Temp1566262793
Step 18
Move the player
Temp1566263374
Step 19
Update the draw function to prepare for movement
Temp1566263449
Step 20
Move the background as the player moves

We only move the background at 1/5th the speed of the player to give the illusion it is far in the distance

Temp1568233298
Step 21
Draw the player!
Temp1568233365
Step 22
Move the player
Temp1568233504
Check Your Work
Step 23
Movement!
Temp1566263708
Challenge
Step 24
Point in the right direction
Temp1566263800 Temp1566263827
Step 25
Add a method to control the velocity of the ship
Temp1566263962
Step 26
Lose 1% of velocity each frame
Temp1566264103
Step 27
Set the velocity in the move method
Temp1566264164
Check Your Work
Step 28
Your Ship should now slow down
Temp1566264257

Vector diagrams are a great way to indicate forces. In this case it is not drawn to scale as the acceleration should be 1/100th the length of the velocity

Step 29
Create a new file to read keyboard inputs
Temp1566264559
Step 30
Load in the file
Temp1566264642
Step 31
Create memory spaces to store key states
Temp1566850855
Step 32
Log Keystrokes
Temp1566851106
Step 33
Log mouse buttons
Temp1566851184
Step 34
Prevent arrow keys from scrolling
Temp1566851383
Step 35
Select and assign keys to control your ship

Codes for all keys can be found here:

Temp1566851623
Step 36
Create variables to contain angular velocity and angular thrust
Temp1566852286
Step 37
Set Angular velocity using your turning keys
Temp1566852408
Step 38
Spin!
Temp1566852518
Challenge
Step 39
Pick a more reasonable turn speed
Temp1566852556
Step 40
Add thrust to control forwards and backwards speed
Temp1566852714
Step 41
Thrust!
Temp1566853150 Temp1566852775
Challenge
Step 42
choose a reasonable thrust
Temp1566853224
Check Your Work
Step 43
Your game should now look like this

Click into the canvas below and try it out!


Vectors, Thrust, & Spaceships: Movement & Images Info

Account

MVCode Clubs

Created By

Missing tiny jake wheaton

Access Level

premium

For Teachers and Schools

Teach coding to your students with MVCode Teach

MVCode offers an integrated product designed to teach coding to students.

Learn more about MVCode Teach