Add constraints to edge of map so the horse can't walk past the edge of the canvas

[digitaldina]

I'm working on this one! Hopefully I'll have it done by Saturday!

[thalaeg]

Sweet! Thanks @dinaelhanan . We will be excited to see what you can do.

[digitaldina]

As I'm working through this, I'm stuck on where in the code I should put my code. I'm sorry if it sounds like a dumb question I just really want to be able to tackle this! I'm thinking that I should put it in an eventlistener like the ones below in the mygameArea function.

window.addEventListener('keydown', function (e) {
            myGameArea.key = e.keyCode;
        })
        window.addEventListener('keyup', function (e) {
            myGameArea.key = false;
        })

Or in this function, which includes the code that clears the apples when you're close to it.

this.newPos = function () {

[digitaldina]

Ok I've found this: https://gist.github.com/maksr51314/54aa2de052378aaedb80775b8153f806 Which is really helpful, but since I don't see a player class or anything, I'm confused as to where I would state the maximum and minimum x and y values for the horse to go. Can anyone point me in the right direction?

Thanks again.

[caseydierking]

I think perhaps the answer your liking for us the “component” function in game.js . I’m currently on mobile and can’t really compare the two very well. But that might get you pointed in the right direction?

[thalaeg]

Well not quite. The component is a piece. The maximum and minimum the horse would be able to go would be the size of the canvas. Within the "myGameArea" "start" function there is where the size of the canvas is set. Perhaps we create a variable outside out the myGameArea that holds the constraint for the size of the canvas, apply to to the canvas and then also use it for your fence function @dinaelhanan . Does that sound like a good idea?

[digitaldina]

Hi @thalaeg, that sounds good, thanks for the help! But also, the issue I'm having is with applying the max canvas size to that part of the myGameArea. Do I put it with the eventlisteners? I am just confused as to how I would set a maximum value that a horse can move in. I thought at first that i would have to change something in places that are in charge of how the horse moves. Any help would be appreciated!

[thalaeg]

Sure thing. Now, I must admit, I am no expert in JS! Nor am I a coding guru, but what I would do is determine how big the canvas is (i.e. this.cavas.height = x) and then add a listener to when the game redraws the horse to not let it be redrawn past the canvas parameters. Since that is the case I would think it would go in the "this.newPos = function ()" because it is checking to see if it is past that location or not.

A resource that I used to get the game board up and going is W3 schools. I think you will find it VERY helpful! I recommend checking it out. https://www.w3schools.com/graphics/game_canvas.asp

[digitaldina]

Thanks for the resources. I'll go over them, try my best, and let you know if I'm struggling with anything! Thanks! @thalaeg