Gabriele Ferro Home

#100DaysOfCode Weekly Recap 07

I love playing with the canvas element.

After so much time spent programming using various languages, I'm wondering if maybe it would be a good idea to start programming courses in a different way. In other words, teaching beginners how the coordinate system works and how to draw in the canvas using vanilla JavaScript or better the p5.js library.

Like children who learn to draw first and then write.

The equivalent of "Hello World" in the canvas, could be turning on a pixel or drawing a colored rectangle.

It gives an immediate result on the screen and satisfaction is guaranteed!

Day 36

Disney offered to me an annual subscription for Skilleos.

It is a learning platform and I started (obviously) with the JavaScript course. There are some errors here and there but I am curious to see the entire path. For the moment I quickly review the JavaScript fundamentals.

Day 37

I am still playing with the canvas, but this time I use vanilla JavaScript instead of p5.js library.

Last week I had a question: if with the p5.js library I can interact with the canvas with very few lines of code, how many lines of vanilla JavaScript does it take?

Few, but context comes into play, which is ubiquitous for drawing operations.

const ctx = document.createElement("canvas").getContext("2d");

Day 38

I am following a tutorial on Skilleos.

I'm starting to write the code to create Snake in vanilla JavaScript using the canvas.

Day 39

Moved by curiosity rather than need, I continue to follow the tutorial on Skilleos that will "teach" me how to create Snake in vanilla JavaScript.

For now, my snake does only one thing: it moves every 500 milliseconds to the right.

I've had some difficulties caused by the instructor's mistakes and uncertainties but I'm still learning a lot of new things. Among them the use of two useful functions: save and restore.

I found this article that cleared up any doubts I had. http://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/

Day 40

I wrote the code to make the snake move but it goes through the walls and....

I'll have to manage the collision with the walls (the border of the canvas) but for the moment I don't know if I should make the player die or teleport him to the other side.

Day 41 (Today)

I finished writing my version of Snake, and my code is very different from the one suggested in the tutorial.

I wanted that when my snake reaches the border of the canvas it teleports to the other side instead of dying.

It seems more fun to me.

Use the ARROW keys to change direction and press the SPACEBAR (or die) to restart the game.

There is no scoring, just fun.

GAME: https://meimato.github.io/snake/index.html…

CODE: https://github.com/Meimato/snake

**Thoughts:**

I love programming because

February 2024
MTWTFSS
 1234
567891011
12131415161718
19202122232425
26272829 

Archives

Gabriele Ferro Home
Copyright © Ferro Gabriele. All rights reserved.