|
- 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!
- Setup a dark background for your project.
- Think of 5-7 tile types you want to use in your map and find images for each. These can be any size you find, we’ll scale them down to tile size later.
- Put the URL’s to the tiles in an array. Then create another array of tileNames[] and put the name of each tile in the corresponding cell in that array.
- Write a function to print out the legend on the side of your screen. HINT: You can iterate through the tiles and the tile names in the same loop.
- Now create 2-D array containing your adventure map matrix, like so:
var mapMatrix = [
[1,4,4,4,4,1,2,2,2,2],
[1,1,4,4,1,1,1,2,2,2],
[1,1,3,5,1,1,1,1,2,4],
[1,3,3,5,1,1,2,2,2,5],
[4,3,1,1,2,2,3,2,2,2],
[4,3,1,1,3,3,3,3,3,2],
[1,3,1,1,1,3,3,3,3,2],
[3,3,3,1,1,3,3,3,3,3],
[3,3,3,3,3,3,3,1,3,3],
[3,3,3,3,3,3,3,3,3,3],
];
- Write your main function, to display the tile map. Use nested FOR-LOOPS to iterate through the 2-D matrix array and read the tile type in each square. Then figure out the X and Y of the tile, and create it using new Image({})
- EXTRA CREDIT: Create a simple text-box editor to let you edit the map matrix in the browser.
|
|
