You would like to implement a simple treasure hunt.
You can find a demo here: https://ironhack-dev-squad-127.github.io/lab-canvas-treasure-hunt/solution-code/
The goal is to reproduce the following grid.
For this, you will need to create a file index.html with the following code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS | Canvas Treasure Hunt</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas width="500" height="500"></canvas>
<script src="main.js"></script>
</body>
</html>You will also have to create a file main.js like the following one:
// main.js
var canvas = document.querySelector('canvas')
var ctx = canvas.getContext('2d')
var width = canvas.width
var height = canvas.height
// Iteration 1
function drawGrid() {
// TODO: write the code of the function
}
function drawEverything() {
drawGrid()
// drawPlayer()
// drawTreasure()
}
drawEverything()To finish this iteration, you have to code the code of the function drawGrid.
Now, you have to create a class Character. You should define at least:
- a
colproperty - a
rowproperty - a
moveUp()method - a
moveRight()method - a
moveDown()method - a
moveLeft()method
You have below an example of what you should happen.
var player = new Character(0,0) // (0,0) = Initial position
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,2Create a function drawPlayer that displays the player on the canvas based on its col and row values.
You can simply rely on images/character-down.png for this iteration.
- Create a class
Treasurewith a methodsetRandomPosition()and a propertycolandrow - Create a function
drawTreasure()that displays the treasure on the canvas. The picture isimages/treasure.png
Listen for keydown events to:
- Update the player's coordinates
- Draw everything again (
drawEverything())
For this you take inspiration of the following code.
document.onkeydown = function(e) {
e.preventDefault() // Stop the default behavior (moving the screen to the left/up/right/down)
switch (e.keyCode) {
case 37:
console.log('left')
break
case 38:
console.log('up')
break
case 39:
console.log('right')
break
case 40:
console.log('down')
break
}
}Do what you want to make this game awesome!
Here are some ideas:
- Add a property
directionto the player and display a different image based on the direction - Stop the player at the edges of the board
- Add another player that can be controlled with different keys (WASD)
- Add a
scoreproperty to the player and create a functiondrawScores