The DOM, the Creeper and the Canvas

Ironhack Week 5

What a week!

Overall, it wasn't that much in terms of amount of material - it was just harder to grasp (at least for me) at much more intense in terms of complexity. To be sure, to me a whole arsenal of array methods is a bit quicker to grasp than simple game mechanics. But one after the other.

DOM Manipulation

As in the previous week we tried our hand at DOM manipulation, which is nothing but the manipulation of what you can see and handle on your HTML page via the DOM API - generate content dynamically, change content attributes, storing variables (right now, mostly in the stack) and so on.

As always, it was very exercise-based. Together with the class (either as a code-along or after with the code provided) we conjured up some shapes in the HTML and "grabbed" them (that's the image I like best) with DOM API methods like

document.querySelector()
document.getElementById()
document.getElementsByClassName()[]

and so on and so forth. To me it just seems so ingenious for someone to have thought of something like this (which is a recurring theme in my relationship with JavaScript - how creative someone had to be to come up with that stuff!?)

With manipulating the DOM, you can manipulate anything. We made little android robots go up and down (with CSS) and changed their CSS selectors depending on where they were in their animation (with JavaScript).

We through a Math.floor(Math.random()) function into a loop over several squares in the HTML structure and made them all take on different (supposedly 50, but I didn't count) shades of grey.

All of this just shows me that everything forms a coherent web of possibilities. All of those basics we drilled into our brains (at least me, I had hard times sometimes getting the hang of for-loops, forEach's and so on) can be used for all kinds of stuff!

The lab we worked on to deepen our understanding of the DOM had to do with a shopping cart - grabbing predefined item values and names, placing them in a cart structure, adding subtotals and the grand total, removing items and adding custom items. All things together really reinforced the point for me what programming is at it's core:

You don't need to know by heart how exactly all methods do something. What you need to practice is to identify the potential tools needed for a solution to a problem - usually, there are multiple options.

By no means I'm saying that with one exercise, some reading material and a speedy talking through we are now all Masters of the DOM - but with these use-cases and some examples of how to approach these problems we are given the tools to solve various problems.

Drawing Conclusions

The other extremely big part of this week's material was also something that I hadn't practiced that much before: the canvas. There is I think one little project with JavaScript 30 where I first encountered the canvas-element, and was just baffled by all of it. I also never touched it after this brief encounter. Wish I had done more with it cause its so cool!

I obviously tried to prepare this week with study material, just so I'm not completely lost when we get to it. And so I read through syntax I had never laid my eyes on before and was able to draw some squares and rectangles right there into the browser - onto the canvas, as it were - put some dots and circles and whatnot. Some lines, too! Very exciting.

And then came moving stuff.

I was again, just baffled. How do you move that stuff? It's like a videogame, it just does it by itself!

My big problem is: I look at an exercise or a code kata or whatever it is, and I take it at face value and try to solve what I see. Same thing here: I draw a square, how do I make it move to the right?

Answer: I don't. We just erase the whole canvas and draw the square again, a little to the right (x = x+1) and a little down (y = y+1, since on a canvas, the y-value is inverted). And you do that so fast that your eyes perceive it as continuous motion. But how to do that several times in a row? Well...

const draw = () => {
    clearRect(canvas.x,canvas.y,canvas.width,canvas.height) //erase everything from the canvas
    fillRect(square.x, square.y, square.width, square.height, color) //draw a square 
}

const update = () => {
    square.x = square.x + 1
    square.y = square.y + 1 //move the "next" square down and to the right
}

let drawInterval = setInterval(() => {
    draw()
    update() } , 1000/60) //draw and update at 60fps

SetInterval functions - sound familiar? I'm still baffled.

Of course canvas comes with its own host of methods (like getContext, superimportant!), of which you have to learn some by heart just to never forget - and the rest you can look up.

Don't forget that a new Image() is just there to use, no need to set up a whole Class although the syntax is the same! Don't forget to through an image.onload into the mix or else -

That's all stuff I learned to just say to myself when starting a new exercise or little project. Which brings us to the next big thing:

Project time!

Basically all of the long class day was prep work for our game projects - not that we need to use canvas or anything, but most people seem to do that. Most of the lesson was a very in-depth code-along (of the same code-along I had done for pre-preparing) with a few different takes and tangents - for example how to use

static

in a Class, or what it's good for. Our instructor covered some more topics in regards to game mechanis and physics, but I admit - that is not something that comes super easy to me and I need to look at the class code again to fully grasp it. But once that's done I should be able to come up with that stuff myself.

After a whole host of very useful tips our TA's talked about their first game projects when they were at Ironhack, and did a little presentation on

1. what there is to do
2. what the requirements are for a Minimum Viable Product (the absolut basic)
3. what the process is
4. what the schedule is
5. how much fun we are having right now

The timing was a bit bad since we were all tired and kind of staring blankly at the screen when they asked us if we were excited. I for one was tired AF but I'm still very excited.

So the next two weeks will be no new learning materials and purely concentrated on the project process. I'm really looking forward to it, although of course I am anxious. Here at home our calendar seems to grow more colorful and also just fuller by the day - and I want my MVP to be fun and a bit braggy, if possible.

jmc

In this series of blog post I write about my experience at Ironhack bootcamp. The material is available to anybody and free to use on the internet - I do not work for Ironhack (I paid to participate in a bootcamp, so...). These posts are not supposed to be deep-dive anything, just reflect what I learned about various programming techniques. If anybody finds them while googling, cool. If anybody finds them helpful, even cooler! If nothing happens - also fine.