|
- If you are coding outside of WoofJS.com (like in Sublime), insert the Woof_JS source tag into the <head>section of your project page:
<script src="https://rawgit.com/stevekrouse/WoofJS/master/dist/woof.js"></script>
Your code now speaks Woof!
- Find an appropriate space backdrop and add the url using the setBackdropURL call.
- Find a cool transparent image for your Defender ship and declare a defender ship object using the new Image({}) call.
- Setup a forever function.
forever( function() {
});
This will take care of moving your defender, aliens and missles in real time.
- In the forever function, get your Defender to move RIGHT and LEFT if arrow keys are pressed. Something like:
if (keysDown.includes("LEFT")){
MOVE LEFT
}
At the top of your code (i.e. the initialization area), setup defenderSpeed as a variable, and move the ship this amount.
- Check if the Defender is reaching the edge of the screen and react accordingly
- Create an array of missle[]. When the space-bar is pressed to fire a missle, declare a missle object using new Circle({}), and then push it into the missle[] array.
- In the forever function, go through the missle[] array and move each missle up. Check if the missle has reached the top of the screen and destroy it by removing it from the array. There are a number of ways to do this.
- Setup a variable for numInvaders and create an array of invader[] of this size. Cycle thrugh the array and declare an Invader object using the new Image({}) call, and push it into the Invader array. Start small - one row of 3-5 Invaders.
- Write a setUpInvaders() function to sets-up Invaders, manually adding a second row, then a third.
- In the forever function, write a moveInvaders() function that moves the Invaders across the screen, and when they hit an edge, shifts them lower and switches direction.
- Write a testInvaderHit() function that cycles through each missle, and for each, cycles through each Invader to see if there is a collision. If there is, add points, and remove the missle and the Invader from their respective arrays.
- Declare the text-label objects you need (lives and points, and debug if you need it.) Have them updated inside the forever loop.
- Create an array of bomb[] to hold Invader bombs. Write a dropBomb() function that drops bombs according to your rules. When it does, declare an invader bomb object using new Circle({}) and push it into the bomb[] array.
- In your forever loop, cycle through the bomb[] array and move each bomb down. Check if the bomb has reached the bottom of the screen and destroy it by removing it from the array. There are a number of ways to do this.
- Then also check to see if the bomb has a collision with the Defender. If there is, subtract a life, and remove the bomb from its array.
- Now you are going to add Levels to your game. To make a good user experience, you will need to create a "Game Lobby" which is a screen where players wait for the game to start.
Declare a lobbySign text object and a gameOn BOOLEAN variable, initially set to FALSE.
- Get ready, this is the advanced stuff! You are going to "wrap" all your action code in the forever function into another function called doAction().
Then write another function, called doLobby(), that shows you the lobbySign message(i.e. READY?) and waits for you to press a key like the space bar or "Y" to start playing.
Finally, add a test inside the forever loop that executes doAction() if gameOn is TRUE, otherwise executes doLobby(). So when you start the game, the first thing you should see is the Lobby.
- Add variables for level and numInvadersLeft. Once all the Invaders are gone, take us to the lobby, rebuild the Invaders, and if you want, make the game harder by increasing Invader speed, ther shooting rate etc. You can also award bonus points after each level.
- Increase the number of Invaders to 20 or 30. Modify the setUpInvaders function to look at the number of Invaders, calculate the number of rows and columns and positions them in multiple rows. Color them differently based on the row.
- Keep working on the project and customizing until you are satisfied.
Ask your teacher/TA to upload it to your public folder.
|
|
