Tank Paper.js Arcade Game

Contributing

If you would like to get involved with this project email me at: [email protected].

Resources

Download Git Client: Windows, Mac

Check JavaScript code for errors: JSLint

Paper.js: Paper.js Reference, Paper.js Tutorial

Git: Git Book, Git Reference, Git Advanced Tricks

Game project to do list:

  0. Add firction to the tank, slow down if no movement given. 1. Add bullets to the game (get the tank to shoot stuff)
  2. Add bad guys to shoot at
  3. Make buildings explode or be damaged when hit with a tank bullet
  4. Add status updates in real time (score, kills, deaths, bullets left, ect...)
  5. Add exposion graphic when something is hit with a tank bullet
  6. Add sound effects to the game (moving, shooting, blowing up, ect...)
  7. Add background music to the game

Detailed Project Outline:

#1 I) Create a test to make bullets move acrossed the screen. DONE

  a) Create a small test example to show a moving bullet acrossed the canvas. DONE

    i. Create or download an image to use (I am using Gimp).
    ii. Embed the image into the HTML file.
    iii. Load the image with the Raster class.
    iv. Draw the image on the center of the screen.
    v. Put code in onFrame() to make the bullet move acrossed the screen.

  b) Copy the test in (a) and modify it with a class to contain the bullet. DONE

    i. Create a constructor that will spawn the bullet at an x and y position, an angle, and a speed.
    ii. Create an action in the Bullet class to update the bullet's position called update().
    iii. Use update() in onFrame() to show the bullet moving.
    NOTE: onFrame() happens every 1/60th of a second. 30 Seconds will be 30 * 60 or 1800 onFrame() events.

  c) Copy (b) and modify it to fire many bullets. DONE

    i. Create an array to hold the bullets.
    ii. Add a bullet every second with up to 5 bullets.

  d) Copy (c) and modify it to fire bullets repeatedly every second. DONE

    i. Delete the bullet when it leaves the screen.
    ii. Continue spawning bullets with no limits.

#1 II) Implement Bullet into the game.

  e) Reuse the code from (d) to make the take fire the bullet.

    i. All the bullets in the game will be contained in an Array class.
    i. The space bar will spawn the bullet.
    ii. The onFrame() event will update all the bullets' positions in the array.

#2 I) Enemies move randomly.

  a) Create a test with a raster showing enemy.

  b) Copy the test and hide the raster inside an Enemy class.

  c) Copy the test and modify it to randomly move the enemy around the screen.

  d) Copy the test and modify it to stop the enemy from going off the screen.

#2 II) Enemies moves towards Character

  e) Copy the test and modify it to move towards a random point on the screen.

  f) Implement the finished class into tank game.

#3 I) The Block class will show damaged buildings when hit.

  a) Create a test to display a block in the center of the screen.

  b) Copy (a) and add a method to inflict damage on the building.

#3 II) Make the tank bullets damage the buildings.

  a) Check bullets for collsions with the buildings.

  b) Damage the buildings on collision.

  b) Delete the bullet.

#4 I) Create an test to show updating feilds along with paper.js.

  a) Create an example with a text field that increments. DONE

  b) Create an example of paper.js and the text field together.

#4 II) The game updates stats to the HUD.

  c) Add a text field for each stat we want to display.

  d) The game should update the fields.

#5 I) Hear a sond along with paper.js.

  a) Create a test of a sound playing.

#5 II) Create a Sound class.

  a) Constructor takes the name or id of the sound.

  b) Create a method to play the sound.

#5 III) Use the Sound class in the game.

  a) Play a sound when the tank fires a bullet.

  a) Play a sound something explodes.

#6 I) Create an animation test showing a explosion.

#6 II) Create an Animation class.

#6 III) Put Animation into the game.

#7 I) Hear music playing along with paper.js.

  a) Create a test of music playing.

    i. Download a music track. DONE
    ii. Get it to play by itself. DONE

  b) Modify (a) to work with paper.js. DONE

  c) Modify (b) to change tracks. DONE

#7 II) Create a Music class.

  a) Constructor should take an music id or file.

  b) Should have a method to start playing.

  c) Should have a method to stop playing.

  d) Should have a method to change tracks.

#7 III) Put the test into the game.

  a) Should change tracks every so often.