|
- 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 backdrop (space, jungle?) and add the url using the setBackdropURL call.
- Declare a paddle object using the new Rectangle({}) call.
- Setup a forever function.
forever( function() {
});
This will take care of moving the ball and paddle in real time.
- In the forever function, get your paddle 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 paddleSpeed as a variable, and move the paddle this amount.
- Declare a ball object using new Circle({}) .
- In the initialization area, setup ballXVelocity and ballYVelocity as variables.
Then in the forever function, use these to move the ball.
- Make the ball bounce properly when it hits any of the 4 edges.
- Test for the ball hitting the paddle and have it bounce. There are a number of ways to do this. For extra credit, you can test for the ball hitting the right and left sides of the paddle and increase the angle of deflection in those collissions.
- In the initialization area, create a text label using new Text({}) and declare lives and points as variables. If the ball hits the bottom edge, lose a life. Have the label updated inside the forever loop, showing lives and points.
- Time to add Blocks! Add numBlocks as a variable and create an array of that size. Start with a few blocks, it will be easier to test. Iterate through the array and declare a rectangle block for each element in the array.
- Write a setUpBlocks() function to iterate through the blocks and places them (sets their x and y) evenly in the middle of the canvas. Start with the blocks in a single row, then add a second row, etc.
- Collision detection! In the forever function, iterate through all the blocks, and test if any of them are touching the ball. If they are, remove the block and add points.
Once this is all working....congratulations! You now have a "first build" of a fully working game. Show it to your friends. Take a break!
- 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 numBlocksLeft. Once all the blocks are gone, take us to the lobby, rebuild the blocks, and if you want, make the game harder by increasing ball velocity, shortening the paddle, etc. You can also award bonus points after each level.
- Increase the number of blocks to 20 or 30. Modify the setUpBlocks function to look at the number of blocks, calculate the number of rows and columns and positions the blocks in multiple rows. Color them differently based on the row.
- Keep working on the project and customizing until you are satisfied. Then ask your teacher/TA to upload it to your public folder.
|
|
