Let's implement a simple treasure hunt game, where you would need to move a player around in search for a not-so-hidden treasure.
The goal is to reproduce the following grid.
The main.js (that you will not forget from importing in your html too) will contain the starter code to manipulate your canvas.
To finish this iteration, you have to write the code of the drawGrid function, inside the Game class.
Next step is creating a class Player. It should have at least:
- a
colproperty, to indicate the column - a
rowproperty, to indicate the row the player is in. - a
moveUp()method, to move the player up one row - a
moveDown()method, to move the player down one row - a
moveLeft()method - a
moveRight()method
Expected output:
const player = new Player(0,0) // (0,0) = Initial position (col, row)
player.moveDown() // Increase by 1 the value of player.row
player.moveDown() // Increase by 1 the value of player.row
player.moveRight() // Increase by 1 the value of player.col
console.log(player.col, player.row) // => 1,2
Write the draw method in the Player class that should display the player on the canvas, based on its col and row.
Use assets/character-down.png from the assets for this iteration.
Call the player's draw() method from the main draw function.
Write the keyPressed method that should detect LEFT_ARROW, RIGHT_ARROW, UP_ARROW, DOWN_ARROW and move the player accordingly.
Make sure you clear() before drawing your player again 😉
Create a class Treasure with a method setRandomPosition() and a property col and row.
Create a function drawTreasure() that displays the treasure on the canvas. The picture is images/treasure.png
Find some bonuses to the game!
- Scores
- Add a second player 💡keycode.info
- Try to make use of all the assets provided
You can find a demo here