How to write code in small chunks and test them.
Right now, nothing is on the page.
There is nothing to add on with it.
So what I would do right now, is to actually try loading
up your game and then put on console.log statements,
start out with console.log inside your enemy.update
function console.log inside your player function
just because we are already calling them.
So as you can see Anime is going to render all of this but
then after JS is aware it actually runs the code and loads the resources.
And I'm thinking that you are saying there are no enemies are bugs
inside your canvas that is being rendered.
So what you can do is if you don't know how to start
writing the update function, just put in console.log.
Or what you can do is you can just call your enemy.render function,
create an object here.
Like how I showed you how to create var enemy equals, new enemy off.
And then you can put in the x and
y values of the enemy to just render it on the screen.
It does not have to move it does not have to do any functionality.
So try creating one class for one object of the enemy.
And try calling the render function on it.
That should be very helpful console log is very useful so
use a lot of prince statements around.
Since i know that inside engine.js.
You will be calling enemy.update and enemy.renderfunction here.
You will obviously need these functions defined inside your app and
your as a file.
>> I wanted to make a green bug, so I went into Photoshop and altered the hue.
But I get this error.
Failed to execute draw image on canvas rendering context 2D.
The provided value is not of type HTML image element, or
HTML video element or HTML canvas element.
>> Okay, so as long as you save it in a PNG format, and
put it inside your images repository it shouldn't have a problem.
I have known a lot of students actually putting in different colors to the bug.
Blue, yellow, green, and all that they have to do
is Photoshop the images just saving inside your images repository.
And then adding to your resources.
So, wherever I think sure change you inside one of your gs finals.
I believe it is your engine.js file.
Make sure that you are morons are right here.
You can see that you are loading all these and you have only enemy-bug.png.
Wait, you can name it yellow-bug, blue-bug, whatever color you set it in.
But make sure you add it into the road function and
make sure it isn't your images repository.
As long as you're doing that, it should work.
>> I'm trying to code for P 3 to detect collision, but when i make every
from the enemy.x may creating var.enemy.
Experimenting equal to the enemy.x minus fifty I get
an undefined because my enemy dot X was only 34.
Thus I got a negative number.
Please let me know how to avoid this.
>> Okay, well good question kid.
This part of the project is very tricky.
Now, it surprises me a little bit that you get an undefined error because these
are in the jurors and so subtracting them should just.
Result in the worst case as a negative number which might be off your canvas
but what I do have is a great link and so this page as you can check it out it
talks of it tells you here exactly about axis-aligned bounding box.
And what you can do for it to test your collisions.
I don't think you have to worry about circle collision, but just this top one
here, axis-aligned bounding box, should be enough to get you started.
The other thing to think about too is
you can think about collision as in the reverse sense.
So, you can think about you could write a function to say what are you not
colliding.
And then say what do you not not colliding.
That can actually be easier math than facts and times.
So if that's at all helpful, give that whirl.
If you are having questions about your specific code and
this website doesn't help and the different way of thinking about it
in terms of doing the opposite of not collide doesn't help.
Please post a question to the discussions and either us or
one of the students can try to help look at your exact code
to see what's going on there.
>> P 3 is there anything we should set up for when get an answer user close.
We know to clear memory allocations.
No so this is the beauty of JavaScript.
It has automatic garbage collection and this is a constant and
more low level programming languages such as C, C++ plus or even Java.
Is that like, the language itself, JavaScript automatically
clears the memory for you like if you have an object.
And if the object is not being referenced by anything then the computer
of the job.
The language itself, JavaScript is smart enough to know that okay,
there's nothing that's referencing this object anymore in my memory.
I'm just going to automatically clear it.
And you don't have to deal with garbage collection.
Unlike a low level programming language like C, C++.
>> What goes in the index.html file?
It appears you have the canvas drawn from in the engine.js file.
Is this a place to build a custom background, thanks.
>> So the index.html file, you shouldn't have to add anything to it.
If you wanted to, maybe let's say you wanted to have like a title
If you could but if your custom background you're referring to.
If you want to custom background for your game kind of like a backdrop
yeah you could edit the CSS and put like a background image on your body tag.
But if your background you're referring to is the game level,
then you would need to edit that in engine.js.
>> Yeah, I mean there should you shouldn't have to touch the HTML or
CSS files.
>> Multi pass.
>> Yeah if you want to do something.
>> Yeah.
>> Cool then you have to play with them a little bit.
>> I'm trying to figure out the with the height of players and
bugs images are 101 by 171 pixels.
But that is not how tall a white the bugging players are.
Is there a way to figure this out?
I'm working on collusion and trying to define the rectangles.
So actually the suit really good question and it was something that I
initially had a little bit of trouble with i like what my player on the board.
He ended up kind of police sort of off the board a little bit.
And I kind of played around with the measurements until
they got good on there.
And then I realized like my bugs were hitting my player at these weird angles,
and I was just like, all right.
I've just gotta figure out how big these are.
So do you have a tip for figuring out, sort of, the size of the players and
the bugs?
>> I'll tell you the reason it's weird like that,
Is because it kind of looks like a top down game.
>> Mm-hm. >> But it's really not.
If you look at the very bottom row.
It's a square.
But then it has that.
You see.
>> Yeah.
>> The front of the square.
Right?
So what happens is when the squares are drawn there.
The top layer is drawn.
>> Mm-hm?
>> And then the. >> At the top row drawn,
and the second row is drawn on top of that bottom piece a little bit.
So, they're oddly stacked.
I would say that the player and
the bugs should be sized as to the top of those images and not look
what the white actual images kind of ignore that bottom little piece there.
What I did in my implementation was actually defined an object that said
row one is this Y coordinate Row two is this Y coordinate.
And then I use that object of okay my player is on row one and
my bugs are on row one.
So that's now I can actually work on collision and stuff.
It is weird, the math can get odd.
For some reason 73 is in my head.
I think that was my [LAUGH] 73 pixels was my number.
>> I don't know what mine ended up being.
I think mind ended up being like 30 or
80 or something.
I don't remember.
[LAUGH] >> Yeah.
It was one of those things that, I mean, it really did just take trial and error.
>> Yeah. >> To get it right.
But I guess that's kind of part of making a game.
kind of shuffling things a little bit until they fit together.
>> Yeah.
So what I eventually did was I created a step size variable for the player.
So I said any time I press up,
he's going to move vertically this much space.
And then I would just constantly be i would have just that I would step that's
like sixty pixels and then i reload the game and president of up.
And if it looked like he was staying in the center of the blocks of.
Boxes all the way up.
Then i had the right number.
If he was going too far or not far enough and i just did that number.
And then i did the same thing with watched her back steps you know.
Horizontal and.
Just Tweaked it and played with it.
It didn't take long.
>> [CROSSTALK] Yeah.
>> I mean once I just, because I did the same thing as you.
I was trying to just handle these images.
And so, I mean, I did the same thing as you.
I tried to think about it logically and define it and, it really did for
me, just become a practice of all right just define a number and
tweak it and figure it out.